跟我学ASP.NET MVC之六：SportsStrore添加产品目录导航

摘要：

上一篇文章，我建立了SportsStore应用程序的核心架构。现在我将使用这个架构向这个应用程序添加功能，你将开始看到这个基础架构的作用。我将添加重要的面向客户的简单功能，在这个过程中，你将看到MVC框架提供的额外功能。

如果客户能够根据目录导航产品，SportsStore应用程序可用性将更高。

• 改进ProductController控制器中的List方法，让他能够过滤在repository里的产品对象。
• 修改改进URL格式，修改routing策略。
• 在网站首页旁边创建一个目录列表，高亮显示当前页。

过滤产品列表

修改视图模型ProductsListViewModel，添加当前目录信息。

using SportsStore.Domain.Entities;
using System.Collections.Generic;

namespace SportsStore.WebUI.Models
{
    public class ProductsListViewModel
    {
        public IEnumerable<Product> Products { get; set; }
        public PagingInfo PagingInfo { get; set; }
        public string CurrentCategory { get; set; }
    }
}

修改ProductController控制器的List方法，添加参数category，根据传入的category过滤产品。

using SportsStore.Domain.Abstract;
using SportsStore.WebUI.Models;
using System.Web.Mvc;
using System.Linq;

namespace SportsStore.WebUI.Controllers
{
    public class ProductController : Controller
    {
        private IProductRepository repository;

        public int PageSize = 4;

        public ProductController(IProductRepository productRepository)
        {
            this.repository = productRepository;
        }

        public ViewResult List(string category, int page = 1)
        {
            ProductsListViewModel model = new ProductsListViewModel
            {
                Products = repository.Products.Where(p => string.IsNullOrEmpty(category) || 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);
        }
    }
}

• 如果传入的category是空字符串，则返回所有产品列表。否则根据linq的where条件获取category下的产品列表。
• 如果传入的category是空字符串，则返回所有产品数量。否则根据linq的where条件获取category下的产品数量。
• 将category赋值给视图模型对象的CurrentCategory属性。

执行程序，如果将浏览器地址栏修改成下面的形式：

http://localhost:17596/?category=Soccer

将返回category是Soccer的产品列表。

很明显，用户将不会自己使用URL导航产品目录，但是你可以看到，一旦基础架构做好了，一个小的改动在一个MVC框架的应用程序起到了大的作用。

修改定义URL格式

没有人想看到或者使用丑陋的像/?category=Soccer一样的URL。为了改进这个，我将修改路由格式，创建更适合我和客户的生成URL的方法。

修改RouteConfig.cs文件的RegisterRoutes方法。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace SportsStore
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: null,
                url: "",
                defaults: new { controller = "Product", action = "List", category = (string)null, page = 1 }
            );

            routes.MapRoute(
                name: null,
                url: "Page{page}",
                defaults: new { controller = "Product", action = "List", category = (string)null },
                constraints: new { page = @"\d+" }
            );

            routes.MapRoute(
                name: null,
                url: "{category}",
                defaults: new { controller = "Product", action = "List", page = 1 }
            );

            routes.MapRoute(
                name: null,
                url: "{category}/Page{page}",
                defaults: new { controller = "Product", action = "List" },
                constraints: new { page = @"\d+" }
            );

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Product", action = "List", id = UrlParameter.Optional }
            );
        }
    }
}

下面来解释添加的路由信息。

第一个路由函数：

url: ""：表示这个是默认路由。defaults设置参数默认值，将category的空字符串设置为默认值，page的默认值是1。这样，如果访问URL：http://localhost:17596/，category为空字符串，page值为1。

第二个路由函数：

url: "Page{page}"：表示路由的URL格式是/Page{page}。defaults设置参数category的默认值为空字符串。这样，如果访问URL：http://localhost:17596/Page2，category为空字符串，page值为传入的值2。

第三个路由函数：

url: "{category}"：表示路由的URL格式是/{category}。defaults设置参数page的默认值为1。这样，如果访问URL：http://localhost:17596/Soccer，category为字符串Soccer，page值为默认值1。

第四个路由函数：

url: "{category}/Page{page}"：表示路由的URL格式是/{category}/Page{page}。defaults不用设置参数默认值。这样，如果访问URL：http://localhost:17596/Soccer/Page2，category为字符串Soccer，page值为传入的值2。

MVC使用ASP.NET路由系统来处理客户端到来的请求，但是它还用来向外生成符合URL定义格式的URL字符串，嵌入到Web页面上。于是，我可以保证应用程序的所有的URL都是一致的。

定义好路由表后，需要修改List视图上生成链接字符串的方法调用。

@model SportsStore.WebUI.Models.ProductsListViewModel

@{
    ViewBag.Title = "Products";
}

@foreach (var p in Model.Products)
{
    Html.RenderPartial("ProductSummary", p);
}
<div class="btn-group pull-right">
    @Html.PageLinks(Model.PagingInfo, x => Url.Action("List", new { page = x, category = Model.CurrentCategory }))
</div>

Url.Action方法是向外产生链接最方便的方法。这里添加将category传入生成链接的代理方法中。

 

运行程序，改变浏览器地址栏上的URL，得到各路由URL页面结果。

创建目录导航菜单

首先创建MenuController控制器。

using SportsStore.Domain.Abstract;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;

namespace SportsStore.WebUI.Controllers
{
    public class NavController : Controller
    {
        private IProductRepository repository;

        public NavController(IProductRepository productRepository)
        {
            repository = productRepository;
        }

        public PartialViewResult Menu(string category = null)
        {
            ViewBag.SelectedCategory = category;
            IEnumerable<string> categories = repository.Products.Select(x => x.Category).Distinct().OrderBy(x => x);
            return PartialView("Menu", categories);
        }
    }
}

• 这个控制器返回PartialViewResult类型对象。PartialViewResult类跟之前使用的ViewResult类型都是继承自基类ViewResultBase。
• ViewBag动态类型属性SelectedCategory设置为当前目录字符串。
• 参数category将获取路由产生的URL上的目录字符串。
• categories变量返回Product下所有目录。
• 调用方法PartialView方法，返回PartialViewResult类型对象，传入的参数是视图名称和视图模型的变量。

然后创建Menu视图。

@model IEnumerable<string>

<div>
    @Html.RouteLink("Home", new { controller = "Product", action = "List" }, new { @class =  "btn btn-block btn-default btn-lg" })
    @foreach (var link in Model)
    {
        @Html.RouteLink(link, new
        {
            controller = "Product",
            action = "List",
            category = link,
            page = 1
        }, new
        {
            @class = ("btn btn-block btn-default btn-lg") + (link == ViewBag.SelectedCategory ? " btn-primary" : "")
        })
    }
</div>

这里调用Html扩展方法RouteLink，生成链接字符串。当然，你也可以使用ActionLink方法。

• 方法的第一个参数是链接显示的文本字符串。
• 第二个参数是动态数据类型，用来指定控制器，控制器方法以及方法传入的参数。
• 第三个参数也是动态数据类型，使用@class来指定链接的样式。这里使用bootstrap的样式，这里的设置顺序是：btn指定按钮样式，btn-block指定按钮呈现的外观占整行，btn-default指定按钮的皮肤颜色等，btn-lg指定按钮的大小。
• 如果是当前页，将添加btn-primary样式，将该按钮高亮显示。

最后，修改_Layout.cshtml文件，将Menu显示在页面上。

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div class="navbar navbar-inverse" role="navigation">
        <a class="navbar-brand" href="#">SPORTS STORE</a>
    </div>
    <div class="row panel">
        <div class="col-xs-3">
            @Html.Action("Menu", "Nav")
        </div>
        <div class="col-xs-8">
            @RenderBody()
        </div>
    </div>
</body>
</html>

这里调用Html的扩展方法Action，传入控制器名字和方法名字，生成HTML字符串。它将Menu视图生成的字符串嵌入到div里面，生成导航栏。

注意这里不是调用RenderPartial方法，RenderPartial方法返回的void，它跟C#语句嵌套使用，在视图上嵌入视图。

运行程序，得到运行结果。

如果点击Soccer目录，将返回Category是Soccer的产品列表。并将Soccer这个按钮高亮显示。