ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第五章：排序、分页和路由

　　本章的重点是对产品信息增加排序和分页的功能，以及使用ASP.NET Routing特性添加更加友好的URL支持。

注意：如果你想按照本章的代码编写示例，你必须完成第四章或者直接从www.apress.com下载第四章的源代码。

5.1 按照价格对产品进行排序

　　为了演示如何进行排序，我们将使用一个简单的例子让用户可以对产品按照价格进行排序。

　　首先，我们向Controllers\ProductsController.cs文件中的Index方法添加一个switch语句，以便可以按照价格对产品信息进行排序，修改之处如下列高亮显示的代码：

 public ActionResult Index(string category, string search, string sortBy)

 {

     // instantiate a new view model

     ProductIndexViewModel viewModel = new ProductIndexViewModel();

     // select the products

     var products = db.Products.Include(p => p.Category);

     // perform the search and save the search string to the vieModel

     if (!string.IsNullOrEmpty(search))

     {

         products = products.Where(p => p.Name.Contains(search) || p.Description.Contains(search) || p.Category.Name.Contains(search));

         viewModel.Search = search;

     }

     // group search results into categories and count how many item in each category

     viewModel.CatsWithCount = from matchinngProducts in products

                               where matchinngProducts.CategoryID != null

                               group matchinngProducts by matchinngProducts.Category.Name into catGroup

                               select new CategoryWithCount()

                               {

                                   CategoryName = catGroup.Key,

                                   ProductCount = catGroup.Count()

                               };

     if (!string.IsNullOrEmpty(category))

     {

         products = products.Where(p => p.Category.Name == category);

     }

     // sort the results

     switch (sortBy)

     {

         case "price_lowest":

             products = products.OrderBy(p => p.Price);

             break;

         case "price_highest":

             products = products.OrderByDescending(p => p.Price);

             break;

         default:

             break;

     }



     viewModel.Products = products;

     return View(viewModel);

 }

　　这段代码分别使用Entity Framework的OrderBy和OrderByDescending方法，按照价格对产品信息进行升序或降序操作。不调试启动应用程序，然后手动修改URL以测试排序是否按照预期正确工作，URL的格式分别为Products?sortBy=price_lowest和Products?sortBy=price_highest。产品信息应该分别显示为最低价格显示在列表的头部和最高价格显示在列表的头部。图5-1显示的是按照最高价格来显示产品信息。

图5-1：按照最高价格优先排序的产品列表

5.1.1 向产品的索引（Index）视图添加排序

　　我们需要向站点中添加一些用户接口控件以允许用户可以按照他们的意图来进行排序。为了演示这个功能，我们需要添加一个下拉列表以及一个填充该下拉列表值和文本的字典。

　　首先，向\ViewModels\ProductIndexViewModel.cs文件中的ProductIndexViewModel类添加SortBy和Sorts属性，具体代码如下列高亮显示的代码：

 using System.Collections.Generic;

 using System.Linq;

 using System.Web.Mvc;

 using BabyStore.Models;

 namespace BabyStore.ViewModels

 {

     public class CategoryWithCount

     {

         public int ProductCount { get; set; }

         public string CategoryName { get; set; }

         public string CatNameWithCount

         {

             get

             {

                 return CategoryName + " (" + ProductCount.ToString() + ")";

             }

         }

     }

     public class ProductIndexViewModel

     {

         public IQueryable<Product> Products { get; set; }

         public string Search { get; set; }

         public IEnumerable<CategoryWithCount> CatsWithCount { get; set; }

         public string Category { get; set; }

         public string SortBy { get; set; }

         public Dictionary<string, string> Sorts { get; set; }



         public IEnumerable<SelectListItem> CatFilterItems

         {

             get

             {

                 var allCats = CatsWithCount.Select(cc => new SelectListItem

                 {

                     Value = cc.CategoryName,

                     Text = cc.CatNameWithCount

                 });

                 return allCats;

             }

         }

     }

 }

　　SortBy属性用于保存在视图中的Select元素的名称，Sorts属性用于保存显示在Select元素中的数据。

　　现在，我们需要在ProductController类中为Sorts属性赋值。修改\Controllers\ProductsController.cs文件，在Index方法的最后，返回视图的代码之前添加下列高亮显示的代码：

 // GET: Products

 public ActionResult Index(string category, string search, string sortBy)

 {

     // instantiate a new view model

     ProductIndexViewModel viewModel = new ProductIndexViewModel();

     // select the products

     var products = db.Products.Include(p => p.Category);

     // perform the search and save the search string to the vieModel

     if (!string.IsNullOrEmpty(search))

     {

         products = products.Where(p => p.Name.Contains(search) || p.Description.Contains(search) || p.Category.Name.Contains(search));

         viewModel.Search = search;

     }

     // group search results into categories and count how many item in each category

     viewModel.CatsWithCount = from matchinngProducts in products

                               where matchinngProducts.CategoryID != null

                               group matchinngProducts by matchinngProducts.Category.Name into catGroup

                               select new CategoryWithCount()

                               {

                                   CategoryName = catGroup.Key,

                                   ProductCount = catGroup.Count()

                               };

     if (!string.IsNullOrEmpty(category))

     {

         products = products.Where(p => p.Category.Name == category);

     }

     // sort the results

     switch (sortBy)

     {

         case "price_lowest":

             products = products.OrderBy(p => p.Price);

             break;

         case "price_highest":

             products = products.OrderByDescending(p => p.Price);

             break;

         default:

             break;

     }

     viewModel.Products = products;

     viewModel.Sorts = new Dictionary<string, string>

     {

         { "Price low to high", "price_lowest" },

         { "Price low to low", "price_highest" }

     };



     return View(viewModel);

 }

　　最后，我们需要向视图添加一个控件，以便用户可以进行选择。为了完成这个功能，我们在Views\Products\Index.cshtml文件的按照分类来过滤产品信息的代码后面，添加下列高亮显示的代码：

 @model BabyStore.ViewModels.ProductIndexViewModel

 @{

     ViewBag.Title = "Index";

 }

 <h2>Index</h2>

 <p>

     @Html.ActionLink("Create New", "Create")

     @using(Html.BeginForm("Index", "Products", FormMethod.Get))

     {

         <label>Filter by category:</label>@Html.DropDownListFor(vm => vm.Category, Model.CatFilterItems, "All");

         <label>Sort by:</label>@Html.DropDownListFor(vm => vm.SortBy, new SelectList(Model.Sorts, "Value", "Key"), "Default")

         <input type="submit" value="Filter"/>

         <input type="hidden" name="Search" id="Search" value="@Model.Search"/>

     }

 </p>

 <table class="table">

     <tr>

         <th>

             @Html.DisplayNameFor(model => model.Category)

         </th>

         <th>

             @Html.DisplayNameFor(model => model.Products.First().Name)

         </th>

         <th>

             @Html.DisplayNameFor(model => model.Products.First().Description)

         </th>

         <th>

             @Html.DisplayNameFor(model => model.Products.First().Price)

         </th>

         <th></th>

     </tr>

 @foreach (var item in Model.Products) {

     <tr>

         <td>

             @Html.DisplayFor(modelItem => item.Category.Name)

         </td>

         <td>

             @Html.DisplayFor(modelItem => item.Name)

         </td>

         <td>

             @Html.DisplayFor(modelItem => item.Description)

         </td>

         <td>

             @Html.DisplayFor(modelItem => item.Price)

         </td>

         <td>

             @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |

             @Html.ActionLink("Details", "Details", new { id=item.ID }) |

             @Html.ActionLink("Delete", "Delete", new { id=item.ID })

         </td>

     </tr>

 }

 </table>

　　新的Select控件使用视图模型的SortBy属性作为它的名字。使用视图模型的Sorts属性来生成现在在Select控件中的数据，其中Select控件的显示文本使用Sorts属性的Value值来指定，Select控件中数据的值使用Sorts属性的Key值来指定，如图5-2所示。

图5-2：在产品索引（Index）页面上的排序下拉列表

　　不调试启动应用程序，然后点击产品链接，在分类过滤下列列表后面，我们会看到一个用于按照价格排序的下列列表，如图5-2所示。我们可以使用这个新控件按照价格对产品信息进行排序。

5.2 添加分页

　　在这一小节，我们将学习一种添加分页的方法，以允许用户可以对产品搜索的结果进行分页，而不是将整个结果显示一个一个比较大的列表中。我们将使用流行的PagedList.Mvc包来实现该功能，该包由Troy Goode编写和维护。我们之所以选择它来进行分页功能的实现，是因为该包比较容易设置和使用。在本书的后边章节，我们将学习如何编写我们自己的异步分页代码，并使用一个HTML辅助器来显示分页控件。

5.2.1 安装PagedList.Mvc

　　首先，我们需要安装包，点击【项目】-【管理NuGet程序包】，打开NuGet包管理器窗体，在该窗体中，选择浏览标签，然后搜索pagedlist，如图5-3所示。点击安装按钮安装PagedList.Mvc的最新版本（目前最新版本为4.5.0）。当安装PagedList.Mvc后，PagedList包也被安装上了。

图5-3：NuGet包管理器中显示的PagedList.Mvc

5.2.2 为实现分页更新视图模型和控制器

　　一旦安装完PagedList.Mvc，第一件事就是要修改ProductIndexViewModel，以便将Products属性的类型修改为IPagedList。修改ViewModels\ProductIndexViewModel.cs文件中的代码如下列所示的高亮代码：

 using System.Collections.Generic;

 using System.Linq;

 using System.Web.Mvc;

 using BabyStore.Models;

 using PagedList;



 namespace BabyStore.ViewModels

 {

     ... ...

     public class ProductIndexViewModel

     {

         public IPagedList<Product> Products { get; set; }

         public string Search { get; set; }

         public IEnumerable<CategoryWithCount> CatsWithCount { get; set; }

         public string Category { get; set; }

         public string SortBy { get; set; }

         public Dictionary<string, string> Sorts { get; set; }

         ... ...

     }

 }

　　我们现在需要修改ProductsController类的Index方法，以便Products作为PagedList返回（使用ToPagedList()方法完成）。为了使用PagedLIst，我们还需要设置默认排序。为了使用PagedList包，我们首先需要在该文件的顶部添加using PagedList;代码，然后修改Controllers\ProductsController.cs文件为下列高亮显示的代码。

 public ActionResult Index(string category, string search, string sortBy, int? page)

 {

     // instantiate a new view model

     ProductIndexViewModel viewModel = new ProductIndexViewModel();

     // select the products

     var products = db.Products.Include(p => p.Category);

     // perform the search and save the search string to the vieModel

     if (!string.IsNullOrEmpty(search))

     {

         products = products.Where(p => p.Name.Contains(search) || p.Description.Contains(search) || p.Category.Name.Contains(search));

         viewModel.Search = search;

     }

     // group search results into categories and count how many item in each category

     viewModel.CatsWithCount = from matchinngProducts in products

                               where matchinngProducts.CategoryID != null

                               group matchinngProducts by matchinngProducts.Category.Name into catGroup

                               select new CategoryWithCount()

                               {

                                   CategoryName = catGroup.Key,

                                   ProductCount = catGroup.Count()

                               };

     if (!string.IsNullOrEmpty(category))

     {

         products = products.Where(p => p.Category.Name == category);

         viewModel.Category = category;

     }

     // sort the results

     switch (sortBy)

     {

         case "price_lowest":

             products = products.OrderBy(p => p.Price);

             break;

         case "price_highest":

             products = products.OrderByDescending(p => p.Price);

             break;

         default:

             products = products.OrderBy(p => p.Name);

             break;

     }

     const int pageItems = ;

     int currentPage = (page ?? );

     viewModel.Products = products.ToPagedList(currentPage, pageItems);

     viewModel.SortBy = sortBy;



     viewModel.Sorts = new Dictionary<string, string>

     {

         { "Price low to high", "price_lowest" },

         { "Price low to low", "price_highest" }

     };

     return View(viewModel);

 }

　　第一处改动是添加了一个int? page参数，它是一个可空整型，表示用户在视图中选择的当前页码。当第一次加载产品的索引（Index）页面时，用户还没有选择任何页码，因此，这个参数可以为null。

　　我们必须确保当前的分类也要保存在视图模型中，因此，我们添加了viewModel.Category = category;这行代码。

　　代码products = products.OrderBy(p => p.Name);用于对产品列表进行默认排序，这是因为PagedList要求列表必须是一个有序列表。

　　接着，我们使用代码const int pageItems = 3;来指定每页显示的条目数。然后，我们声明了一个整型变量int currentPage = (page ?? 1);来保存当前页码，该变量的值是page参数的值，或者是1（当page变量为null时）。

　　我们使用代码viewModel.Products = products.ToPagedList(currentPage, PageItems);，对产品信息调用了ToPagedList方法，并将当前页和每页显示的条目数传递给了ToPagedList方法，然后将该方法的返回值赋值给了视图模型的Products属性。

　　我们使用代码viewModel.SortBy = sortBy;将sortBy参数的值保存到视图模型的SortBy属性中，以便我们从一页移动到另一页时，产品的排序保持不变。

5.2.3 为实现分页更新产品的索引（Index）视图

　　在视图模型和控制器中完成了实现分页的代码之后，现在，我们需要更新\Views\Products\Index.cshtml文件来显示一个分页控件，以便用户可以在各页之间移动。我们同时也添加了有多少条目被发现的指示信息。为了完成这些功能，我们在该文件中添加了一个using语句，一个产品总数的指示信息以及在该页底部显示一个页面之间的链接，具体代码如下面的高亮显示的代码：

 @model BabyStore.ViewModels.ProductIndexViewModel

 @using PagedList.Mvc



 @{

     ViewBag.Title = "Index";

 }

 <h2>Index</h2>

 <p>

     @(string.IsNullOrWhiteSpace(Model.Search)?"Showing all":"You search for " + Model.Search + " found") @Model.Products.TotalItemCount products

 </p>

 <p>

     @Html.ActionLink("Create New", "Create")

     @using(Html.BeginForm("Index", "Products", FormMethod.Get))

     {

         <label>Filter by category:</label>@Html.DropDownListFor(vm => vm.Category, Model.CatFilterItems, "All");

         <label>Sort by:</label>@Html.DropDownListFor(vm => vm.SortBy, new SelectList(Model.Sorts, "Value", "Key"), "Default")

         <input type="submit" value="Filter"/>

         <input type="hidden" name="Search" id="Search" value="@Model.Search"/>

     }

 </p>

 <table class="table">

     <tr>

         <th>

             @Html.DisplayNameFor(model => model.Category)

         </th>

         <th>

             @Html.DisplayNameFor(model => model.Products.First().Name)

         </th>

         <th>

             @Html.DisplayNameFor(model => model.Products.First().Description)

         </th>

         <th>

             @Html.DisplayNameFor(model => model.Products.First().Price)

         </th>

         <th></th>

     </tr>

 @foreach (var item in Model.Products) {

     <tr>

         <td>

             @Html.DisplayFor(modelItem => item.Category.Name)

         </td>

         <td>

             @Html.DisplayFor(modelItem => item.Name)

         </td>

         <td>

             @Html.DisplayFor(modelItem => item.Description)

         </td>

         <td>

             @Html.DisplayFor(modelItem => item.Price)

         </td>

         <td>

             @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |

             @Html.ActionLink("Details", "Details", new { id=item.ID }) |

             @Html.ActionLink("Delete", "Delete", new { id=item.ID })

         </td>

     </tr>

 }

 </table>

 <div>

     Page @(Model.Products.PageCount < Model.Products.PageNumber ? 0 : Model.Products.PageNumber) of @Model.Products.PageCount

     @Html.PagedListPager(Model.Products, page => Url.Action("Index", new { category = Model.Category, search = Model.Search, sortBy = Model.SortBy, page}))

 </div>

　　指示有多少产品被发现的代码如下所示：

 <p>

     @(string.IsNullOrWhiteSpace(Model.Search)?"Showing all":"You search for " + Model.Search + " found") @Model.Products.TotalItemCount products

 </p>

　　这段代码使用?:（也称之为三元）操作符检查搜索条件是否为null或空，如果结果为true，代码的输出结果为“Showing all xx products”，否则，如果用户输入了一个搜索条件，结果显示为“Your search for search term found xx products”。实际上，这个操作符是if语句的快捷方式，关于?:操作符的更多信息可以在https://msdn.microsoft.com/en-gb/library/ty67wk28.aspx找到。

　　最后，分页链接使用下列代码生成：

 <div>

     Page @(Model.Products.PageCount < Model.Products.PageNumber ? 0 : Model.Products.PageNumber) of @Model.Products.PageCount

     @Html.PagedListPager(Model.Products, page => Url.Action("Index", new { category = Model.Category, search = Model.Search, sortBy = Model.SortBy, page}))

 </div>

　　为了便于显示，这段代码包裹在div标签内。使用?:操作符的第一行代码决定是否有任何页码显示，它显示“Page 0 of 0”或者“Page x of y”，x表示当前页码，y表示总页数。

　　下一行代码使用来自于PagedList.Mvc命名空间的PagedListPager辅助器。该辅助器接收一个产品列表参数，并为每个页面生成一个超链接。Url.Action用于生成一个含有当前页参数超链接目标。我们将一个匿名类型（含有当前分类、搜索条件、排序信息和分页）传递给该辅助器方法，以便每个页面的链接中都包含一个查询字符串，这个查询字符串包含有当前分类、搜索条件、排序信息和分页信息。这意味着，当从一个页面移动到另一个页面时，搜索条件、选择的分类和排序规则都被保存下来。如果没有这样做，产品列表将会被重置为显示所有产品信息。

　　图5-4显示了使用上述代码后，我们执行了一个对sleeping的搜索，然后对其结果按照sleeping分类进行过滤，并按照价格从高到低进行排序，并且移动到第2页的效果。

图5-4：伴有搜索条件、排序和按分类过滤的分页效果

5.3 路由

　　到目前为止，我们一直使用作为URL一部分的查询字符串中的参数，将分类和分页信息由视图传递给ProductController类的Index动作方法。这些URL的格式基本上为/Products?category=Sleeping&page=2，使用ASP.NET路由特性可以改进这些URL，以便让这些URL对于用户和搜索引擎更加友好和有意义。ASP.NET路由不仅能够用于MVC，也可以用于Web Forms和Web API。但是在应用到Web Forms时，使用方法稍有不同。

　　为了让事情更加可控，我们打算只为分类和分页生成路由。不为搜索或排序生成路由的原因是：路由系统需要为每一种情况都制定唯一的一种模式，该模式可以用来唯一标识它们自己。例如，我们可以使用page前缀加数字的形式来生成一个路由。如果为每种情况都添加一个路由，会使路由系统过度复杂，难以维护。

　　关于路由的最重要的一个事情是：最具体的路由要添加在路由列表的前面，更加通用的路由要添加在路由列表的后面。路由系统根据最先被定义的路由模式来匹配一个URL，并且只有在不匹配时，才会对下一条路由进行处理，当匹配时，就停止搜索。如果存在一个一般路由和一个更加具体的路由都匹配一个URL，但是更加具体的路由在一般路由的后面定义，那么更加具体的路由永远都不会被使用。

5.3.1 添加路由

　　我们将会采取和创建项目时，基架为我们在\App_Start\RouteConfig.cs文件中添加路由的方法一样，来添加新的路由。基架为我们添加的路由格式为：

 routes.MapRoute(

     name: "Name",

     url: "Rule",

     defaults: DefaultValues

 );

　　name参数表示路由的名字，它可以为空，但是，在本书中我们都会使用该参数以区分不同的路由。

　　url参数包含与URL格式相匹配的某个路由的一条规则，它可以包含多个格式和参数，如下所示：

url参数被分为多个片段，每个片段匹配URL的某个部分。
URL必须与片段具有相同数量的参数，以匹配每一个片段，除非使用了默认值或通配符（参见下面列表中的每一个解释）。
每个片段可以是：
- 静态URL片段：例如，“Products”，这将会匹配/Products形式的URL，并且调用与之有关的控制器和动作方法。
- 片段变量：用于匹配任何事物。例如，“Products/{category}”将会匹配URL中跟在Products/后面的任何事物，并将其赋值给变量category，然后变量category会被传递给该路由的目标动作方法的参数（该参数的名称必须为category）。
- 静态片段和片段变量的组合：将会匹配与任何指定格式相匹配的URL。例如，“Products/Page{page}”将会匹配诸如Products/Page2或Products/Page99形式的URL，并且会将2或99赋值给变量page。
- 全匹配的片段变量：例如，“Products/{*everything}”将会匹配URL中Products/后面的部分，而不管URL包含多少片段数，也不管这些片段数的值是什么，它们都会赋给everything变量。在这个项目中，我们没有使用全匹配的片段变量。
每一个片段也可以指定为可选的，或者具有一个默认值（如果与之对应的URL部分为空）。一个比较好的使用默认值的例子是项目创建时，基架为我们创建的默认路由。这个路由使用下面的代码指定控制器和动作方法的默认值，并且定义了一个可选的id变量。

 routes.MapRoute(

     name: "Default",

     url: "{controller}/{action}/{id}",

     defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }

 );

　　我们添加一个与URL的格式/Products/Category（比如Products/Sleeping只显示分类为Sleeping的产品信息）相匹配的路由，来开始我们的路由学习。在\App_Start\RouteConfig.cs文件的RegisterRoutes方法的默认路由上面，添加下列高亮显示的代码：

 using System;

 using System.Collections.Generic;

 using System.Linq;

 using System.Web;

 using System.Web.Mvc;

 using System.Web.Routing;

 namespace BabyStore

 {

     public class RouteConfig

     {

         public static void RegisterRoutes(RouteCollection routes)

         {

             routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

             routes.MapRoute(

                 name: "ProductsbyCategory",

                 url: "Products/{category}",

                 defaults: new { controller = "Products", action = "Index" }

             );



             routes.MapRoute(

                 name: "Default",

                 url: "{controller}/{action}/{id}",

                 defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }

             );

         }

     }

 }

　　不调试启动应用程序，然后点击分类链接，在分类索引页面点击Sleeping链接，这个链接打开的URL为/Product/Sleeping，如图5-5所示，这归功于我们刚刚添加的新路由ProductsbyCategory。

图5-5：格式为Products/Category的URL

　　到目前为止，一切看起来还不错，我们现在可以使用Products/Category格式的ULR了。但是，这里有一个问题。尝试着点击Create New链接，产品创建页面没有显示，取而代之的是一个显示了空的产品列表的页面。之所以出现这个问题，是因为新路由对出现在Products后面的任何事物看作是一个分类，而我们没有一个叫做Create的分类，因此，没有产品信息返回，如图5-6所示。

图5-6：出了问题的Create New链接

　　现在点击回退按钮返回到产品的索引（Index）页面，试着点击Edit、Details和Delete链接，它们依然正常工作！我们可能想知道为什么会这样，答案是这些链接都包含有一个ID参数，例如，编辑链接的格式为/Products/Edit/6，这个格式匹配原来的默认路由("{controller}/{action}/{id})而不是我们刚刚创建的ProductsbyCategory路由("Products/{category})。

　　为了解决这个问题，我们需要为格式为Products/Create的URL添加一个更加具体的路由。在App_Start\RouteConfig.cs文件中的RegisterRoutes方法的ProductsbyCategory路由上面添加下面高亮显示的新路由代码：

 public static void RegisterRoutes(RouteCollection routes)

 {

     routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

     routes.MapRoute(

         name: "ProductsCreate",

         url: "Products/Create",

         defaults: new { controller = "Products", action = "Create" }

     );



     routes.MapRoute(

         name: "ProductsbyCategory",

         url: "Products/{category}",

         defaults: new { controller = "Products", action = "Index" }

     );

     routes.MapRoute(

         name: "Default",

         url: "{controller}/{action}/{id}",

         defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }

     );

 }

　　不调试启动应用程序，然后点击Create New链接，因为ProductsCreate路由，现在创建新产品的功能又能正常实现了。非常重要的一点是要把ProductsCreate路由放在ProductsByCategory路由上面，否则，它永远不会被使用。如果把它放在ProductsByCategory路由的下面，路由系统将会首先匹配“Products/{category}”，并将停止继续匹配路由。

　　下一步，我们将会为分页添加一个路由，以便应用程序可以使用格式为/Products/Page2的URL。更新App_Start\RouteConfig.cs文件的RegisterRoutes方法，在该方法的ProductbyCategory路由上面添加一个新的路由，其代码如下所示：

　　新的ProductsByPage路由将会匹配任何形如Products/PageX的URL，在这儿X表示页码。再一次申明，这个路由要放在ProductsbyCategory的前面，否则，它将永远不会被使用。然后，点击页面下方的分页控件中的页码，现在形如Products/PageX格式的URL将会出现在地址栏中。比如，5-7显示的是点击分页控件中的数字4时，所生成的URL为Products/Page4的结果。

图5-7：格式为Products/PageX的路由

　　到目前为止，我们已经为Products/Category和Product/PageX添加了路由，但是，我们还没有为Product/Category/PageX添加路由，为了添加一条允许这种格式的新路由，我们在App_Start\RouteConfig.cs文件中的RegisterRoutes方法的ProductsByPage路由上面，添加下列代码：

 public static void RegisterRoutes(RouteCollection routes)

 {

     routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

     routes.MapRoute(

         name: "ProductsCreate",

         url: "Products/Create",

         defaults: new { controller = "Products", action = "Create" }

     );

     routes.MapRoute(

         name: "ProductsbyCategorybyPage",

         url: "Products/{category}/Page{page}",

         defaults: new { controller = "Products", action = "Index" }

     );



     routes.MapRoute(

         name: "ProductsbyPage",

         url: "Products/Page{page}",

         defaults: new { controller = "Products", action = "Index" }

     );

     routes.MapRoute(

         name: "ProductsbyCategory",

         url: "Products/{category}",

         defaults: new { controller = "Products", action = "Index" }

     );

     routes.MapRoute(

         name: "Default",

         url: "{controller}/{action}/{id}",

         defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }

     );

 }

　　不调试启动应用程序，点击分类链接，然后点击Sleeping链接，紧接着再点击分页控件中的页码2，现在生成的URL的格式应该为Products/Sleeping/Page2，因为它匹配新的路由ProductsbyCategorybyPage。如图5-8所示。

图5-8：ProductsbyCategorybyPage路由的格式

　　我们现在似乎添加完了所有的路由，但是，由于新添加路由的影响，现在应用程序存在一些小问题。先看第一个遗留问题，启动应用程序，导航到图5-8所示的页面。然后，在分类下拉列表中选择另一个分类，然后点击Filter按钮，我们将会看到结果没有变化，依然是遗留的Sleeping分类的产品信息。这是因为HTML表单的目标现在不再是正确的ProductsController控制器的Index动作方法了。为了解决这个问题，我们向/App_Start/RouteConfig.cs文件添加最后一个路由，然后配置HTML表单来使用它。

　　首先，在App_Start\RoutesConfig.cs文件中的RegisterRoutes方法的默认路由的上面添加一个新路由，代码如下：

 public static void RegisterRoutes(RouteCollection routes)

 {

     routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

     routes.MapRoute(

         name: "ProductsCreate",

         url: "Products/Create",

         defaults: new { controller = "Products", action = "Create" }

     );

     routes.MapRoute(

         name: "ProductsbyCategorybyPage",

         url: "Products/{category}/Page{page}",

         defaults: new { controller = "Products", action = "Index" }

     );

     routes.MapRoute(

         name: "ProductsbyPage",

         url: "Products/Page{page}",

         defaults: new { controller = "Products", action = "Index" }

     );

     routes.MapRoute(

         name: "ProductsbyCategory",

         url: "Products/{category}",

         defaults: new { controller = "Products", action = "Index" }

     );

     routes.MapRoute(

         name: "ProductsIndex",

         url: "Products",

         defaults: new { controller = "Products", action = "Index" }  

     );



     routes.MapRoute(

         name: "Default",

         url: "{controller}/{action}/{id}",

         defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }

     );

 }

　　这条新的路由命名为ProductsIndex，它的目标是ProductsController控制器的Index动作方法。当使用URL链接和表单时，我们创建的这条路由会让应用程序调用ProductsController控制器的Index动作方法。

5.3.2 在窗体中使用路由

　　当前，在产品索引（Index）页面中的，按分类过滤产品信息的表单，其工作是不正确的，因为它依然被配置为调用ProductsController控制器类的Index方法。（译者注：其实，之所以工作不正确，是因为该表单的目标URL被ProductsbyCategory路由所匹配，因此，当形如http://localhost:58735/Products/Sleeping?Category=Feeding&SortBy=&Search=的URL向服务器发送请求时，会匹配ProductsbyCategory路由，该路由会将Sleeping赋值给category变量，该变量会传递给Index动作方法的category参数，因此，会导致依然是查询的Sleeping分类的产品，而不是Feeding分类的产品）。例如，当点击分类链接，然后再点击Sleeping链接，之后再在分类下拉列表中选择Feeding，最后点击Filter按钮提交表单，这时的URL格式为：

http://localhost:5073/Products/Sleeping?Category=Feeding&SortBy=&Search=

　　这个URL包含两个category参数：Sleeping和Feeding，因为应用程序只是简单地按照第一个匹配的参数进行过滤，因此，依然按照Sleeping分类进行产品信息的过滤。为了解决这个问题，包含按照分类过滤产品的表单应该使用ProductsIndex路由，该路由会将/Sleeping?Category=Feeding&SortBy=&Search=中的/Sleeping前缀移除，并将?Category=Feeding&SortBy=&Search=作为查询字符串的参数提交给Index动作方法，这个时候只有Category=Feeding才作为category参数传递给Index动作方法的category参数。

　　为了让表单使用ProductsIndex路由，修改Views\Products\Index.cshtml文件，将其中的

 @using (Html.BeginForm("Index", "Products", FormMethod.Get))

修改为

 @using (Html.BeginRouteForm("ProductsIndex", FormMethod.Get))

　　不调试启动应用程序，然后点击分类链接，然后再点击分类索引页中的Sleeping链接，然后再点击分页控件中的页码2，这时应该如5-8所示。然后再分类下拉列表中选择Feeding，然后点击Filter按钮，这个时候的结果应该就是按照Feeding分类过滤的产品信息。

　　提示：HTML表单只能被配置为提交给路由，它们不会按路由格式提交值，比如，过滤表单提交的URL依然是Products?Category=Feeding&SortBy=&Search=格式，而不是Products/Feeding。这是因为HTML表单的默认行为就是按这种格式提交URL，输入元素被追加到URL的查询字符串中。

　　和过滤表单一样，搜索表单也存在这样的问题，因此，按下列代码更新/Views/Shared/_Layout.cshtml文件，将

 @using (Html.BeginForm("Index", "Products", FormMethod.Get, new { @class = "navbar-form navbar-left" }))

更改为

 @using (Html.BeginRouteForm("ProductsIndex", FormMethod.Get, new { @class = "navbar-form navbar-left" }))

5.3.3 在超链接中使用路由

　　需要解决的最后一个问题是当用户在分类索引（Index）页面中点击某个分类的链接之后，这会导航到产品索引（Index）页面，在这个时候再点击导航栏中的产品链接，不会显示全部产品信息。这个问题和我们上面解决的问题类似，为了解决这个问题，我们需要将输出URL链接更新为路由，而不是动作方法。修改\Views\Shared\_Layout.cshtml中的代码由

 <li>@Html.ActionLink("产品", "Index", "Products")</li>

修改为

 <li>@Html.RouteLink("产品", "ProductsIndex")</li>

　　为了将额外的参数由URL传递给目标路由，我们可以给它们传递一个匿名对象。例如，使一个链接的目标仅仅是Clothes分类，我们可以使用下列代码：

 <li>@Html.RouteLink("View all Clothes", "ProductsbyCategory", new { category = "Clothes" })</li>

5.4 设置项目的起始URL

　　我们已经添加了一些路由，现在，我们有必要停止Visual Studio自动加载我们当前正在编辑的视图作为项目的启动视图。在Visual Studio中，点击【项目】->【BabyStore属性】打开项目属性窗体（或者右键点击解决方案资源管理器中的项目，然后选择属性）。然后选择Web标签，设置启动操作为特定页，如图5-9所示。不需要输入值，仅仅设置这个选择即可以使得项目加载Home页（主页）。

图5-9：设置项目的启动URL为特定页

5.5 小节

　　在这一章中，我们首先使用Entity Framework添加了对搜索结果的排序功能，然后又在视图中添加了一个下列列表，以便用户使用它来对产品信息按照价格进行排序。其次，我们使用PagedList.Mvc包向产品的索引（Index）页面添加了分页功能。最后，我们使用了ASP.NET的路由特性以使我们的站点对于分类和分页信息显示更加友好的URL。

巴特西

ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第五章：排序、分页和路由

最新文章

热门文章