0
点赞
收藏
分享

微信扫一扫

Asp.net MVC 3实例学习之ExtShop(五)——产品详细页


      在产品详细页需要使用到tab控件,在jquery的ui包已包含改控件,因而将相应文件链接加到母版页就可以了。

      打开“ProductController”文件,在里面添加一个Details操作,代码如下:



                public   ActionResult   Details ( int   id )


                {


                        var   q   =   dc . T_Products . Single ( m   = >   m . ProductID   = =   id ) ;


                        return   View ( q ) ;


                }


 


      完成后创建对应的视图页,并完成整个页面框架,代码如下:



@ model   Extshop . Models . T_Products


 


@ {


        ViewBag . Title   =   Model . Title ;


        PageData [ " id " ]   =   Model . CategoryID ;


}


 


        < div   class = " nav " >


                < a   href = " @Url.Action( " " ,   " Catalog " ) " > 产品 < / a >

10 

                @ { Html . RenderAction ( " Navbar " ,   " Catalog " ,   new   {   id   =   PageData [ " id " ]   } ) ; }

11 

                @ Html . Raw ( " >> " )

12 

                @ Model . Title

13 

        < / div > < br   / >

14 

        < div   id = " contentMain "   style = " width:760px; " >

15 

                < span   class = " header "     style = " width:750px; "   id = " producttitle " > @ Model . Title < / span >

16 

                < div   class = " img " >

17 

                < a   href = " /images/products/@Model.LargeImageUrl "   rel = " lightbox " > < img   src = " /images/products/@Model.SamllImageUrl "   alt = " @Model.Title "   width = " 170 "   height = " 190 "   / > < / a >

18 

                < / div >

19 

                < div   class = " details " >

20 

                        < ul >

21 

                        < li > 市场价格: < del > @ Model . MarketPrice . ToString ( " C " ) < / del > < / li >

22 

                        < li   id = ' unitprice ' > 当前价格: @ Model . UnitPrice . ToString ( " C " ) < / li >

23 

                        < li > < span > 用户评价: < / span >

24 

                                < div   class = ' rating '   id = ' rating1 ' >

25 

                                        < input   name = " @Model.ProductID.ToString( " Star0 " ) "   type = " radio "   class = " star "   disabled = " disabled "   value = " 1 "   @ ( Model . TotalRating   = =   1   ?   " checked='checked' "   :   " " )     / >

26 

                                        < input   name = " @Model.ProductID.ToString( " Star0 " ) "   type = " radio "   class = " star "   disabled = " disabled "   value = " 2 "   @ ( Model . TotalRating   = =   2   ?   " checked='checked' "   :   " " )   / >

27 

                                        < input   name = " @Model.ProductID.ToString( " Star0 " ) "   type = " radio "   class = " star "   disabled = " disabled "   value = " 3 "   @ ( Model . TotalRating   = =   3   ?   " checked='checked' "   :   " " )     / >

28 

                                        < input   name = " @Model.ProductID.ToString( " Star0 " ) "   type = " radio "   class = " star "   disabled = " disabled "   value = " 4 "   @ ( Model . TotalRating   = =   4   ?   " checked='checked' "   :   " " )     / >

29 

                                        < input   name = " @Model.ProductID.ToString( " Star0 " ) "   type = " radio "   class = " star "   disabled = " disabled "   value = " 5 "   @ ( Model . TotalRating   = =   5   ?   " checked='checked' "   :   " " )     / >                                                                        

30 

                                < / div >

31 

                        < / li >

32 

                        < li > 制造厂商: @ Model . Manufacturers < / li >

33 

                        < li > 产品型号: @ Model . Model < / li >

34 

                        < li > 库存情况: @ ( Model . Stock > 0   ?     @ Html . Raw ( "   color='blue'>有货 " )   :   @ Html . Raw ( "   color='red'>缺货 " ) ) < / li >

35 

                        < li > < hr / > < / li >

36 

                        < li > < a   href = ' # '   class = ' cart '   onclick = ' ' > < img   alt = " "   width = " 50 "   height = " 22 "   src = ' / images / buy . jpg '     / > < / a > < / li >

37 

                        < / ul >                        

38 

                < / div >

39 

                < div   class = ' clear ' > < / div >                

40 

                < div   id = " tabs "   style = " width:740px;margin:auto; " >

41 

                    < ul   style = " width:727px; " >

42 

                        < li > < a   href = " #tabs-1 " > 产品描述 < / a > < / li >

43 

                        < li > < a   href = " #tabs-2 " > 规格参数 < / a > < / li >

44 

                        < li > < a   href = " #tabs-3 " > 保修条款 < / a > < / li >

45 

                        < li > < a   href = " #tabs-4 " > 评论 < / a > < / li >

46 

                    < / ul >

47 

                    < div   id = " tabs-1 " >

48 

                        < p > @ Model . Description < / p >

49 

                    < / div >

50 

                    < div   id = " tabs-2 "   style = " border:0; " >

51 

                        < br   / >   < br   / >

52 

                        < table   id = " "   width = " 100% "   cellpadding = " 0 "   cellspacing = " 0 "   border = " 0 " > @ Html . Raw ( @ Model . Specification ) < / table >

53 

                    < / div >

54 

                    < div   id = " tabs-3 " >

55 

                        < p > @ Model . Warranty < / p >

56 

                    < / div >

57 

                    < div   id = " tabs-4 " >

58 

                    < / div >

59 

                < / div >

60 

                < br   / >

61 

        < / div >

62 

 

63 

 


 


 


   码第10行从一个分布视图获取导航信息,这个等会再创建。从第40行到59行是创建一个tab控件,评论页的内容暂时为空,等下再创建。第52行中的产品描述数据是已html代码保存在数据库的,所以要用Html的Raw方法直接显示,不需要进行编码输出。要tab控件正确显示,还需要在模版页jquery函数内加入以下代码:


 





$ ( " #tabs " ) . tabs ( ) ;


   现在要完成导航信息,打开CatalogController文件,添加一个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 

 


  

      代码首先获取产品类别的父类编号,然后查询出父类进行显示。右键单击“Navbar”创建分页页面,页面的内容如下:



@ 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 >


        }


}


 

        现在要完成评论的显示。评论我们使用分别页面很容易显示。首先在产品详细信息页内的id为“tabs-4”的div下添加以下代码:



                                < div   style = " clear:both; " > < / div >


                                < div   id = " CommentList " >


                                @ { Html . RenderAction ( " Index " ,   " Comment " ,   new   {   id   =   @ Model . ProductID ,   page   =   1   } ) ; }


                                < / div >


                                < br   / >


                                @ { Html . RenderAction ( " AddComment " ,   " Comment " ,   new   {   id   =   @ Model . ProductID   } ) ; }


 


 

      代码第3行使用一个分部页面显示评论内容。第6行就用分部页面显示评论添加表单。

      新建一个名称为“CommentController”的控制器,并修改index操作代码如下:



                public   ActionResult   Index ( int   id , int ?   page )


                {


                        ViewData [ " ProdcutID " ]   =   id ;


                        PagedList < T_Comment >   q   =   dc . T_Comment . Where ( m   = >   m . ProductID   = =   id ) . OrderByDescending ( m = > m . CreateTime ) . ToPagedList ( page   ? ?   1 , 2 ) ;


                        return   PartialView ( q ) ;


                }


 


 

      代码中第1个参数id表示的是产品的id,第2个参数是评论的当前页。和产品列表一样,使用mvcPager进行分页。完成后创建分部视图页,并将其代码修改如下:



@ using   Webdiyer . WebControls . Mvc ;


@ model   PagedList < Extshop . Models . T_Comment >


@ {


        foreach   ( var   c   in   Model )


        {


                < div   class = " row "   >


                < div   class = " title " > @ c . Title < / div >


                < b > @ c . Username < / b > & nbsp ; 发表于 @ ( c . CreateTime ) < br / >


                  @ c . Description                              

10 

                < / div >

11 

        }

12 

}

13 

< br   / >

14 

< div   class = ' pagenav ' > @ Ajax . Pager ( Model ,   new   PagerOptions { PageIndexParameterName = " page " } ,   new   AjaxOptions   {   UpdateTargetId   =   " CommentList "   } ) < / div >              

15 

 


       代码中第14行使用了Ajax分页的方法,这样,就可以使用Ajax自动更新该部分。在AjaxOption中定义了UpdateTargetId参数为“CommentList”,意味着当Ajax加载数据后,会自动更新id为“CommentList”的html元素内的内容。

      最后要完成的是评论添加分部视图。首先需要创建一个表单模型。在Models目录创建一个名称为“CommentModels”的类,并将类代码修改如下:




        public   class   CommentModels


        {


 


                [ Display ( Name   =   " 评分 " ) ]


                public   int   Rating   {   get ;   set ;   }


 


                [ Required ( ErrorMessage   =   " 请输入“标题” " ) ]


                [ Display ( Name   =   " 标题 " ) ]


                public   string   Title   {   get ;   set ;   }

10 

 

11 

                [ Required ( ErrorMessage   =   " 请输入“内容” " ) ]

12 

                [ Display ( Name   =   " 内容 " ) ]

13 

                public   string   Description   {   get ;   set ;   }

14 

 

15 

        }

16 

 


 

      我们只定义需要用户输入的3个项就行了,产品编号和发表用户这些可以从其它地方获取。完成后,切换到CommentController控制器文件,添加显示表单的控制器,其代码如下:



                [ ChildActionOnly ]


                public   ActionResult   AddComment ( int   id )


                {


                        ViewData [ " ProductID " ]   =   id ;


                        return   PartialView ( ) ;


                }


 


 

      在这里需要注意的是要将产品编号带到分部视图。然后创建分部视图,代码如下:




@ model   Extshop . Models . CommentModels


 


@ using   ( Ajax . BeginForm ( " AddComment " ,   " Comment " , new   {   id = ViewData [ " ProductID " ]   } ,   new   AjaxOptions   {   OnSuccess   =   " CommentSuccess " ,   LoadingElementId   =   " CommentLoad " ,   UpdateTargetId   =   " CommentMsg "  


        , OnBegin = " CommentBegin " } ,   new   {   id   =   " CommentForm "   } ) )


{      


        < div >


                < fieldset >


                        < legend > < / legend >


                                < div   style = " width:600px;display:block;height:30px; " >

10 

                                < div   id = ' rating - select '   style = " width:300px; " >

11 

                                @ Html . LabelFor ( m   = >   m . Rating )

12 

                                @ Html . DropDownListFor ( m   = >   m . Rating ,   new   SelectList ( new   Dictionary < string , string >   {  

13 

                                        { " 1 " , " 1 " } ,

14 

                                        { " 2 " , " 2 " } ,

15 

                                        { " 3 " , " 3 " } ,

16 

                                        { " 4 " , " 4 " } ,

17 

                                        { " 5 " , " 5 " }

18 

                                  } ,   " Key " ,   " Value " ) ,   new   {   @ class   =   " star " , width = " 120 "   } )

19 

                                < / div >                                

20 

                                < div   class = " error " >

21 

                                        @ Html . ValidationMessageFor ( m   = >   m . Rating )

22 

                                < / div >

23 

                                < / div >

24 

                              < p   style = " width:600px;display:block; " >

25 

                                @ Html . LabelFor ( m   = >   m . Title )

26 

                                @ Html . TextBoxFor ( m   = >   m . Title ,   new   {   style   =   " width:500px; "   } )                                

27 

                              < / p >

28 

                                < div   class = " error " >

29 

                                        @ Html . ValidationMessageFor ( m   = >   m . Title )

30 

                                < / div >

31 

                              < p   style = " width:600px;display:block; " >

32 

                                @ Html . LabelFor ( m   = >   m . Description )

33 

                                @ Html . TextAreaFor ( m   = >   m . Description ,   new   {   style = " width:500px; "   } )                            

34 

                              < / p >

35 

                                < div   class = " error " >

36 

                                        @ Html . ValidationMessageFor ( m   = >   m . Description )

37 

                                < / div >

38 

                        < p   style = " text-align:center;width:600px; " >

39 

                                < input   id = " ComentSubmit "   type = " submit "   value = " 保存 "   / >

40 

                        < / p >

41 

                        < p   style = " text-align:center;display:none; "   id = " CommentLoad " > < img   src = " /Images/blue-loading.gif "   alt = " 正在保存…… "   / > < / p >

42 

                        < p   style = " text-align:center;color:Red; "   id = " CommentMsg " > < / p >

43 

                < / fieldset >

44 

        < / div >

45 

}

46 

 

47 

< script   type = " text/javascript " >

48 

        function   CommentSuccess ( e )   {

49 

                $ ( " #CommentForm   input " ) . removeAttr ( " readonly " ) ;

50 

                $ ( " #CommentSubmit " ) . removeAttr ( " disabled " ) ;

51 

                if   ( e . Success )   {

52 

                        $ ( " #CommentForm " ) [ 0 ] . reset ( ) ;

53 

                        $ ( " #CommentMsg " ) . html ( e . Message ) ;

54 

                        var   url   =   window . location ;

55 

                        re   =   / ( [ 0 - 9 ] * ) [ # ] ? $ / ig ;

56 

                        var   r   =   re . exec ( url )

57 

                        if ( r ) {

58 

                                for   ( var   i   =   0 ;   i   <   r . length - 1 ;   i + + )   {

59 

                                        if   ( ! isNaN ( r [ i ] ) )   {

60 

                                                $ ( " #CommentList " ) . load ( " /Comment/ "   +   r [ i ]   +   " /1 " ) ;                                                

61 

                                        }

62 

                                }

63 

                        }

64 

                }   else   {

65 

                        $ ( " #CommentMsg " ) . html ( e . Message ) ;

66 

                }

67 

        }

68 

 

69 

        function   CommentBegin ( e )   {

70 

                $ ( " #CommentForm   input " ) . attr ( " readonly " ,   true ) ;

71 

                $ ( " #CommentSubmit " ) . attr ( " disabled " ,   " disabled " ) ;

72 

                $ ( " #CommentMsg " ) . html ( " " ) ;

73 

        }

74 

 

75 

< / script >


 

      表单将已Ajax的方式提交,所以在这里使用的是Ajax.BeginForm,而不是Html.BeginForm。表单提交的路径将会是“/Comment/AddComment/{id}”,其中的id是产品的编号。代码第12行到18行将创建一个select元素用来生成评价输入控件。代码54行到62行的作用是评论保存后,通过页面路径获取产品编号,然后通过Ajax更新一下评论分部视图的显示。

      余下的工作是完成评论保存控制器,其代码如下:



                [ HttpPost ]


                public   JsonResult   AddComment ( int   id , CommentModels   model )


                {


                        if   ( ModelState . IsValid )


                        {


                                if   ( User . Identity . IsAuthenticated )


                                {


                                        try


                                        {

10 

                                                T_Comment   comment   =   new   T_Comment ( ) ;

11 

                                                comment . Description   =   model . Description ;

12 

                                                comment . ProductID   =   id ;

13 

                                                comment . Rating   =   model . Rating ;

14 

                                                comment . Title   =   model . Title ;

15 

                                                comment . Username   =   User . Identity . Name ;

16 

                                                comment . CreateTime   =   DateTime . Now ;

17 

                                                try

18 

                                                {

19 

                                                        dc . T_Comment . InsertOnSubmit ( comment ) ;

20 

                                                        dc . SubmitChanges ( ) ;

21 

                                                        return   Json ( new   {   Success   =   true ,   Message   =   " 评论已保存! "   } ,   JsonRequestBehavior . AllowGet ) ;

22 

                                                }

23 

                                                catch ( Exception   e )

24 

                                                {

25 

                                                        return   Json ( new   {   Success   =   false ,   Message   =   " 评论保存失败:数据错误! "   } ,   JsonRequestBehavior . AllowGet ) ;

26 

                                                }

27 

                                        }

28 

                                        catch

29 

                                        {

30 

                                                return   Json ( new   {   Success   =   false ,   Message   =   " 评论保存失败:数据错误! "   } ,   JsonRequestBehavior . AllowGet ) ;

31 

                                        }

32 

                                }

33 

                                else

34 

                                {

35 

                                        return   Json ( new   {   Success   =   false ,   Message   =   " 评论保存失败:请先登录! "   } ,   JsonRequestBehavior . AllowGet ) ;

36 

                                }

37 

                        }

38 

                        return   Json ( new   {   Success   =   false ,   Message   =   " 添加评论失败:提交的数据存在错误! "   } ,   JsonRequestBehavior . AllowGet ) ;

39 

                }

40 

 


 

      代码第1行表示改操作是接收Post的操作。AddComment操作将接收两个参数,第1个是产品编号,第2个是用户提交的评论内容。因为使用Ajax提交,所以该操作不需要返回视图,只需要返回Json数据,所以操作的返回值是JsonResult。第4句判断用户的输入是否符合要求。第6句判断用户是否已经登录,如果没有登录,发送错误信息提示用户登录。

      这样,整个产品详细信息页就完成了。不过,要使程序正常运行,还需要修改路由表,打开Global.asax.cs文件,在路由中加入以下路由:



                        routes . MapRoute (


                                " Comment1 " ,   //   Route   name


                                " Comment/AddComment/{id} " ,   //   URL   with   parameters


                                new   {   controller   =   " Comment " ,   action   =   " AddComment " ,   id = 1   }   //   Parameter   defaults


                        ) ;


 


                        routes . MapRoute (


                                " Comment " ,   //   Route   name


                                " Comment/{id}/{page} " ,   //   URL   with   parameters

10 

                                new   {   controller   =   " Comment " ,   action   =   " Index " ,   page   =   1   }   //   Parameter   defaults

11 

                        ) ;

12 

 


      第1个路由指示添加评论是如何路由的,如果没有这个,则全部会按第2个路由执行,全部操作转到Index操作去了,这样就会发生错误。

举报

相关推荐

0 条评论