[.NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore（三） - 反骨仔（二五仔）_H5之家

一步步打造一个简单的 MVC 电商网站 - BooksStore（三）

　　本系列的 GitHub地址：https://github.com/liqingwen2015/Wen.BooksStore

　　《一步步打造一个简单的 MVC 电商网站 - BooksStore（一）》（发布时间：2017-03-30 ）

《一步步打造一个简单的 MVC 电商网站 - BooksStore（二）》（发布时间：2017-03-31）

　　《一步步打造一个简单的 MVC 电商网站 - BooksStore（三）》（发布时间：2017-04-01）

简介

　　上一节我们完成了两个主要功能：添加到购物车和分类导航，这一节我们会完成整个购物车的流程，以及订单处理。

　　该系列主要功能与知识点如下：

　　　　分类、产品浏览、购物车、结算、CRUD（增删改查）管理、发邮件、分页、模型绑定、认证过滤器和单元测试等（预计剩余两篇，周三（因为周二不上班）先发布一篇）。

【备注】项目使用 VS2015 + C#6 进行开发，有问题请发表在留言区哦，还有，页面长得比较丑，请见谅。还有，这只是个入门级学习的demo，并非是高级教程哦，亲！

完成购物车

订单结算

一、完成购物车

　　上一节其实已经完成了移除购物车和清空购物车的方法，只是尚未将可供用户操作的按钮放在页面区域。除了增加这两个按钮，也会在页面顶部的位置增加购物车的摘要（用于显示用户的购物总额）。

　　下面是上一节已经写好的 CartController 代码。

购物车 CartController : Controller { private readonly IBookRepository _bookRepository; public CartController(IBookRepository bookRepository) { _bookRepository = bookRepository; } 首页 ViewResult Index(string returnUrl) { return View(new CartIndexViewModel() { Cart = GetCart(), ReturnUrl = returnUrl }); } 添加到购物车 RedirectToRouteResult AddToCart(int id, string returnUrl) { var book = _bookRepository.Books.FirstOrDefault(x => x.Id == id); if (book != null) { GetCart().AddBook(book, 1); } , new { returnUrl }); } 从购物车移除 RedirectToRouteResult RemoveFromCart(int id, string returnUrl) { var book = _bookRepository.Books.FirstOrDefault(x => x.Id == id); if (book != null) { GetCart().RemoveBook(book); } , new { returnUrl }); } 获取购物车 Cart GetCart() { ]; if (cart != null) return cart; cart = new Cart(); Session[] = cart; return cart; } }

CartController.cs

　　1.加入移除书籍和清空购物车的功能

@model Wen.BooksStore.WebUI.Models.CartIndexViewModel <h2>我的购物车</h2> <table > <thead> <tr> <th>书名</th> <th>价格</th> <th>数量</th> <th>总计</th> <th> </th> </tr> </thead> <tbody> @foreach (var item in Model.Cart.GetCartItems) { <tr> <td>@item.Book.Name</td> <td>@item.Book.Price</td> <td>@item.Quantity</td> <td>@((item.Book.Price * item.Quantity).ToString())</td> <td> @using (Html.BeginForm(, )) { @Html.Hidden(, item.Book.Id) @Html.HiddenFor(x => x.ReturnUrl) <input type=value=/> } </td> </tr> } <tr> <td> </td> <td> </td> <td>总计：</td> <td>@Model.Cart.ComputeTotalValue().ToString()</td> <td> @using (Html.BeginForm(, )) { @Html.HiddenFor(x => x.ReturnUrl) <input type=value=/> } </td> </tr> </tbody> </table>

Index.cshtml

　　【备注】@Html.Hidden("id", item.Book.Id) 是用于生成隐藏的字段，如果直接使用 @Html.HiddenFor()，生成的 name 将会是 item.Book.Id ，将和 CartController 中 RemoveFromCart(int id, string return) 的参数不匹配。

　　显示的效果如下：

　　2.添加摘要：我们在购物车存放了许多东西，通过摘要，可以显示购物总额的缩略图，我们选择的位置在顶部右上角的一个比较显眼的位置进行显示它，当然，还需要有点击的跳转按钮方便显示所有的购物清单页面。

　　继续在 CartController 下新增一个 Action，名为 Summary，返回值是一个分部视图：

摘要 PartialViewResult Summary() { return PartialView(GetCart()); }

　　对应的 Summary.cshtml