在完成产品列表页前要做一些准备功夫。首先是去下载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. ) ;   

现在打开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. }   

代码传入的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 >   

代码第一句引用MvcPager,第二句定义接收的数据模型类型。因为是所以产品列表,所以PageData["id"]设置为空字符串。其余代码和首页的差不多。第34句使用HTML方式显示分页代码。这里要注意的是PagerOptions选项中的PageIndexParameterName要设置为id,因为操作中接收的当前页参数是以id定义的。

页面需要正常显示,还需要在Site.css中添加以下代码:
   
   
   
   
  1. 1   #contentMain .clear { clear : both ; }   
  2. 2   #contentMain .pagenav { width : 760px ; text-align : center ; margin-bottom : 10px ; }   
  3. 切换回CatalogController.cs文件,在Index操作下添加一个List操作,其代码如下:  
  4. 1   public ActionResult List(string id, int? page)   
  5. 2   {   
  6. 3   ViewData["id"] = id;   
  7. 4   PagedList q = dc.T_Products   
  8. 5   .Where(m => dc.T_Categories.Where(n => n.CategoryID.Substring(0, id.Length) == id).Select(n => n.CategoryID ).Contains(m.CategoryID))   
  9. 6   .OrderByDescending(m => m.CreateTime).ToPagedList(page ?? 1, 4);   
  10. 7   return View(q);   
  11. 8   }   

从代码可以看到,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 >   

代码第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. }   

代码首先获取了当前分类的父类编号,然后从数据库一次查询出所有类别并排序。现在为该子操作创建一个分部视图,视图代码如下:

   
   
   
   
  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:因为项目还没完成,所以没考虑提供源代码,但有读者希望在看文章的同时能提供源代码做参考,所以从本文开始,每完成一节,就提供到该节的代码。
源代码: http://download.csdn.net/source/2996287