Asp.Net MVC與JQuery強強聯(lián)手:開發(fā)給力電子商務
來源： 和訊科技
廣告：
在大多數(shù)電子商務Web應用程序中，他們設計的“將產(chǎn)品添加至購物車”的特性主要通過使用按鈕或者鏈接之類的UI界面來將產(chǎn)品添加至購物車中。在偶然的機會中，我看到了JQuery Shopping Cart Plug-in 的示例。在這個例子中，產(chǎn)品添加至購物車實現(xiàn)的功能更為強大，你只需要將產(chǎn)品拖拽至購物車即可。
這個示例給了我很大的啟發(fā)，我意識到了對于電子商務Web應用程序，可以在添加至購物車的功能模塊中新增更多的交互性。所以我決定使用Asp.net MVC插件。
為了讓應用程序變得簡單，我只用了一張數(shù)據(jù)庫表，來顯示產(chǎn)品列表，至于其它的特性，包括新增產(chǎn)品數(shù)據(jù)表等，我一概都沒有提及。
配置
要實現(xiàn)這些功能，我們需要安裝兩個JQuery文件。
1.JQuery-1.6.2
2.JQuery-ui-1.8.11
你可以從Jquery.com網(wǎng)站上下載這個文件，如果你正在使用VS2010和MVC3或者MVC4的應用程序，那么腳本的文件夾中就已經(jīng)包含了jQuery文件。
實現(xiàn)步驟：
第一步：
在Visual Studio中創(chuàng)建一個新的MVC應用程序。檢查一下腳本文件夾中是否存在兩個Jquery文件。如果沒有，下載該文件，并將文件添加至腳本文件夾中。
第二步：
創(chuàng)建數(shù)據(jù)庫，新增以下數(shù)據(jù)表并且命名為Products。
在新建products數(shù)據(jù)表后，在數(shù)據(jù)表中插入數(shù)據(jù)記錄，將產(chǎn)品信息顯示在列表頁里。由于產(chǎn)品圖片在數(shù)據(jù)表中只能存儲圖片名稱，所以需要在項目的根目錄下新建一個文件夾，命名為images，然后將所有的圖片拷貝至文件夾中。最后，在webconfig文件中添加數(shù)據(jù)庫連接字符串。
現(xiàn)在，為了從數(shù)據(jù)庫中查詢數(shù)據(jù)，我已經(jīng)新建了一個類“Products”，聲明代碼如下：
public class Products
public int ProductID ;
public string ProductName;
public decimal Price;
public string ProductImage; 在應用程序的根目錄下創(chuàng)建一個新文件夾，命名為Data Access，在文件夾中新增一個類，命名為DALProducts.這個類主要用于數(shù)據(jù)庫操作，具體代碼如下：
public class DALProducts
public Listproducts> GetProductList()
SqlConnection _con = new SqlConnection(ConfigurationManager.ConnectionStrings["ProductDataBaseConnection"].ConnectionString);
try
SqlCommand _cmd = _con.CreateCommand();
_cmd.CommandText = "Select * From Products";
SqlDataReader _reader = _cmd.ExecuteReader();
Listproducts> _lstPoducts = new Listproducts>();
while (_reader.Read())
Products _Products = new Products();
_Products.ProductID =Convert.ToInt32(_reader["ProductID"]);
_Products.ProductImage = _reader["ProductImage"].ToString();
_Products.ProductName = _reader["ProductName"].ToString();
_Products.Price = Convert.ToDecimal(_reader["Price"]);
_lstPoducts.Add(_Products);
return _lstPoducts;
catch (Exception ex)
throw ex;
finally
if (_con.State != System.Data.ConnectionState.Closed)
_con.Close();
products>products>products> 以上的代碼GetProductList方法返回產(chǎn)品列表。新增ProductController類，該類將繼承Controller類，新增代碼如下：
public class ProductController : Controller
//
// GET: /Product/
public ActionResult Index()
DataAccess.DALProducts _obj = new DataAccess.DALProducts();
return View(_obj.GetProductList()); controller的Index函數(shù)會調(diào)用一個DALProduct類的GetproductList方法，并將產(chǎn)品信息列表傳遞給視圖。
新增一個視圖index.aspx，代碼如下。
@ Page Language="C#" Inherits="
System.Web.Mvc.ViewPageIEnumerableEcommerceApplication.Models.Products>>" %>
title>Indextitle>
script type="text/javascript" src="../../Scripts/jquery-1.6.2.min.js"> script>
script type="text/javascript" src="../../Scripts/jquery-ui-1.8.11.min.js"> script>
style type="text/css">
body
font-family: Arial, "Free Sans";
margin: 0;
padding: 0;
#main
background: #0099cc;
margin-top: 0;
padding: 2px 0 4px 0;
text-align: center;
#main a
color: #ffffff;
text-decoration: none;
font-size: 12px;
font-weight: bold;
font-family: Arial;
#main a:hover
text-decoration: underline;
#item_container
width: 610px;
.item
background: #fff;
float: left;
padding: 5px;
cursor: move;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
box-shadow: 0 1px 2px rgba(0,0,0,.5);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
z-index: 5;
.title, .price
display: block;
text-align: center;
font-size: 14px;
letter-spacing: -1px;
font-weight: bold;
cursor: move;
.title
color: #333;
.price
color: #0099cc;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
.icart, .icart label
cursor: e-resize;
.divrm
text-align: right;
.remove
text-decoration: none;
cursor: pointer;
font-weight: bold;
font-size: 20px;
position: relative;
top: -7px;
.remove:hover
color: #999;
.clear
clear: both;
#cart_container
width: 495px;
#cart_title span
border: 8px solid #666;
border-bottom-width: 0;
background: #333;
display: block;
float: left;
color: #fff;
font-size: 11px;
font-weight: bold;
padding: 5px 10px;
-webkit-border-radius: .5em .5em 0 0;
-moz-border-radius: .5em .5em 0 0;
border-radius: .5em .5em 0 0;
#cart_toolbar
overflow: hidden;
border: 8px solid #666;
border="1" Height: 190px;
z-index: -2;
width: 483px;
-webkit-border-radius: 0 .5em 0 0;
-moz-border-radius: 0 .5em 0 0;
border-radius: 0 .5em 0 0;
background: #ffffff;
#cart_items
border="1" Height: 190px;
width: 483px;
position: relative;
padding: 0 0 0 2px;
z-index: 0;
cursor: e-resize;
border-width: 0 2px;
.back
background: #e9e9e9;
#navigate
width: 463px;
border: 8px solid #666;
border-top-width: 0;
-webkit-border-radius: 0 0 .5em .5em;
-moz-border-radius: 0 0 .5em .5em;
border-radius: 0 0 .5em .5em;
padding: 10px;
font-size: 14px;
background: #333;
font-weight: bold;
#nav_left
float: left;
#nav_left a
padding: 4px 8px;
background: #fff;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
text-decoration: none;
color: #0099cc;
#nav_left a:hover
background: #666;
color: #fff;
#nav_right
float: right;
.sptext
background: #ffffff;
padding: 4px 8px;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
color: #666;
.count
color: #0099cc;
.drop-active
background: #ffff99;
.drop-hover
background: #ffff66;
style>
script type="text/javascript">
var total_items = 0;
var total_price = 0;
$(document).ready(function () {
$(".item").draggable({
revert: true
});
$("#cart_items").draggable({
axis: "x"
});
$("#cart_items").droppable({
accept: ".item",
activeClass: "drop-active",
hoverClass: "drop-hover",
drop: function (event, ui) {
var item = ui.draggable.html();
var itemid = ui.draggable.attr("id");
var html = "
";
html = html + "
";
html = html + "" + itemid + ">×";
html = html + "" + item + "
";
$("#cart_items").append(html);
// update total items
total_items++;
$("#citem").html(total_items);
// update total price
var price = parseInt(ui.draggable.find(".price").html().replace("$ ", ""));
total_price = total_price + price;
$("#cprice").html("$ " + total_price);
// expand cart items
if (total_items > 4) {
$("#cart_items").animate({ width: "+=120" }, "slow");
});
$("#btn_next").click(function () {
$("#cart_items").animate({ left: "-=100" }, 100);
return false;
});
$("#btn_prev").click(function () {
$("#cart_items").animate({ left: "+=100" }, 100);
return false;
});
$("#btn_clear").click(function () {
$("#cart_items").fadeOut("2000", function () {
$(this).html("").fadeIn("fast").css({ left: 0 });
});
$("#citem").html("0");
$("#cprice").html("$ 0");
total_items = 0;
total_price = 0;
return false;
});
});
function remove(el) {
$(el).hide();
$(el).parent().parent().effect("highlight", { color: "#ff0000" }, 1000);
$(el).parent().parent().fadeOut("1000");
setTimeout(function () {
$(el).parent().parent().remove();
// collapse cart items
if (total_items > 3) {
$("#cart_items").animate({ width: "-=120" }, "slow");
}, 1100);
// update total item
total_items;
$("#citem").html(total_items);
// update totl price
var price = parseInt($(el).parent().parent().find(".price").html().replace("$ ", ""));
total_price = total_price - price;
$("#cprice").html("$ " + total_price);
div>
foreach (var item in Model)
{ %>
div>
img src="%3C%:%20Url.Content%28" />"/>
label>:item.ProductName%>label>
label>$ :item.Price %>label>
div>
} %>
div> div>
div>
div>
div>
span>Shopping Cart span>
div>div>
div>
div>
div>div>
div>
div>
div>
a>a>
a>>a>
a>Clear Carta>
div>
div>
span>
label>Items label>label>0label>
span>
span>
label>Price label>label>$ 0label>
span>
div>
div>div>
div>
div>
body>
html>
在以上代碼中，我們可以通過產(chǎn)品模型迭代來生成產(chǎn)品列表。它會顯示產(chǎn)品名稱、產(chǎn)品圖片、以及產(chǎn)品價格。
運行以下程序，在瀏覽器中鍵入以下URL地址http://localhost/Product/，你會看到一個屏幕，從產(chǎn)品列表中將產(chǎn)品拖拽至購物車中。你會注意到當你將產(chǎn)品添加至購物車里，購買物品的總價會自動更新。你也可以使用清除購物車按鈕來清除整個購物車的物品。你還可以通過選中指定產(chǎn)品的圖片來取消單個產(chǎn)品的購買。當你取消購買單個產(chǎn)品的時候，總體價格會扣除取消購買產(chǎn)品的價格。購買產(chǎn)品的總體數(shù)量也會相應減少。
在電子商務的應用程序中，通過使用這個插件可以為終端用戶提供更多的交互性。希望這篇文章對你也有所幫助。
廣告：
