Asp.net MVC 3实例学习之ExtShop（三）—完成首页
首页主要包括两部分，主体部分显示15个最新的的商品，右边则显示10条最新的优惠信息。主体部分可以直接使用传入的数据生成，也可以通过分类列表的方法生成，看个人喜好。而优惠信息则使用分类的方法生成。
在完成首页前，需要做点准备功夫，因为需要显示评价，所以首先到地址“http://plugins.jquery.com/project/Star_Rating_widget ”下载一个名称为“jQuery UI Stars”的插件。插件下载后，将jquery.ui.stars.css文件添加到Content文件夹，jquery.ui.stars.min.js文件添加到Scripts文件夹，而jquery.ui.stars.gif则放到images文件夹。最后还需要修改一下jquery.ui.stars.css文件中背景图片的路径。
在母版页_Layout.cshtml的head中增加以下文件的引用：
1 < link href = " @Url.Content( " ~ / Content / jquery . ui . stars . css " ) " rel = " stylesheet " type = " text/css " / >
2 < script src = " @Url.Content( " ~ / Scripts / jquery - ui . min . js " ) " type = " text/javascript " > < / script >
3 < script src = " @Url.Content( " ~ / Scripts / jquery . ui . stars . min . js " ) " type = " text/javascript " > < / script >
4现在要完成首页的整体布局，打开Index.cshtml，讲ViewBag.Title修改为“首页——Ext商店”，然后加入以下代码：
1 < div id = " contentMain " >
2 < span class = " header " > 最新产品 < / span >
3 @ { Html . RenderAction ( " Homepage " , " Product " ) ; }
4 < / div >
5 < div id = " contentRight " >
6 < span class = " header " > 优惠信息 < / span >
7 @ { Html . RenderAction ( " RightList " , " News " ) ; }
8 < / div >
9代码中，最新产品和优惠信息的数据都将从partial视图获取。下面在Site.css中加入以下css：
1 #contentMain { float : left ; width : 580px ; display : block ; border-left : 1px solid #d3d3d3 ; border-right : 1px solid #d3d3d3 ; border-bottom : 1px solid #d3d3d3 ; }
2 #contentMain .header { width : 570px ; height : 28px ; background : url(/images/bk.gif) repeat-x ; line-height : 28px ; display : block ; color : #000 ; font-size : 14px ; margin : 0px ; padding-left : 10px ; }
3 #contentMain ul { float : left ; width : 180px ; display : block ; padding : 0 0 10px 10px ; }
4 #contentMain li { list-style-type : none ; }
5 #contentMain .title { height : 56px ; line-height : 14px ; width : 170px ; display : block ; font-size : 12px ; }
6 #contentMain .rating -title { float : left ; }
7 #contentMain .rating { float : left ; width : 90px ; }
8 #contentMain img { border : 0px ; width : 170px ; height : 190px ; }
9 #contentMain a { text-decoration : none ; color : #000 ; }
10 #contentMain a:hover { text-decoration : underline ; }
11 #contentMain a:visited { text-decoration : none ; color : #000 ; }
12 #contentRight { float : right ; width : 200px ; display : block ; border : 1px solid #d3d3d3 ; padding : 1px ; }
13 #contentRight .header { background : url(/images/leftHeader.jpg) repeat-x ; height : 28px ; line-height : 28px ; width : 190px ; display : block ; color : #fff ; font-size : 14px ; margin : 0px ; }
14 #contentRight span { width : 180px ; display : block ; height : 20px ; line-height : 20px ; background : transparent url(/images/point02.jpg) no-repeat scroll 0 10px ; padding-left : 10px ; margin-left : 5px ; }
15 #contentRight a { color : #000 ; }
16 #contentRight a:hover { text-decoration : underline ; }
17 #contentRight a:visited { color : #000 ; }
18现在要完成最新产品的显示。在Controllers文件夹添加一个“ProductController”的控制器，首先加入对“Extshop.Models”的引用，然后添加以下代码：
1 [ ChildActionOnly ]
2 public ActionResult Homepage ( )
3 {
4 var q = dc . T_Products . OrderByDescending ( m = > m . CreateTime ) . Take ( 15 ) ;
5 return PartialView ( q ) ;
6 }
7代码只是很简单的从数据库取出15条记录，然后返回Partial视图。在“Homepage”上单击鼠标右键，然后创建一个Partial视图，在视图中添加以下代码：
1 @ model IEnumerable < Extshop . Models . T_Products >
2 @ {
3 foreach ( var c in Model )
4 {
5 < ul >
6 < li > < a href = @ Url . Action ( " Details " , " Product " , new { id = c . ProductID } ) > < img src = / Images / products / @ c . SamllImageUrl alt = " @c.Title " / > < / a > < / li >
7 < li class = title > < a href = @ Url . Action ( " Details " , " Product " , new { id = c . ProductID } ) > @ c . Title < / a > < / li >
8 < li > 市场价： < del >
补充：Web开发 , ASP.Net ,
