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

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

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

1	public ActionResult Details ( int id )
2	{
3	var q = dc . T_Products . Single ( m = > m . ProductID = = id ) ;
4	return View ( q ) ;
5	}
6

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

1	@ model Extshop . Models . T_Products
2
3	@ {
4	ViewBag . Title = Model . Title ;
5	PageData [ " id " ] = Model . CategoryID ;
6	}
7
8	< div class = " nav " >
9	< 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函数内加入以下代码：

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

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

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

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	}

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

1	< div style = " clear:both; " > < / div >
2	< div id = " CommentList " >
3	@ { Html . RenderAction ( " Index " , " Comment " , new { id = @ Model . ProductID , page = 1 } ) ; }
4	< / div >
5	< br / >
6	@ { Html . RenderAction ( " AddComment " , " Comment " , new { id = @ Model . ProductID } ) ; }
7

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

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

1	public ActionResult Index ( int id , int ? page )
2	{
3	ViewData [ " ProdcutID " ] = id ;
4	PagedList < T_Comment > q = dc . T_Comment . Where ( m = > m . ProductID = = id ) . OrderByDescending ( m = > m . CreateTime ) . ToPagedList ( page ? ? 1 , 2 ) ;
5	return PartialView ( q ) ;
6	}
7

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

1	@ using Webdiyer . WebControls . Mvc ;
2	@ model PagedList < Extshop . Models . T_Comment >
3	@ {
4	foreach ( var c in Model )
5	{
6	< div class = " row " >
7	< div class = " title " > @ c . Title < / div >
8	< b > @ c . Username < / b > & nbsp ; 发表于 @ ( c . CreateTime ) < br / >
9	@ 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”的类，并将类代码修改如下：

1	public class CommentModels
2	{
3
4	[ Display ( Name = " 评分 " ) ]
5	public int Rating { get ; set ; }
6
7	[ Required ( ErrorMessage = " 请输入“标题” " ) ]
8	[ Display ( Name = " 标题 " ) ]
9	public string Title { get ; set ; }
10
11	[ Required ( ErrorMessage = " 请输入“内容” " ) ]
12	[ Display ( Name = " 内容 " ) ]
13	public string Description { get ; set ; }
14
15	}
16

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

1	[ ChildActionOnly ]
2	public ActionResult AddComment ( int id )
3	{
4	ViewData [ " ProductID " ] = id ;
5	return PartialView ( ) ;
6	}
7

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

1	@ model Extshop . Models . CommentModels
2
3	@ using ( Ajax . BeginForm ( " AddComment " , " Comment " , new { id = ViewData [ " ProductID " ] } , new AjaxOptions { OnSuccess = " CommentSuccess " , LoadingElementId = " CommentLoad " , UpdateTargetId = " CommentMsg "
4	, OnBegin = " CommentBegin " } , new { id = " CommentForm " } ) )
5	{
6	< div >
7	< fieldset >
8	< legend > < / legend >
9	< 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更新一下评论分部视图的显示。

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

1	[ HttpPost ]
2	public JsonResult AddComment ( int id , CommentModels model )
3	{
4	if ( ModelState . IsValid )
5	{
6	if ( User . Identity . IsAuthenticated )
7	{
8	try
9	{
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文件，在路由中加入以下路由：

1	routes . MapRoute (
2	" Comment1 " , // Route name
3	" Comment/AddComment/{id} " , // URL with parameters
4	new { controller = " Comment " , action = " AddComment " , id = 1 } // Parameter defaults
5	) ;
6
7	routes . MapRoute (
8	" Comment " , // Route name
9	" Comment/{id}/{page} " , // URL with parameters
10	new { controller = " Comment " , action = " Index " , page = 1 } // Parameter defaults
11	) ;
12

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