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	<