关闭

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

标签: 产品asp.netmvcajaxjqueryborder
3118人阅读 评论(2) 收藏 举报
分类:

      在产品详细页需要使用到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
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

产品思维学习(三)--产品设计的五个层面

今天的读书会很碰巧有一位同学分享《用户体验要素-以用户为中心的产品设计》这本书。里面讲述了用户体验要素的五个层面:战略层,范围层,结构层,框架层,表现层。也是产品设计的五个层面,所以学习记录下。首先附...
  • u014231523
  • u014231523
  • 2016-05-11 01:19
  • 4193

HTML5 CSS3 专题 :诱人的实例 3D展示商品信息

强化下perspective和transform:translateZ的用法。传统的商品展示或许并不能很好的吸引用户的注意力,但是如果在展示中添加适当的3D元素,~说不定效果不错哈~ 效果图: 说...
  • lmj623565791
  • lmj623565791
  • 2014-06-21 22:07
  • 12526

[Bootstrap]从入门到实战_客户案例详情页开发(三)

$客户案例详情页(case.html)新建一个文件case.html,客户案例详情页实际上和平时常见的 “新闻内容页”、“产品介绍页”非常类似,我们这里先做个简化版。最终效果如下: $case.ht...
  • express_yourself
  • express_yourself
  • 2017-01-19 17:03
  • 2560

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

母版页的作用就是将整个网站的公共元素集中起来,便于维护。在本实例中的母版页内容主要如图1所示,将页面中顶部的导航栏、左边的分类栏和底部的版权信息集中起来。图1      在修改母版页之前,首先在项...
  • tianxiaode
  • tianxiaode
  • 2011-01-19 23:53
  • 17326

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

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

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

登录对话框将使用jquery提供的对话框,所以不需要添加其它js文件。首先要为登录对话框添加一个表单模型。在Models目录下创建一个“AccountModels”类文件,然后添加一个Logon类,代...
  • tianxiaode
  • tianxiaode
  • 2011-01-23 15:43
  • 5008

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

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

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

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

ASP.NET MVC 3 Model【通过一简单实例一步一步的介绍】

今天主要讲Model的两个方面: 1. ASP.Net MVC 3 Model 简介 通过一简单的事例一步一步的介绍 2. ASP.Net MVC 3 Model 的一些验证      ...
  • crazyliyang
  • crazyliyang
  • 昨天 13:32
  • 32

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

上一篇我们主要介绍了下 MVC3 中实体数据模型(Entity Data Model)的创建,本篇我们将主要介绍下在 MVC3 中使用 Controller 进行数据的的查询。在进行 Controll...
  • w678528
  • w678528
  • 2012-07-21 10:05
  • 967
    个人资料
    • 访问:1568966次
    • 积分:17799
    • 等级:
    • 排名:第621名
    • 原创:164篇
    • 转载:28篇
    • 译文:101篇
    • 评论:2192条
    交流QQ群
    391747779
    193238033
    博客专栏
    《Ext JS 6.2实战》
    《Ext JS权威指南》
    《Sencha Touch实战》
    《Ext JS 4.2 实战》
    文章分类
    最新评论