一步步打造一个简单的 MVC 电商网站 - BooksStore（二）
本系列的 GitHub地址：https://github.com/liqingwen2015/Wen.BooksStore
《一步步打造一个简单的 MVC 电商网站 - BooksStore（一）》
《一步步打造一个简单的 MVC 电商网站 - BooksStore（二）》
《一步步打造一个简单的 MVC 电商网站 - BooksStore（三）》
《一步步打造一个简单的 MVC 电商网站 - BooksStore（四）》
简介
上一次我们尝试了：创建项目架构、创建域模型实体、创建单元测试、创建控制器与视图、创建分页和加入样式，而这一节我们会完成两个功能，分类导航与购物车。
主要功能与知识点如下：
分类、产品浏览、购物车、结算、CRUD（增删改查） 管理、发邮件、分页、模型绑定、认证过滤器和单元测试等（预计剩余两篇，预计明天（因为周六不放假）和周三（因为周二不上班）发布）。
【备注】项目使用 VS2015 + C#6 进行开发，有问题请发表在留言区哦，还有，页面长得比较丑，请见谅。
目录
添加分类导航
加入购物车
创建一个分部视图 Partial View
一、添加分类导航
上一次我们把网页划分成了三个模块，其中左侧栏的部分尚未完成，左侧栏拥有将书籍分类展示的功能。
图 1
1.回到之前的BookDetailsViewModels 视图模型，我们额外再添加一个新的属性用作分类（CurrentCategory）：
/// <summary>
/// 书籍详情视图模型
/// </summary>
public class BookDetailsViewModels : PagingInfo
{
public IEnumerable<Book> Books { get; set; }
/// <summary>
/// 当前分类
/// </summary>
public string CurrentCategory { get; set; }
}
</div>
2.修改完视图模型，现在就应该修改对应的 BookController 中的Details 方法
/// <summary>
/// 详情
/// </summary>
/// <param name="category">分类</param>
/// <param name="pageIndex">页码</param>
/// <returns></returns>
public ActionResult Details(string category, int pageIndex = 1)
{
var model = new BookDetailsViewModels
{
Books =
_bookRepository.Books.Where(x => category == null || x.Category == category)
.OrderBy(x => x.Id)
.Skip((pageIndex - 1) * PageSize)
.Take(PageSize),
CurrentCategory = category,
PageSize = PageSize,
PageIndex = pageIndex,
TotalItems = _bookRepository.Books.Count(x => category == null || x.Category == category)
};
return View(model);
}
</div>
BookController.cs
namespace Wen.BooksStore.WebUI.Controllers
{
public class BookController : Controller
{
private readonly IBookRepository _bookRepository;
public int PageSize = 5;
public BookController(IBookRepository bookRepository)
{
_bookRepository = bookRepository;
}
/// <summary>
/// 详情
/// </summary>
/// <param name="category">分类</param>
/// <param name="pageIndex">页码</param>
/// <returns></returns>
public ActionResult Details(string category, int pageIndex = 1)
{
var model = new BookDetailsViewModels
{
Books =
_bookRepository.Books.Where(x => category == null || x.Category == category)
.OrderBy(x => x.Id)
.Skip((pageIndex - 1) * PageSize)
.Take(PageSize),
CurrentCategory = category,
PageSize = PageSize,
PageIndex = pageIndex,
TotalItems = _bookRepository.Books.Count(x => category == null || x.Category == category)
};
return View(model);
}
}
}
</div>
参数增加了一个 category，用于获取分类的字符串，对应 Books 中的属性的赋值语句改为_bookRepository.Books.Where(x => category == null || x.Category == category)，这里的 Lambda 表达式x => category == null || x.Category ==category 的意思是，分类字符串为空就取库中所有的 Book 实体，不为空时根据分类进行对集合进行筛选过滤。
还要对属性 CurrentCategory 进行赋值。
别忘了，因为分页是根据 TotalItems 属性进行的，所以还要修改地方_bookRepository.Books.Count(x => category == null || x.Category == category)，通过 LINQ 统计不同分类情况的个数。
3.该控制器对应的 Details.cshtml 中的分页辅助器也需要修改，添加新的路由参数：
<div class="pager">
@Html.PageLinks(Model, x => Url.Action("Details", new { pageIndex = x, category = Model.CurrentCategory }))
</div>
</div>
Details.cshtml
@model Wen.BooksStore.WebUI.Models.BookDetailsViewModels
@{
ViewBag.Title = "Books";
}
@foreach (var item in Model.Books)
{
<div class="item">
<h3>@item.Name</h3>
@item.Description
<h4>@item.Price.ToString("C")</h4>
<br />
<hr />
</div>
}
<div class="pager">
@Html.PageLinks(Model, x => Url.Action("Details", new { pageIndex = x, category = Model.CurrentCategory }))
</div>
</div>
4.路由区域也应当修改一下
RouteConfig.cs
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}",
defaults: new { controller = "Book", action = "Details" }
);
routes.MapRoute(
name: null,
url: "{controller}/{action}/{category}",
defaults: new { controller = "Book", action = "Details" }
);
routes.MapRoute(
name: null,
url: "{controller}/{action}/{category}/{pageIndex}",
defaults: new { controller = "Book", action = "Details", pageIndex = UrlParameter.Optional }
);
}
</div>
5.现在新建一个名为 NavController 的控制器，并添加一个名为Sidebar 的方法，专门用于渲染左侧边栏。
不过返回的 View 视图类型变成 PartialView 分部视图类型：
public PartialViewResult Sidebar(string category = null)
{
var categories = _bookRepository.Books.Select(x => x.Category).Distinct().OrderBy(x => x);
return PartialView(categories);
}
</div>
在方法体在右键，添加一个视图，勾上创建分部视图。
Sidebar.cshtml 修改为：
@model IEnumerable<string>
<ul>
<li>@Html.ActionLink("所有分类", "Details", "Book")</li>
@foreach (var item in Model)
{
<li>@Html.RouteLink(item, new { controller = "Book", action = "Details", category = item, pageIndex = 1 }, new { @class = item == ViewBag.CurrentCategory ? "selected" : null })</li>
}
</ul>
</div>
MVC 框架具有一种叫作“子动作（Child Action）”的概念，可以适用于重用导航控件之类的东西，使用类似 RenderAction() 的方法，在当前的视图中输出指定的动作方法。
因为需要在父视图中呈现另一