Asp.net MVC 3实例学习之ExtShop(三)――完成首页
2011-01-20 22:29
537 查看
首页主要包括两部分,主体部分显示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中增加以下文件的引用:
现在要完成首页的整体布局,打开Index.cshtml,讲ViewBag.Title修改为“首页——Ext商店”,然后加入以下代码:
代码中,最新产品和优惠信息的数据都将从partial视图获取。下面在Site.css中加入以下css:
现在要完成最新产品的显示。在Controllers文件夹添加一个“ProductController”的控制器,首先加入对“Extshop.Models”的引用,然后添加以下代码:
代码只是很简单的从数据库取出15条记录,然后返回Partial视图。在“Homepage”上单击鼠标右键,然后创建一个Partial视图,在视图中添加以下代码:
代码中12到16行的作用是生成评价图,在这里需要给每一组input不同的“name”属性以区别分组,因为产品编号是唯一的,所以使用它作为名称的一部分是最好的。
要使评价图显示,还需要在首页中添加以下代码:
该段代码的作用是在页面显示加载完毕后,通过div元素的class属性获取所有生成评价图的对象,对它们进行初始化。
最后需要完成的是右边优惠信息的显示。在Controllers文件夹下添加一个“NewsController”控制器并添加需要的引用,然后添加以下代码:
代码也很简单,获取10条最新优惠信息后返回Partial视图。在“RightList”上单击鼠标右键,然后创建一个Partial视图,在视图中添加以下代码:
代码也是相当的简单,逐条显示优惠信息的标题就行了。
这样,首页的功能就已经完成了,在浏览器打开,将看到如图1所示的结果。
在完成首页前,需要做点准备功夫,因为需要显示评价,所以首先到地址“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中增加以下文件的引用:
< link href = " @Url.Content( " ~ / Content / jquery . ui . stars . css " ) " rel = " stylesheet " type = " text/css " / > < script src = " @Url.Content( " ~ / Scripts / jquery - ui . min . js " ) " type = " text/javascript " > < / script > < script src = " @Url.Content( " ~ / Scripts / jquery . ui . stars . min . js " ) " type = " text/javascript " > < / script >
现在要完成首页的整体布局,打开Index.cshtml,讲ViewBag.Title修改为“首页——Ext商店”,然后加入以下代码:
< div id = " contentMain " > < span class = " header " > 最新产品 < / span > @ { Html . RenderAction ( " Homepage " , " Product " ) ; } < / div > < div id = " contentRight " > < span class = " header " > 优惠信息 < / span > @ { Html . RenderAction ( " RightList " , " News " ) ; } < / div >
代码中,最新产品和优惠信息的数据都将从partial视图获取。下面在Site.css中加入以下css:
#contentMain { float : left ; width : 580px ; display : block ; border-left : 1px solid #d3d3d3 ; border-right : 1px solid #d3d3d3 ; border-bottom : 1px solid #d3d3d3 ; } #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 ; } #contentMain ul { float : left ; width : 180px ; display : block ; padding : 0 0 10px 10px ; } #contentMain li { list-style-type : none ; } #contentMain .title { height : 56px ; line-height : 14px ; width : 170px ; display : block ; font-size : 12px ; } #contentMain .rating -title { float : left ; } #contentMain .rating { float : left ; width : 90px ; } #contentMain img { border : 0px ; width : 170px ; height : 190px ; } #contentMain a { text-decoration : none ; color : #000 ; } #contentMain a:hover { text-decoration : underline ; } #contentMain a:visited { text-decoration : none ; color : #000 ; } #contentRight { float : right ; width : 200px ; display : block ; border : 1px solid #d3d3d3 ; padding : 1px ; } #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 ; } #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 ; } #contentRight a { color : #000 ; } #contentRight a:hover { text-decoration : underline ; } #contentRight a:visited { color : #000 ; }
现在要完成最新产品的显示。在Controllers文件夹添加一个“ProductController”的控制器,首先加入对“Extshop.Models”的引用,然后添加以下代码:
[ ChildActionOnly ] public ActionResult Homepage ( ) { var q = dc . T_Products . OrderByDescending ( m = > m . CreateTime ) . Take ( 15 ) ; return PartialView ( q ) ; }
代码只是很简单的从数据库取出15条记录,然后返回Partial视图。在“Homepage”上单击鼠标右键,然后创建一个Partial视图,在视图中添加以下代码:
@ model IEnumerable < Extshop . Models . T_Products > @ { foreach ( var c in Model ) { < ul > < li > < a href = ' @ Url . Action ( " Details " , " Product " , new { id = c . ProductID } ) ' > < img src = ' / Images / products / @ c . SamllImageUrl ' alt = " @c.Title " / > < / a > < / li > < li class = ' title ' > < a href = ' @ Url . Action ( " Details " , " Product " , new { id = c . ProductID } ) ' > @ c . Title < / a > < / li > < li > 市场价: < del > @ c . MarketPrice . ToString ( " C " ) < / del > < / li > < li > 当前价: @ c . UnitPrice . ToString ( " C " ) < / li > < li > < span class = " rating-title " > 评 价: < / span > < div class = ' rating ' id = " @c.ProductID.ToString( " rat - 0 " ) " > < input name = " @c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = " disabled " value = " 1 " @ ( c . TotalRating = = 1 ? " checked='checked' " : " " ) / > < input name = " @c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = " disabled " value = " 2 " @ ( c . TotalRating = = 2 ? " checked='checked' " : " " ) / > < input name = " @c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = " disabled " value = " 3 " @ ( c . TotalRating = = 3 ? " checked='checked' " : " " ) / > < input name = " @c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = " disabled " value = " 4 " @ ( c . TotalRating = = 4 ? " checked='checked' " : " " ) / > < input name = " @c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = " disabled " value = " 5 " @ ( c . TotalRating = = 5 ? " checked='checked' " : " " ) / > < / div > < / li > < / ul > } }
代码中12到16行的作用是生成评价图,在这里需要给每一组input不同的“name”属性以区别分组,因为产品编号是唯一的,所以使用它作为名称的一部分是最好的。
要使评价图显示,还需要在首页中添加以下代码:
< script type = " text/javascript " > jQuery ( function ( ) { $ ( " div .rating " ) . stars ( ) ; } ) ; < / script >
该段代码的作用是在页面显示加载完毕后,通过div元素的class属性获取所有生成评价图的对象,对它们进行初始化。
最后需要完成的是右边优惠信息的显示。在Controllers文件夹下添加一个“NewsController”控制器并添加需要的引用,然后添加以下代码:
[ ChildActionOnly ] public ActionResult RightList ( ) { var q = dc . T_News . OrderByDescending ( m = > m . CreateTime ) . Take ( 10 ) ; return PartialView ( q ) ; }
代码也很简单,获取10条最新优惠信息后返回Partial视图。在“RightList”上单击鼠标右键,然后创建一个Partial视图,在视图中添加以下代码:
@ model IEnumerable < Extshop . Models . T_News > @ { foreach ( var c in Model ) { < span > < a href = ' @ Url . Action ( " Details " , " News " , new { id = c . NewsID } ) ' > @ c . Title < / a > < / span > } }
代码也是相当的简单,逐条显示优惠信息的标题就行了。
这样,首页的功能就已经完成了,在浏览器打开,将看到如图1所示的结果。
相关文章推荐
- Asp.net MVC 3实例学习之ExtShop(三)——完成首页
- Asp.net MVC 3实例学习之ExtShop(三)——完成首页
- Asp.net MVC 3实例学习之ExtShop(三)——完成首页
- Asp.net MVC 3实例学习之ExtShop(三)——完成首页
- Asp.net MVC 3实例学习之ExtShop(四)——完成产品列表页
- Asp.net MVC 3实例学习之ExtShop(四)——完成产品列表页
- Asp.net MVC 3实例学习之ExtShop(四)——完成产品列表页
- Asp.net MVC 3实例学习之ExtShop(四)——完成产品列表页
- Asp.net MVC 3实例学习之ExtShop(四)――完成产品列表页
- Asp.net MVC 3实例学习之ExtShop(四)——完成产品列表页
- Asp.net MVC 3实例学习之ExtShop(五)——产品详细页
- Asp.net MVC 3实例学习之ExtShop(五)——产品详细页
- Asp.net MVC 3实例学习之ExtShop(五)――产品详细页
- Asp.net MVC 3实例学习之ExtShop(五)——产品详细页
- Asp.net MVC 3实例学习之ExtShop(六)——登录对话框
- Asp.net MVC 3实例学习之ExtShop(六)——登录对话框
- Asp.net MVC 3实例学习之ExtShop(一)————创建应用并设置开发环境
- Asp.net MVC 3实例学习之ExtShop(二)——创建母版页
- Asp.net MVC 3实例学习之ExtShop(六)——登录对话框
- Asp.net MVC 3实例学习之ExtShop(一)————创建应用并设置开发环境