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

原创 2011年01月23日 14:38:00

      在产品详细页需要使用到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操作去了,这样就会发生错误。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Asp.net MVC 3实例学习之ExtShop(二)——创建母版页

      母版页的作用就是将整个网站的公共元素集中起来,便于维护。在本实例中的母版页内容主要如图1所示,将页面中顶部的导航栏、左边的分类栏和底部的版权信息集中起来。图1      在修改母版...

Asp.net MVC 3实例学习之ExtShop(六)——登录对话框

      登录对话框将使用jquery提供的对话框,所以不需要添加其它js文件。首先要为登录对话框添加一个表单模型。在Models目录下创建一个“AccountModels”类文件,然后添加一个Lo...

Asp.net MVC 3实例学习之ExtShop(三)——完成首页

      首页主要包括两部分,主体部分显示15个最新的的商品,右边则显示10条最新的优惠信息。主体部分可以直接使用传入的数据生成,也可以通过分类列表的方法生成,看个人喜好。而优惠信息则使用分类的...

Asp.net MVC 3实例学习之ExtShop(一)————创建应用并设置开发环境

      在VS2010中创建一个如图1所示的“ExtShop”项目,然后在图2的窗口中选择“Empty”,单击“OK”完成项目创建,项目的目录结构和已包含文件如图3所示。 图1  图2 ...

ASP.NET MVC3 实例(五) Razor 布局简介

ASP.NET MVC3中新增的 Razor 视图引擎有很多的优势,关于使用 Razor 的优势从前几篇的文章中也能看出一些,我们的 Android 博客项目就采用了 Razor。本篇将简单的介绍下 ...

ASP.NET MVC3 实例(三) 使用 Controller 进行数据的的查询

上一篇我们主要介绍了下 MVC3 中实体数据模型(Entity Data Model)的创建,本篇我们将主要介绍下在 MVC3 中使用 Controller 进行数据的的查询。在进行 Controll...
  • w678528
  • w678528
  • 2012年07月21日 10:05
  • 923

ASP.NET MVC3 实例(六) 增加、修改和删除操作(二)

上篇我们在 ASP.NET MVC3 中实现了添加操作,由于时间关系没有完成修改、删除操作,我们新建了一个名为"Contact"的 Controller,并实现了添加方法,下边就让我们在此基础上来完成...

ASP.NET MVC3 实例(三) 使用 Controller 进行数据的的查询

上一篇我们主要介绍了下 MVC3 中实体数据模型(Entity Data Model)的创建,本篇我们将主要介绍下在 MVC3 中使用 Controller 进行数据的的查询。在进行 Controll...

ASP.NET MVC3 实例(二) 使用 Entity Framework 创建实体数据模型

上篇中大体介绍了下 MVC3 以及项目的创建,本篇我们主要看看 MVC3 中实体数据模型的创建。我们创建项目时,使用的是 .NET 4,在 .NET 4 中我们可以使用 Entity Framewor...

ASP.NET MVC3 实例(四) 路由和多数据集的返回

在上一篇中介绍了在 ASP.NET MVC3 中使用 Controller 来进行数据的查询并将它返回给 View,View 中使用 ASP.NET MVC3 新特征 Razor 语法进行了数据的显示...
  • w678528
  • w678528
  • 2012年07月21日 10:05
  • 962
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Asp.net MVC 3实例学习之ExtShop(五)——产品详细页
举报原因:
原因补充:

(最多只允许输入30个字)