1.新增導航控制元件

為了使客戶能通過產品分類對其進行導航，需要從三面著手：

1）增強Product Controller類中的List動作模型，以使它能夠過濾儲存庫中的Product物件。

2）重新檢查並增強URL方案，並且修改路由配置。

3)   建立一個產品分類列表，將其放入網站工具欄，高亮顯示當前分類，並對其他分類進行連結。

2.過濾產品列表

首先從強型別檢視模型ProductsListViewModel開始，為了渲染工具欄，需要將當前分類傳遞給檢視。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
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; }
    }
}
 

添加了一個新的屬性CurrentCategory。

更新Product控制器：

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 = 2;
        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);
        } 
    }
}
 

更新路由，使其更加強大完善。

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 {
 
[email protected]"\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}");
        }
    }
}

Mvc用Asp.net的路由系統處理來自於客戶端的輸入請求，但也用它生成輸出URL，這種輸出URL符合URL方案，並可以嵌入到Web頁面之中。通過路由系統處理輸入請求並生成輸出URL，可以確保應用程式中的所有URL是一致的。

Url.Action方法使生成輸出連結最方便的方法。

更新List.cshtml檔案：

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

在修改之前生成的URL是：http://<伺服器>：<埠號>/Page1

這樣的頁面連結，分類過濾不會起作用。

修改後：http://<伺服器>：<埠號>/Chess/Page1

當用戶點選連結時，當前分類會被傳遞給List動作方法，就可以看到頁面底部的連結會正確的包含分類資訊。

3.建立分類導航選單

Asp.net MVC框架具有一種叫做“子動作”的概念，特別適用於建立諸如可重用導航控制元件的情況。子動作依賴於叫做“Html.Action”的HTML輔助器方法，它讓你能夠在當前檢視中包含一個任意動作方法的輸出。

在Controllers資料夾下建立一個新的控制器：NavController

同時新增一個Menu動作方法。

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
    {
        private IProductsRepository repository;
        public NavController(IProductsRepository repo)
        {//新增一個構造器實現IProductsRepository介面
            repository = repo;
        }
        // GET: NavController
        public PartialViewResult Menu(string category = null)
        {//從資料庫獲取分類列表，此控制器使用的是一個分部檢視，所以在動作方法中呼叫了PartialView
            ViewBag.SelectedCategories = category;
            IEnumerable<string> categories = repository.Products.Select(x => x.Category).Distinct().OrderBy(x => x);
            return PartialView(categories);
        }

    }
}

在佈局頁渲染這個子動作，而不是在一個特定的檢視中進行渲染。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <title>@ViewBag.Title</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet"/>
    <link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
</head>
<body>
    <div class="navbar navbar-inverse" role="navigation">
        <a class="navbar-brand" href="#">Sports Store</a>
    </div>
    <div class="row panel">
        <div id="categories"class="col-xs-3">
            @Html.Action("Menu", "Nav")
        </div>
        <div class="col-xs-8">
            @RenderBody()
        </div>
    </div>
    
</body>
</html>

建立檢視，在Menu動作方法上右擊新增檢視，

model IEnumerable<string>

@Html.ActionLink("Home", "List", "Product", null, 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" : "")
})
}

添加了一個Home連結，在無分類過濾下列舉所有產品。

修改頁面的計數，目前過濾實現了，但是每類產品所包含的總數確實沒有變的，因此會有冗餘頁面。

修改ProductController檔案

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);
        } 

執行效果圖：