[.NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore（二）

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

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

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

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

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

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

简介

　　上一次我们尝试了：创建项目架构、创建域模型实体、创建单元测试、创建控制器与视图、创建分页和加入样式，而这一节我们会完成两个功能，分类导航与购物车。

　　主要功能与知识点如下：

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

【备注】项目使用 VS2015 + C#6 进行开发，有问题请发表在留言区哦，还有，页面长得比较丑，请见谅。

目录

添加分类导航

加入购物车

创建一个分部视图 Partial View

一、添加分类导航

　　上一次我们把网页划分成了三个模块，其中左侧栏的部分尚未完成，左侧栏拥有将书籍分类展示的功能。

body {
}

#header, #content, #sideBar {
display: block;
}

#header {
background-color: green;
border-bottom: 2px solid #111;
color: White;
}

#header, .title {
font-size: 1.5em;
padding: .5em;
}

#sideBar {
float: left;
width: 8em;
padding: .3em;
}

#content {
border-left: 2px solid gray;
margin-left: 10em;
padding: 1em;
}

.pager {
text-align: right;
padding: .5em 0 0 0;
margin-top: 1em;
}

.pager A {
font-size: 1.1em;
color: #666;
padding: 0 .4em 0 .4em;
}

.pager A:hover {
background-color: Silver;
}

.pager A.selected {
background-color: #353535;
color: White;
}

.item input {
float: right;
color: White;
background-color: green;
}

.table {
width: 100%;
padding: 0;
margin: 0;
}

.table th {
font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA no-repeat;
}

.table td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size: 14px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}

.table td.alt {
background: #F5FAFA;
color: #797268;
}

.table th.spec, td.spec {
border-left: 1px solid #C1DAD7;
}

Site.css

　　4.再添加一个 CartController

/// <summary>
/// 购物车
/// </summary>
public class CartController : Controller
{
private readonly IBookRepository _bookRepository;

public CartController(IBookRepository bookRepository)
{
_bookRepository = bookRepository;
}

/// <summary>
/// 首页
/// </summary>
/// <param name="returnUrl"></param>
/// <returns></returns>
public ViewResult Index(string returnUrl)
{
return View(new CartIndexViewModel()
{
Cart = GetCart(),
ReturnUrl = returnUrl
});
}

/// <summary>
/// 添加到购物车
/// </summary>
/// <param name="id"></param>
/// <param name="returnUrl"></param>
/// <returns></returns>
public RedirectToRouteResult AddToCart(int id, string returnUrl)
{
var book = _bookRepository.Books.FirstOrDefault(x => x.Id == id);

if (book != null)
{
GetCart().AddBook(book, 1);
}

return RedirectToAction("Index", new { returnUrl });
}

/// <summary>
/// 从购物车移除
/// </summary>
/// <param name="id"></param>
/// <param name="returnUrl"></param>
/// <returns></returns>
public RedirectToRouteResult RemoveFromCart(int id, string returnUrl)
{
var book = _bookRepository.Books.FirstOrDefault(x => x.Id == id);

if (book != null)
{
GetCart().RemoveBook(book);
}

return RedirectToAction("Index", new { returnUrl });
}

/// <summary>
/// 获取购物车
/// </summary>
/// <returns></returns>
private Cart GetCart()
{
var cart = (Cart)Session["Cart"];
if (cart != null) return cart;

cart = new Cart();
Session["Cart"] = cart;

return cart;
}
}

　　【备注】这里的购物车是通过 Session 会话状态进行保存用户的 Cart 对象。当会话过期（典型的情况是用户很长时间没有对服务器发起任何请求），与该会话关联的数据就会被删除，这就意味着不需要对 Cart 对象进行生命周期的管理。

　　【备注】RedirectToAction() 方法：将一个 HTTP 重定向的指令发给客户端浏览器，要求浏览器请求一个新的 Url。

　　5.在 Index 方法中选择右键新建视图，专门用于显示购物清单：



　　Index.cshtml 中的代码：

@model Wen.BooksStore.WebUI.Models.CartIndexViewModel

<h2>我的购物车</h2>

<table class="table">
<thead>
<tr>
<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("C"))</td>
</tr>
}
<tr>
<td> </td>
<td> </td>
<td>总计：</td>
<td>@Model.Cart.ComputeTotalValue().ToString("C")</td>
</tr>
</tbody>

</table>

<p>
<a href="@Model.ReturnUrl">继续购物</a>
</p>

　　我想，这一定是一个令人激动的时刻，因为我们已经完成了这个基本的添加到购物车的功能。

三、创建一个分部视图 Partial View

　　分部视图，是嵌入在另一个视图中的一个内容片段，并且可以跨视图重用，这有助于减少重复，尤其需要在多个地方需要重复使用相同的数据时。



　　在 Shared 内部新建一个名为 _BookSummary.cshtml 的视图，并且把之前 Details.cshtml 的代码进行整理。



　　修改后的两个视图：

　　Details.cshtml

@model Wen.BooksStore.WebUI.Models.BookDetailsViewModels

@{
ViewBag.Title = "Books";
}

@foreach (var item in Model.Books)
{
Html.RenderPartial("_BookSummary", item);
}

<div class="pager">
@Html.PageLinks(Model, x => Url.Action("Details", new { pageIndex = x, category = Model.CurrentCategory }))
</div>

　　_BookSummary.cshtml

@model Wen.BooksStore.Domain.Entities.Book

<div class="item">
<h3>@Model.Name</h3>
@Model.Description
<h4>@Model.Price.ToString("C")</h4>

@using (Html.BeginForm("AddToCart", "Cart"))
{
var id = Model.Id;
@Html.HiddenFor(x => id);
@Html.Hidden("returnUrl", Request.Url.PathAndQuery)

<input type="submit" value="+ 添加到购物车" />
}

<br />
<hr />
</div>

【博主】反骨仔

【原文】http://www.cnblogs.com/liqingwen/p/6647538.html

【参考】《精通 ASP.NET MVC ...》