8.4 购物车控制器
图8-3 添加ShoppingCart控制器
using System.Linq;
using System.Web.Mvc;
using MvcBookStore.Models;
using MvcBookStore.ViewModels;
namespace MvcBookStore.Controllers
{
public class ShoppingCartController : Controller
{
BookStoreEntities storeDB = new BookStoreEntities();
//
// GET: /ShoppingCart/
public ActionResult Index()
{
var cart = ShoppingCart.GetCart(this.HttpContext);
//创建我们的视图模型
var viewModel = new ShoppingCartViewModel
{
CartItems = cart.GetCartItems(),
CartTotal = cart.GetTotal()
};
// 返回视图
return View(viewModel);
}
//
// GET: /Store/AddToCart/5
public ActionResult AddToCart(int id)
{
// 从数据库中获取书籍信息
var addedBook = storeDB.Books
.Single(book => book.Id == id);
// 将这本书加入购物车
var cart = ShoppingCart.GetCart(this.HttpContext);
cart.AddToCart(addedBook);
//返回页面继续购物
return RedirectToAction("Index");
}
//
// AJAX: /ShoppingCart/RemoveFromCart/5
[HttpPost]
public ActionResult RemoveFromCart(int id)
{
// 从购物车中删除书籍
var cart = ShoppingCart.GetCart(this.HttpContext);
// 取得书名以便在确认信息中显示
string bookName = storeDB.Carts
.Single(item => item.RecordId == id).Book.Title;
// 从购物车中删除
int itemCount = cart.RemoveFromCart(id);
// 显示确认信息
var results = new ShoppingCartRemoveViewModel
{
Message = Server.HtmlEncode(bookName) +" 已经从购物车中被删除。",
CartTotal = cart.GetTotal(),
CartCount = cart.GetCount(),
ItemCount = itemCount,
DeleteId = id
};
return Json(results);
}
//
// GET: /ShoppingCart/CartSummary
[ChildActionOnly]
public ActionResult CartSummary()
{
var cart = ShoppingCart.GetCart(this.HttpContext);
ViewData["CartCount"] = cart.GetCount();
return PartialView("CartSummary");
}
}
}
8.5 使用Ajax.ActionLink处理Ajax更新
图8-4 创建购物车用主视图
但是,在从购物车中删除书籍的时候,我们不使用Html.ActionLink,而是使用如下所示的Ajax.ActionLink。
@Ajax.ActionLink("Remove from cart","RemoveFromCart",new { id = item.RecordId },
new AjaxOptions { OnSuccess = "handleUpdate"})
这个方法的执行结果与Html.ActionLink帮助器的执行结果非常类似,但是它并不提交表单,而是向我们的RemoveFromCart方法执行一个AJAX回调,返回一个序列化的JSON对象的,该对象将被自动传入到页面中一个可选的OnSuccess参数所指定的方法—本例中为handleUpdate方法中。在handleUpdate这个JavaScript方法中解析JSON对象,使用Jquery来对视图执行以下四个快速更新操作。
- 从列表中移除被删除的书籍。
- 更新购物车中的书籍数量。
- 向用户显示更新信息。
- 更新购物车中的总金额。
@model MvcBookStore.ViewModels.ShoppingCartViewModel
@{
ViewBag.Title = "购物车";
}
<script src="/Scripts/jquery- 1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 页面打开时在点击链接的时候执行删除操作
$(".RemoveLink").click(function () {
//取得链接中的ID
var recordToDelete = $(this).attr("data-id");
if (recordToDelete != '') {
// 执行ajax调用
$.post("/ShoppingCart/RemoveFromCart", { "id":recordToDelete },
function (data) {
// 删除成功时执行的代码
// 更新页面元素
if (data.ItemCount == 0) {
$('#row-' + data.DeleteId).fadeOut('slow');
} else {
$('#item-count-' +data.DeleteId).text(data.ItemCount);
}
$('#cart-total').text(data.CartTotal);
$('#update-message').text(data.Message);
$('#cart-status').text('Cart (' + data.CartCount + ')');
});
}
});
});
function handleUpdate() {
//装载并解析JSON对象
var json = context.get_data();
var data = Sys.Serialization.JavaScriptSerializer.deserialize(json);
// 更新页面元素
if (data.ItemCount == 0) {
$('#row-' + data.DeleteId).fadeOut('slow');
} else {
$('#item-count-' + data.DeleteId).text(data.ItemCount);
}
$('#cart-total').text(data.CartTotal);
$('#update-message').text(data.Message);
$('#cart-status').text('Cart (' + data.CartCount + ')');
}
</script>
<h3>
<em>查阅</em> 购物车
</h3>
<p>
@Html.ActionLink("结算", "AddressAndPayment", "Checkout")
</p>
<div id="update-message">
</div>
<table>
<tr>
<th>
书名
</th>
<th>
单价
</th>
<th>
数量
</th>
<th></th>
</tr>
@foreach (var item in Model.CartItems)
{
<tr id="row-@item.RecordId">
<td>
@Html.ActionLink(item.Book.Title,"Details", "Store", new { id = item.BookId },
null)
</td>
<td>
@item.Book.Price
</td>
<td id="item-count-@item.RecordId">
@item.Count
</td>
<td>
<a href="#" class="RemoveLink" data-id="@item.RecordId">删除书籍</a>
</td>
</tr>
}
<tr>
<td>
总金额
</td>
<td>
</td>
<td>
</td>
<td id="cart-total">
@Model.CartTotal
</td>
</tr>
</table>
@model MvcBookStore.Models.Book
@{
ViewBag.Title = "书籍 - " + Model.Title;
}
<h2>@Model.Title</h2>
<div id="book-details">
<p>
<em>种类:</em>
@Model.Genre.Name
</p>
<p>
<em>作者:</em>
@Model.Author.Name
</p>
<p>
<em>单价:</em>
@String.Format("{0:F}",Model.Price)
</p>
<p>
@Html.ActionLink("放入购物车", "AddToCart", "ShoppingCart",
new { id = Model.Id }, "")
</p>
</div>
图8-5 Store控制器的主页面
图8-6 书籍列表页面
图8-7 书籍详细信息页面
现在我们已经建立了一个购物车页面,允许匿名用户将书籍放入购物车中。在下一节中,我们将允许注册用户完成本次购买的下订单过程。