使用MVC4，Ninject，EF，Moq，构建一个真实的应用电子商务SportsStore(六)
添加Navigation控件
上篇我们已经对UI部分做了整理，但是我们网站看起来仍然很奇怪，因为用户无法选择他们想看的商品类别，必须要一页一页的浏览，直到找到自己想要买的东西。我经常在网上浏览一些技术站点，并添加他们到我的收藏夹，但收藏夹里的条目太多了，还是不能方便的找到自己想看的网址，偶然发现了一个网站，叫做开发者导航（http://www.devseek.net），它收录了我所需要的所有网址，这正是我想要的，于是我今天也用这个导航的字眼，来为我们的网站添加一个分类过滤的功能。我们今天的内容主要有三个部分：
1.增强ProductController类的List action功能，使它能够分类商品。
2.修改并加强URL scheme 和我们的rerouting策略。
3.在边条上创建分类列表，并高亮当前的分类和连接。
过滤产品列表
为了渲染我们的边条，我们需要和我们ProductsListViewModel类沟通，过滤出产品分类的列表，现在就打开这个文件，让我们为它做个Enhancement。
using System.Collections.Generic; using SportsStore.Domain.Entities; namespace SportsStore.WebUI.Models { public class ProductsListViewModel { public IEnumerable<Product> Products { get; set; } public PagingInfo PagingInfo { get; set; } public string CurrentCategory { get; set; } } }
我们为这个类添加了一个当前分类的属性，用来显示当前用户选择的分类。我们要更新我们ProductController，使它能够使用这个属性：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using SportsStore.Domain.Abstract; using SportsStore.Domain.Entities; using SportsStore.WebUI.Models; namespace SportsStore.WebUI.Controllers { public class ProductController : Controller { private IProductsRepository repository; public int PageSize = 4; public ProductController(IProductsRepository productRepository) { this.repository = productRepository; } public ViewResult List(string category, int page = 1) { ProductsListViewModel model = new ProductsListViewModel { Products = repository.Products .Where(p => category == null || p.Category == category) .OrderBy(p => p.ProductID) .Skip((page - 1) * PageSize) .Take(PageSize), PagingInfo = new PagingInfo { CurrentPage = page, ItemsPerPage = PageSize, TotalItems = repository.Products.Count() }, CurrentCategory = category }; return View(model); } } }
上面的代码我们做了3个改变。第一，我们添加了一个新的参数叫做category. 这个参数通过我们的第二个变化被使用，这第二个变化就是我改进了Linq查询，如果category参数不是null，只有匹配这个分类的产品才能被选择。这最后一个改变就是设置CurrentCategory 属性的值，然而，我们这3点改变，就意味着PagingInfo.TotalItems的值是不正确的，我们必须解决这个问题。
更新现有的测试方法
我们改变了List的参数列表，这使得我们必须更新我们现有的测试方法，为了保证我们的测试方法都可用，我们要为他们添加一个null值，作为第一个参数传递，找到Can_Paginate方法，将List(2).Model改成List(null, 2).Model。运行你的应用，能看到如下画面：
这和我们上篇最后的结果是一样的，现在你在地址栏中添加如下参数：?category=Soccer ，是你的地址栏看上去像这样http://localhost:47072/?category=Soccer 你会看到这样的画面：
我们的测试文件现在需要添加一个功能，使它能够正确的过滤一个分类并接收一个指定分类的产品：
[TestMethod] public void Can_Filter_Products() { // Arrange // - create the mock repository Mock<IProductsRepository> mock = new Mock<IProductsRepository>(); mock.Setup(m => m.Products).Returns(new Product[] { new Product {ProductID = 1, Name = "P1", Category = "Cat1"}, new Product {ProductID = 2, Name = "P2", Category = "Cat2"}, new Product {ProductID = 3, Name = "P3", Category = "Cat1"}, new Product {ProductID = 4, Name = "P4", Category = "Cat2"}, new Product {ProductID = 5, Name = "P5", Category = "Cat3"} }.AsQueryable()); // Arrange - create a controller and make the page size 3 items ProductController controller = new ProductController(mock.Object); controller.PageSize = 3; // Action Product[] result = ((ProductsListViewModel)controller.List("Cat2", 1).Model) .Products.ToArray(); // Assert Assert.AreEqual(result.Length, 2); Assert.IsTrue(result[0].Name == "P2" && result[0].Category == "Cat2"); Assert.IsTrue(result[1].Name == "P4" && result[1].Category == "Cat2"); }
这个测试创建了一个mock repository，它包含了类别中的一个Product对象，一个被指定使用在Action方法中的分类，并且结果被check，确保在右侧的产品对象都是正确的。
改善URL Scheme
我们的URL地址看上去太丑了，也不专业，现在我们必须花点时间去改善一下App_Start/RouteConfig.cs文件：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Routing; namespace SportsStore.WebUI { public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute(null, "", new { controller = "Product", action = "List", category = (string)null, page = 1 } ); routes.MapRoute(null, "Page{page}", new { controller = "Product", action = "List", category = (string)null }, new { page = @"\d+" } ); routes.MapRoute(null, "{category}", new { controller = "Product", action = "List", page = 1 } ); routes.MapRoute(null, "{category}/Page{page}", new { controller = "Product", action = "List" }, new { page = @"\d+" } ); routes.MapRoute(null, "{controller}/{action}"); } } }
|
URL |
导航到 |
|
/ |
列出说有产品的第一页列表 |
|
/Page2 |
列出所有产品的指定页 |
|
/Soccer |
列出指定类别的产品的第一页 |
|
/Soccer/Page2 |
列出指定类别的产品的指定页 |
|
/Anything/Else |
调用Anything 控制器的Else方法 |
这是我们URL Scheme的具体含义。MVC使用ASP.NET routing 系统去处理从用户端发来的请求，同时，它也向外发出URL scheme，这就是我们能够嵌入到网页中的地址，我们要做的就是这些应用中的地址都是被组装起来的。
现在我们就去添加一些对分类过滤的支持：
@model SportsStore.WebUI.Models.ProductsListViewModel @{ ViewBag.Title = "Products"; } @foreach (var p in Model.Products) { Html.RenderPartial("ProductSummary", p); } <div class="pager"> @Html.PageLinks(Model.PagingInfo, x => Url.Action("List", new {page = x, category = Model.CurrentCategory})) </div>
构建一个分类导航菜单
我们需要提供给用户一种途径，使用户能够选择某种分类，这就需要我们必须提供分类信息给用户，让他们去选择，而这个分类的信息必须要在多个控制器中运用，这就要求它必须是自包含的并且可重用的。在ASP.NET MVC框架中有个child actions的概念, 大家都喜欢用它来创建诸如可重用的导航控件之类的东西。一个child action 依赖与HTML helper方法，这个方法被称为RenderAction,它让我们从当前view的任意action方法中包含输出，现在我们创建一个新的Controller(我们称它为NavController) 和一个action方法 (菜单) ，并且渲染一个导航菜单，然后从这个方法中注入output到layout中。这个方法给了我们一个真正的控制器，无论我们的应用逻辑是什么都可以使用它，并且我们都能像其他控制器那用去测试它。
创建Navigation控制器
右击WebUI中的Controllers文件夹，创建一个名为NavController的控制器，选择空的MVC模板，删除自动生成的index方法，添加代码如下：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace SportsStore.WebUI.Controllers { public class NavController : Controller { // // GET: /Nav/ public string Menu() { return "Hello from NavController"; } } }
这个方法返回一个消息字符串，但这对于我们整合一个child action到这个应用的其他部分已经足够用了。我们希望这个分类列表展现在所有页面上，所以我们将在layout中渲染这个child action，而不是在一个指定的View中。 现在我们编辑Views/Shared/_Layout.cshtml 文件，让它调用RenderAction helper方法。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> <link href="~/Content/Site.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="header"> <div class="title">SPORTS STORE</div> </div> <div id="categories"> @{ Html.RenderAction("Menu", "Nav"); } </div> <div id="content"> @RenderBody() </div> </body> </html>
运行应用，你将看到我们的边条上已经出现了这条消息字符串：
产生分类列表
现在，我们就在Menu action方法中创建分类列表：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using SportsStore.Domain.Abstract; namespace SportsStore.WebUI.Controllers { public class NavController : Controller { // // GET: /Nav/ private IProductsRepository repository; public NavController(IProductsRepository repo) { repository = repo; } public PartialViewResult Menu() { IEnumerable<string> categories = repository.Products .Select(x => x.Category) .Distinct() .OrderBy(x => x); return PartialView(categories); } } }
我们的控制器现在接受一个IProductsRepository的实现，这个实现是通过Ninject提供的，还有一个变化，就是我们使用Linq从repository中获得分类信息，请注意，我们调用了一个PartialView的方法，返回了一个PartialViewResult对象。现在让我们去更新一下我们的测试文件吧！添加如下代码到你的测试文件：
[TestMethod] public void Can_Create_Categories() { // Arrange // - create the mock repository Mock<IProductsRepository> mock = new Mock<IProductsRepository>(); mock.Setup(m => m.Products).Returns(new Product[] { new Product {ProductID = 1, Name = "P1", Category = "Apples"}, new Product {ProductID = 2, Name = "P2", Category = "Apples"}, new Product {ProductID = 3, Name = "P3", Category = "Plums"}, new Product {ProductID = 4, Name = "P4", Category = "Oranges"}, }.AsQueryable()); // Arrange - create the controller NavController target = new NavController(mock.Object); // Act = get the set of categories string[] results = ((IEnumerable<string>)target.Menu().Model).ToArray(); // Assert Assert.AreEqual(results.Length, 3); Assert.AreEqual(results[0], "Apples"); Assert.AreEqual(results[1], "Oranges"); Assert.AreEqual(results[2], "Plums"); }
现在让我们去创建这个PartialView吧！
创建PartialView
在NavController中，右击Menu方法，选择添加View，并输入IEnumerable<string>在模型类输入框中。
修改Menu.cshtml文件如下：
@model IEnumerable<string> @Html.ActionLink("Home", "List", "Product") @foreach (var link in Model) { @Html.RouteLink(link, new { controller = "Product", action = "List", category = link, page = 1 }) }
在Site.css文件中添加如下代码：
DIV#categories A { font: bold 1.1em "Arial Narrow","Franklin Gothic Medium",Arial; display: block; text-decoration: none; padding: .6em; color: Black; border-bottom: 1px solid silver; } DIV#categories A.selected { background-color: #666; color: White; } DIV#categories A:hover { background-color: #CCC; } DIV#categories A.selected:hover { background-color: #666; }
运行你的应用，能应该能看到如下画面：
我们还要需要进一步完善，因为我们现在还不能让用户清楚的看出当前选择了那种分类，我们要高亮当前选中的分类，这样看起来才更加友好、实用。
修改我们的NavController中的Menu方法如下：
public PartialViewResult Menu(string category = null) { ViewBag.SelectedCategory = category; IEnumerable<string> categories = repository.Products .Select(x => x.Category) .Distinct() .OrderBy(x => x); return PartialView(categories); }
为我们的测试文件添加一个选中的测试方法：
[TestMethod] public void Indicates_Selected_Category() { // Arrange // - create the mock repository Mock<IProductsRepository> mock = new Mock<IProductsRepository>(); mock.Setup(m => m.Products).Returns(new Product[] { new Product {ProductID = 1, Name = "P1", Category = "Apples"}, new Product {ProductID = 4, Name = "P2", Category = "Oranges"}, }.AsQueryable()); // Arrange - create the controller NavController target = new NavController(mock.Object); // Arrange - define the category to selected string categoryToSelect = "Apples"; // Action string result = target.Menu(categoryToSelect).ViewBag.SelectedCategory; // Assert Assert.AreEqual(categoryToSelect, result); }
更新Menu.cshtml如下：
@model IEnumerable<string> @Html.ActionLink("Home", "List", "Product") @foreach (var link in Model) { @Html.RouteLink(link, new { controller = "Product", action = "List", category = link, page = 1 }, new { @class = link == ViewBag.SelectedCategory ? "selected" : null }) }
运行一下看看结果吧！
纠正页码
从上图中我们很轻易就能看出，我们的页码是错的，我们只有两个产品，却显示了有3页，我们必须纠正这个错误！打开ProductController，找到List方法，修改如下：
public ViewResult List(string category, int page = 1) { ProductsListViewModel model = new ProductsListViewModel { Products = repository.Products .Where(p => category == null || p.Category == category) .OrderBy(p => p.ProductID) .Skip((page - 1) * PageSize) .Take(PageSize), PagingInfo = new PagingInfo { CurrentPage = page, ItemsPerPage = PageSize, TotalItems = category == null ? repository.Products.Count() : repository.Products.Where(e => e.Category == category).Count() }, CurrentCategory = category }; return View(model); }
添加测试方法到测试文件：
[TestMethod] public void Generate_Category_Specific_Product_Count() { // Arrange // - create the mock repository Mock<IProductsRepository> mock = new Mock<IProductsRepository>(); mock.Setup(m => m.Products).Returns(new Product[] { new Product {ProductID = 1, Name = "P1", Category = "Cat1"}, new Product {ProductID = 2, Name = "P2", Category = "Cat2"}, new Product {ProductID = 3, Name = "P3", Category = "Cat1"}, new Product {ProductID = 4, Name = "P4", Category = "Cat2"}, new Product {ProductID = 5, Name = "P5", Category = "Cat3"} }.AsQueryable()); // Arrange - create a controller and make the page size 3 items ProductController target = new ProductController(mock.Object); target.PageSize = 3; // Action - test the product counts for different categories int res1 = ((ProductsListViewModel)target .List("Cat1").Model).PagingInfo.TotalItems; int res2 = ((ProductsListViewModel)target .List("Cat2").Model).PagingInfo.TotalItems; int res3 = ((ProductsListViewModel)target .List("Cat3").Model).PagingInfo.TotalItems; int resAll = ((ProductsListViewModel)target .List(null).Model).PagingInfo.TotalItems; // Assert Assert.AreEqual(res1, 2); Assert.AreEqual(res2, 2); Assert.AreEqual(res3, 1); Assert.AreEqual(resAll, 5); }
运行一下，现在看下我们成果吧！
好了，今天就到这里里吧！内容实在是有点多，但都是必须的，而且实用的技术，下一篇中，我们将为我们的应用添加一个购物车，这是电子商务网站上必须的功能，不然怎么卖商品呢？如果您觉得我的文章实用，对你有所帮助，请推荐它给你的朋友，请继续关注我的续篇！
