Asp.net MVC 3实例学习之ExtShop（四）——完成产品列表页
在完成产品列表页前要做一些准备功夫。首先是去下载MvcPager用了为产品列表分页。下载的可能是基于MVC 2的，没关系，可以用在MVC 3上。如果有担心，下载源代码重新编译一次好了。下载后将DLL添加到引用里。
接着是要修改一下路由以实现“Catalog/List/[id]/[page]”的访问。打开“Global.asax.cs”文件，然后在默认路由之前添加以下代码：
| 1 | routes . MapRoute ( |
| 2 | " Catalog " , // Route name |
| 3 | " Catalog/List/{id}/{page} " , // URL with parameters |
| 4 | new { controller = " Catalog " , action = " List " , page = 1 } // Parameter defaults |
| 5 | ) ; |
| 6 |
现在打开CatalogController.cs文件，在文件头添加对MvcPager的引用，代码如下：
| 1 | using Webdiyer . WebControls . Mvc; |
然后修改Index操作的代码如下：
| 1 | public ActionResult Index ( int? id ) |
| 2 | { |
| 3 | PagedList < T_Products > q = dc . T_Products . OrderByDescending ( m = > m . CreateTime ) . ToPagedList ( id ?? 1 , 8 ) ; |
| 4 | return View ( q ) ; |
| 5 | } |
| 6 |
代码传入的id是页码而不是产品分类编码，这个要注意。因为要使用分页，所以传递给视图的是PagedList对象，而不是Queryable，这也是要注意的地方。因而，查询结果需要通过toPagedList方法将Queryable对象转换为PagedList对象。第1个参数是当前页面，如果id为空，则默认为第1页。第2个参数是每页显示的产品数量，在这里是8个。
在“Index”上单击鼠标右键，选择“添加视图”（
，今天换了中文版，菜单也变了）。在视图中添加以下代码：
| 1 | @ using Webdiyer . WebControls . Mvc ; |
| 2 | @ model PagedList < Extshop . Models . T_Products > |
| 3 | |
| 4 | @ { |
| 5 | ViewBag . Title = " 产品列表 " ; |
| 6 | PageData [ " id " ] = " " ; |
| 7 | } |
| 8 | < div class = " nav " > |
| 9 | < a href = " @Url.Action( " " , " Catalog " ) " > 产品 < / a > |
| 10 | < / div > < br / > |
| 11 | < div id = " contentMain " style = " width:760px; " > |
| 12 | < span class = " header " style = " width:750px; " > 产品列表 < / span > |
| 13 | @ { |
| 14 | foreach ( var c in Model ) |
| 15 | { |
| 16 | < ul > |
| 17 | < li > < a href = ' @ Url . Action ( " Details " , " Product " , new { id = c . ProductID } ) ' > < img src = ' / Images / products/ @ c . SamllImageUrl ' alt = " @c.Title " / > < / a > < / li > |
| 18 | < li class = ' title ' > < a href = ' @ Url .Action ( " Details " , " Product " , new { id = c . ProductID } ) ' > @ c . Title< / a > < / li > |
| 19 | < li > 市场价： < del > @ c . MarketPrice . ToString ( "C " ) < / del > < / li > |
| 20 | < li > 当前价： @ c . UnitPrice . ToString ( " C " ) < /li > |
| 21 | < li > < span class = " rating-title " > 评 价： < /span > |
| 22 | < div class = ' rating ' id = "@c.ProductID.ToString( " rat - 0 " ) " > |
| 23 | < input name = "@c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = "disabled " value = " 1 " @ ( c . TotalRating = = 1 ? " checked='checked' " : "" ) / > |
| 24 | < input name = "@c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = "disabled " value = " 2 " @ ( c . TotalRating = = 2 ? " checked='checked' " : "" ) / > |
| 25 | < input name = "@c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = "disabled " value = " 3 " @ ( c . TotalRating = = 3 ? " checked='checked' " : "" ) / > |
| 26 | < input name = "@c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = "disabled " value = " 4 " @ ( c . TotalRating = = 4 ? " checked='checked' " : "" ) / > |
| 27 | < input name = "@c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = "disabled " value = " 5 " @ ( c . TotalRating = = 5 ? " checked='checked' " : "" ) / > |
| 28 | < / div > |
| 29 | < / li > |
| 30 | < / ul > |
| 31 | } |
| 32 | } |
| 33 | < div class = " clear " > < / div > |
| 34 | < div class = ' pagenav ' > @ Html . Pager ( Model , new PagerOptions { PageIndexParameterName = " id " } ) < / div > |
| 35 | < / div > |
| 36 | |
| 37 | < script type = " text/javascript " > |
| 38 | jQuery ( function ( ) { |
| 39 | $ ( " div .rating " ) . stars ( ) ; |
| 40 | } ) ; |
| 41 | < / script > |
| 42 |
代码第一句引用MvcPager，第二句定义接收的数据模型类型。因为是所以产品列表，所以PageData["id"]设置为空字符串。其余代码和首页的差不多。第34句使用HTML方式显示分页代码。这里要注意的是PagerOptions选项中的PageIndexParameterName要设置为id，因为操作中接收的当前页参数是以id定义的。
页面需要正常显示，还需要在Site.css中添加以下代码：
| 1 | #contentMain .clear { clear : both ; } |
| 2 | #contentMain .pagenav { width : 760px ; text-align : center ; margin-bottom : 10px ; } |
切换回CatalogController.cs文件，在Index操作下添加一个List操作，其代码如下：
| 1 | public ActionResult List(string id, int? page) |
| 2 | { |
| 3 | ViewData["id"] = id; |
| 4 | PagedList q = dc.T_Products |
| 5 | .Where(m => dc.T_Categories.Where(n => n.CategoryID.Substring(0, id.Length) == id).Select(n => n.CategoryID ).Contains(m.CategoryID)) |
| 6 | .OrderByDescending(m => m.CreateTime).ToPagedList(page ?? 1, 4); |
| 7 | return View(q); |
| 8 | } |
| 9 |
从代码可以看到，List操作有两个参数，第1个是分类id，第2个是当前页号。第3行通过ViewData["id"]向视图传递当前的分类id，以更新左边分类列表以及显示导航条。其余的和Index操作差不多。现在为List操作创建一个视图，视图内代码如下：
| 1 | @ using Webdiyer . WebControls . Mvc ; |
| 2 | @ model PagedList < Extshop . Models . T_Products > |
| 3 | @ { |
| 4 | ViewBag . Title = " 产品列表 " ; |
| 5 | PageData [ " id " ] = ViewData [ " id " ] ; |
| 6 | } |
| 7 | |
| 8 | < div class = " nav " > |
| 9 | < a href = " @Url.Action( " " , " Catalog " ) " > 产品 < / a > |
| 10 | @ { Html . RenderAction ( " Navbar " , " Catalog " , new { id = ViewData [ " id " ] } ) ; } |
| 11 | < / div > < br / > |
| 12 | < div id = " contentMain " style = " width:760px; " > |
| 13 | < span class = " header " style = " width:750px; " > 产品列表 < / span > |
| 14 | @ { |
| 15 | foreach ( var c in Model ) |
| 16 | { |
| 17 | < ul > |
| 18 | < li > < a href = ' @ Url . Action ( " Details " , " Product " , new { id = c . ProductID } ) ' > < img src = ' / Images / products/ @ c . SamllImageUrl ' alt = " @c.Title " / > < / a > < / li > |
| 19 | < li class = ' title ' > < a href = ' @ Url .Action ( " Details " , " Product " , new { id = c . ProductID } ) ' > @ c .Title < / a > < / li > |
| 20 | < li > 市场价： < del > @ c . MarketPrice . ToString (" C " ) < / del > < / li > |
| 21 | < li > 当前价： @ c . UnitPrice . ToString ( " C " ) </ li > |
| 22 | < li > < span class = " rating-title " > 评 价： < /span > |
| 23 | < div class = ' rating ' id = "@c.ProductID.ToString( " rat - 0 " ) " > |
| 24 | < input name = "@c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = "disabled " value = " 1 " @ ( c . TotalRating = = 1 ? " checked='checked' " : "" ) / > |
| 25 | < input name = "@c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = "disabled " value = " 2 " @ ( c . TotalRating = = 2 ? " checked='checked' " : "" ) / > |
| 26 | < input name = "@c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = "disabled " value = " 3 " @ ( c . TotalRating = = 3 ? " checked='checked' " : "" ) / > |
| 27 | < input name = "@c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = "disabled " value = " 4 " @ ( c . TotalRating = = 4 ? " checked='checked' " : "" ) / > |
| 28 | < input name = "@c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = "disabled " value = " 5 " @ ( c . TotalRating = = 5 ? " checked='checked' " : "" ) / > |
| 29 | < / div > |
| 30 | < / li > |
| 31 | < / ul > |
| 32 | } |
| 33 | } |
| 34 | < div class = " clear " > < / div > |
| 35 | < div class = ' pagenav ' > @ Html . Pager ( Model , new PagerOptions { PageIndexParameterName = " page " } ) < / div > |
| 36 | < / div > |
| 37 | |
| 38 | < script type = " text/javascript " > |
| 39 | jQuery ( function ( ) { |
| 40 | $ ( " div .rating " ) . stars ( ) ; |
| 41 | } ) ; |
| 42 | < / script > |
| 43 | |
| 44 | |
| 45 |
代码第10行通过一个分部视图显示导航菜单。第35行要注意PageIndexParameterName是“page”，而不是Index视图的“id”了。
下一步要做的是完成导航条的显示。将文件切换回CatalogController.cs文件，添加一个名称为“Navbar”的子操作，其代码如下：
| 1 | [ ChildActionOnly ] |
| 2 | public ActionResult Navbar ( string id ) |
| 3 | { |
| 4 | List < string > idlist = new List < string > ( ) ; |
| 5 | idlist . Add ( id ) ; |
| 6 | for ( int i = 0 ; i < ( id . Length - 2 ) ; i = i + 3 ) |
| 7 | { |
| 8 | idlist . Add ( id . Substring ( 0 , i + 3 ) ) ; |
| 9 | } |
| 10 | var q = dc . T_Categories . Where ( m = > idlist . Contains ( m. CategoryID ) ) . OrderBy ( m = > m . CategoryID ) ; |
| 11 | return PartialView ( q ) ; |
| 12 | } |
| 13 |
代码首先获取了当前分类的父类编号，然后从数据库一次查询出所有类别并排序。现在为该子操作创建一个分部视图，视图代码如下：
| 1 | @ model IEnumerable < Extshop . Models . T_Categories > |
| 2 | |
| 3 | @ { |
| 4 | foreach ( var c in Model ) |
| 5 | { |
| 6 | @ Html . Raw ( " >> " ) < a href = ' @ Url . Action ( " List " , " Catalog " , new { id = c . CategoryID } ) ' > @ c . Titel < / a > |
| 7 | } |
| 8 | } |
代码中，“>>”的显示必须用Html的Raw方法显示，不然会提示错误，使用“>”也不行，估计是和Razor的语法有冲突。是否有其它办法，没去研究了。
至此，产品列表页的就已经完成了。
BTW：因为项目还没完成，所以没考虑提供源代码，但有读者希望在看文章的同时能提供源代码做参考，所以从本文开始，每完成一节，就提供到该节的代码。
