zoukankan      html  css  js  c++  java
  • Asp.net MVC 3实例学习之ExtShop(四)——完成产品列表页

      在完成产品列表页前要做一些准备功夫。首先是去下载MvcPager用了为产品列表分页。下载的可能是基于MVC 2的,没关系,可以用在MVC 3上。如果有担心,下载源代码重新编译一次好了。下载后将DLL添加到引用里。

          接着是要修改一下路由以实现“Catalog/List/[id]/[page]”的访问。打开“Global.asax.cs”文件,然后在默认路由之前添加以下代码:

                            routes . MapRoute (
                                    " Catalog " ,   //   Route   name
                                    " Catalog/List/{id}/{page} " ,   //   URL   with   parameters
                                    new   {   controller   =   " Catalog " ,   action   =   " List " ,  page   =   1   }   //   Parameter   defaults
                            ) ;
     

         现在打开CatalogController.cs文件,在文件头添加对MvcPager的引用,代码如下:

    using   Webdiyer . WebControls . Mvc;

           然后修改Index操作的代码如下:

                    public   ActionResult   Index ( int?   id )
                    {
                            PagedList < T_Products >   q   =   dc . T_Products . OrderByDescending ( m  = >   m . CreateTime ) . ToPagedList ( id   ??   1 ,   8 ) ;
                            return   View ( q ) ;
                    }
     

          代码传入的id是页码而不是产品分类编码,这个要注意。因为要使用分页,所以传递给视图的是PagedList对象,而不是Queryable,这也是要注意的地方。因而,查询结果需要通过toPagedList方法将Queryable对象转换为PagedList对象。第1个参数是当前页面,如果id为空,则默认为第1页。第2个参数是每页显示的产品数量,在这里是8个。

          在“Index”上单击鼠标右键,选择“添加视图”(微笑 ,今天换了中文版,菜单也变了)。在视图中添加以下代码:

    @ using   Webdiyer . WebControls . Mvc ;
    @ model   PagedList < Extshop . Models . T_Products >
     
    @ {
            ViewBag . Title   =   " 产品列表 " ;
            PageData [ " id " ]   =   " " ;
    }
            < div   class = " nav " >
                    < a   href = " @Url.Action( " " ,   " Catalog " ) " > 产品 < / a >
    10          < / div > < br   / >
    11          < div   id = " contentMain "   style = " 760px; " >
    12                  < span   class = " header "     style = " 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中添加以下代码:

    #contentMain   .clear clear : both ; }
    #contentMain   .pagenav width : 760px ; text-align : center ; margin-bottom : 10px ; }

          切换回CatalogController.cs文件,在Index操作下添加一个List操作,其代码如下:

                    public   ActionResult   List(string   id,   int?   page)
                    {
                            ViewData["id"]   =   id;
                            PagedList   q   =   dc.T_Products
                                    .Where(m   =>   dc.T_Categories.Where(n   =>  n.CategoryID.Substring(0,   id.Length)   ==   id).Select(n   =>     n.CategoryID  ).Contains(m.CategoryID))
                                    .OrderByDescending(m   =>   m.CreateTime).ToPagedList(page   ??  1,   4);
                            return   View(q);
                    }
     

          从代码可以看到,List操作有两个参数,第1个是分类id,第2个是当前页号。第3行通过ViewData["id"]向视图传递当前的分类id,以更新左边分类列表以及显示导航条。其余的和Index操作差不多。现在为List操作创建一个视图,视图内代码如下:

    @ using   Webdiyer . WebControls . Mvc ;
    @ model   PagedList < Extshop . Models . T_Products >
    @ {
            ViewBag . Title   =   " 产品列表 " ;
            PageData [ " id " ]   =   ViewData [ " id " ] ;
    }
     
            < div   class = " nav " >
                    < a   href = " @Url.Action( " " ,   " Catalog " ) " > 产品 < / a >
    10                  @ { Html . RenderAction ( " Navbar " ,   " Catalog " ,   new   {   id   =  ViewData [ " id " ]   } ) ; }
    11          < / div > < br   / >
    12          < div   id = " contentMain "   style = " 760px; " >
    13                  < span   class = " header "   style = " 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”的子操作,其代码如下:

                    [ ChildActionOnly ]
                    public   ActionResult   Navbar ( string   id )
                    {
                            List < string >   idlist   =   new   List < string > ( ) ;
                            idlist . Add ( id ) ;
                            for   ( int   i   =   0 ;   i   <   ( id . Length   -   2 ) ;   i   =   i  +   3 )
                            {
                                    idlist . Add ( id . Substring ( 0 ,   i   +   3 ) ) ;
                            }
    10                          var   q   =   dc . T_Categories . Where ( m   = >   idlist . Contains ( m. CategoryID ) ) . OrderBy ( m   = >   m . CategoryID ) ;
    11                          return   PartialView ( q ) ;
    12                  }
    13   

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

    @ model   IEnumerable < Extshop . Models . T_Categories >
     
    @ {
            foreach ( var   c   in   Model )
            {
                  @ Html . Raw ( " >> " ) < a   href = ' @ Url . Action ( " List " ,   " Catalog " ,  new   { id   =   c . CategoryID     } ) ' > @ c . Titel < / a >
            }
    }

          代码中,“>>”的显示必须用Html的Raw方法显示,不然会提示错误,使用“>”也不行,估计是和Razor的语法有冲突。是否有其它办法,没去研究了。

          至此,产品列表页的就已经完成了。

         BTW:因为项目还没完成,所以没考虑提供源代码,但有读者希望在看文章的同时能提供源代码做参考,所以从本文开始,每完成一节,就提供到该节的代码。

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

  • 相关阅读:
    【NOIP 2003】 加分二叉树
    【POJ 1655】 Balancing Act
    【HDU 3613】Best Reward
    【POJ 3461】 Oulipo
    【POJ 2752】 Seek the Name, Seek the Fame
    【POJ 1961】 Period
    【POJ 2406】 Power Strings
    BZOJ3028 食物(生成函数)
    BZOJ5372 PKUSC2018神仙的游戏(NTT)
    BZOJ4836 二元运算(分治FFT)
  • 原文地址:https://www.cnblogs.com/mvc2014/p/3776059.html
Copyright © 2011-2022 走看看