首页 > 代码库 > Asp.net MVC 3实例学习之ExtShop（四）——完成产品列表页

Asp.net MVC 3实例学习之ExtShop（四）——完成产品列表页

2024-07-07 13:42:28   219人阅读

  在完成产品列表页前要做一些准备功夫。首先是去下载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：因为项目还没完成，所以没考虑提供源代码，但有读者希望在看文章的同时能提供源代码做参考，所以从本文开始，每完成一节，就提供到该节的代码。

源代码：http://download.csdn.net/source/2996287


联系
我们