Asp.net MVC 3实例学习之ExtShop(四)——完成产品列表页
在完成产品列表页前要做一些准备功夫。首先是去下载MvcPager用了为产品列表分页。下载的可能是基于MVC 2的,没关系,可以用在MVC 3上。如果有担心,下载源代码重新编译一次好了。下载后将DLL添加到引用里。
接着是要修改一下路由以实现“Catalog/List/[id]/[page]”的访问。打开“Global.asax.cs”文件,然后在默认路由之前添加以下代码:
1 | routes . MapRoute ( |
2 | " Catalog " , // Route name |
3 | " Catalog/List/{id}/{page} " , // URL with parameters |
4 | new { controller = " Catalog " , action = " List " , page = 1 } // Parameter defaults |
5 | ) ; |
6 |
现在打开CatalogController.cs文件,在文件头添加对MvcPager的引用,代码如下:
1 | using Webdiyer . WebControls . Mvc; |
然后修改Index操作的代码如下:
1 | public ActionResult Index ( int? id ) |
2 | { |
3 | PagedList < T_Products > q = dc . T_Products . OrderByDescending ( m = > m . CreateTime ) . ToPagedList ( id ?? 1 , 8 ) ; |
4 | return View ( q ) ; |
5 | } |
6 |
代码传入的id是页码而不是产品分类编码,这个要注意。因为要使用分页,所以传递给视图的是PagedList对象,而不是Queryable,这也是要注意的地方。因而,查询结果需要通过toPagedList方法将Queryable对象转换为PagedList对象。第1个参数是当前页面,如果id为空,则默认为第1页。第2个参数是每页显示的产品数量,在这里是8个。
在“Index”上单击鼠标右键,选择“添加视图”( ,今天换了中文版,菜单也变了)。在视图中添加以下代码:
1 | @ using Webdiyer . WebControls . Mvc ; |
2 | @ model PagedList < Extshop . Models . T_Products > |
3 | |
4 | @ { |
5 | ViewBag . Title = " 产品列表 " ; |
6 | PageData [ " id " ] = " " ; |
7 | } |
8 | < div class = " nav " > |
9 | < a href = " @Url.Action( " " , " Catalog " ) " > 产品 < / a > |
10 | < / div > < br / > |
11 | < div id = " contentMain " style = " width:760px; " > |
12 | < span class = " header " style = " width:750px; " > 产品列表 < / span > |
13 | @ { |
14 | foreach ( var c in Model ) |
15 | { |
16 | < ul > |
17 | < li > < a href = ' @ Url . Action ( " Details " , " Product " , new { id = c . ProductID } ) ' > < img src = ' / Images / products/ @ c . SamllImageUrl ' alt = " @c.Title " / > < / a > < / li > |
18 | < li class = ' title ' > < a href = ' @ Url .Action ( " Details " , " Product " , new { id = c . ProductID } ) ' > @ c . Title< / a > < / li > |
19 | < li > 市场价: < del > @ c . MarketPrice . ToString ( "C " ) < / del > < / li > |
20 | < li > 当前价: @ c . UnitPrice . ToString ( " C " ) < /li > |
21 | < li > < span class = " rating-title " > 评 价: < /span > |
22 | < div class = ' rating ' id = "@c.ProductID.ToString( " rat - 0 " ) " > |
23 | < input name = "@c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = "disabled " value = " 1 " @ ( c . TotalRating = = 1 ? " checked='checked' " : "" ) / > |
24 | < input name = "@c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = "disabled " value = " 2 " @ ( c . TotalRating = = 2 ? " checked='checked' " : "" ) / > |
25 | < input name = "@c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = "disabled " value = " 3 " @ ( c . TotalRating = = 3 ? " checked='checked' " : "" ) / > |
26 | < input name = "@c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = "disabled " value = " 4 " @ ( c . TotalRating = = 4 ? " checked='checked' " : "" ) / > |
27 | < input name = "@c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = "disabled " value = " 5 " @ ( c . TotalRating = = 5 ? " checked='checked' " : "" ) / > |
28 | < / div > |
29 | < / li > |
30 | < / ul > |
31 | } |
32 | } |
33 | < div class = " clear " > < / div > |
34 | < div class = ' pagenav ' > @ Html . Pager ( Model , new PagerOptions { PageIndexParameterName = " id " } ) < / div > |
35 | < / div > |
36 | |
37 | < script type = " text/javascript " > |
38 | jQuery ( function ( ) { |
39 | $ ( " div .rating " ) . stars ( ) ; |
40 | } ) ; |
41 | < / script > |
42 |
代码第一句引用MvcPager,第二句定义接收的数据模型类型。因为是所以产品列表,所以PageData["id"]设置为空字符串。其余代码和首页的差不多。第34句使用HTML方式显示分页代码。这里要注意的是PagerOptions选项中的PageIndexParameterName要设置为id,因为操作中接收的当前页参数是以id定义的。
页面需要正常显示,还需要在Site.css中添加以下代码:
1 | #contentMain .clear { clear : both ; } |
2 | #contentMain .pagenav { width : 760px ; text-align : center ; margin-bottom : 10px ; } |
切换回CatalogController.cs文件,在Index操作下添加一个List操作,其代码如下:
1 | public ActionResult List(string id, int? page) |
2 | { |
3 | ViewData["id"] = id; |
4 | PagedList q = dc.T_Products |
5 | .Where(m => dc.T_Categories.Where(n => n.CategoryID.Substring(0, id.Length) == id).Select(n => n.CategoryID ).Contains(m.CategoryID)) |
6 | .OrderByDescending(m => m.CreateTime).ToPagedList(page ?? 1, 4); |
7 | return View(q); |
8 | } |
9 |
从代码可以看到,List操作有两个参数,第1个是分类id,第2个是当前页号。第3行通过ViewData["id"]向视图传递当前的分类id,以更新左边分类列表以及显示导航条。其余的和Index操作差不多。现在为List操作创建一个视图,视图内代码如下:
1 | @ using Webdiyer . WebControls . Mvc ; |
2 | @ model PagedList < Extshop . Models . T_Products > |
3 | @ { |
4 | ViewBag . Title = " 产品列表 " ; |
5 | PageData [ " id " ] = ViewData [ " id " ] ; |
6 | } |
7 | |
8 | < div class = " nav " > |
9 | < a href = " @Url.Action( " " , " Catalog " ) " > 产品 < / a > |
10 | @ { Html . RenderAction ( " Navbar " , " Catalog " , new { id = ViewData [ " id " ] } ) ; } |
11 | < / div > < br / > |
12 | < div id = " contentMain " style = " width:760px; " > |
13 | < span class = " header " style = " width:750px; " > 产品列表 < / span > |
14 | @ { |
15 | foreach ( var c in Model ) |
16 | { |
17 | < ul > |
18 | < li > < a href = ' @ Url . Action ( " Details " , " Product " , new { id = c . ProductID } ) ' > < img src = ' / Images / products/ @ c . SamllImageUrl ' alt = " @c.Title " / > < / a > < / li > |
19 | < li class = ' title ' > < a href = ' @ Url .Action ( " Details " , " Product " , new { id = c . ProductID } ) ' > @ c .Title < / a > < / li > |
20 | < li > 市场价: < del > @ c . MarketPrice . ToString (" C " ) < / del > < / li > |
21 | < li > 当前价: @ c . UnitPrice . ToString ( " C " ) </ li > |
22 | < li > < span class = " rating-title " > 评 价: < /span > |
23 | < div class = ' rating ' id = "@c.ProductID.ToString( " rat - 0 " ) " > |
24 | < input name = "@c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = "disabled " value = " 1 " @ ( c . TotalRating = = 1 ? " checked='checked' " : "" ) / > |
25 | < input name = "@c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = "disabled " value = " 2 " @ ( c . TotalRating = = 2 ? " checked='checked' " : "" ) / > |
26 | < input name = "@c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = "disabled " value = " 3 " @ ( c . TotalRating = = 3 ? " checked='checked' " : "" ) / > |
27 | < input name = "@c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = "disabled " value = " 4 " @ ( c . TotalRating = = 4 ? " checked='checked' " : "" ) / > |
28 | < input name = "@c.ProductID.ToString( " Star0 " ) " type = " radio " class = " star " disabled = "disabled " value = " 5 " @ ( c . TotalRating = = 5 ? " checked='checked' " : "" ) / > |
29 | < / div > |
30 | < / li > |
31 | < / ul > |
32 | } |
33 | } |
34 | < div class = " clear " > < / div > |
35 | < div class = ' pagenav ' > @ Html . Pager ( Model , new PagerOptions { PageIndexParameterName = " page " } ) < / div > |
36 | < / div > |
37 | |
38 | < script type = " text/javascript " > |
39 | jQuery ( function ( ) { |
40 | $ ( " div .rating " ) . stars ( ) ; |
41 | } ) ; |
42 | < / script > |
43 | |
44 | |
45 |
代码第10行通过一个分部视图显示导航菜单。第35行要注意PageIndexParameterName是“page”,而不是Index视图的“id”了。
下一步要做的是完成导航条的显示。将文件切换回CatalogController.cs文件,添加一个名称为“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 |
代码首先获取了当前分类的父类编号,然后从数据库一次查询出所有类别并排序。现在为该子操作创建一个分部视图,视图代码如下:
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 | } |
代码中,“>>”的显示必须用Html的Raw方法显示,不然会提示错误,使用“>”也不行,估计是和Razor的语法有冲突。是否有其它办法,没去研究了。
至此,产品列表页的就已经完成了。
BTW:因为项目还没完成,所以没考虑提供源代码,但有读者希望在看文章的同时能提供源代码做参考,所以从本文开始,每完成一节,就提供到该节的代码。
源代码:http://download.csdn.net/source/2996287
Asp.net MVC 3实例学习之ExtShop(四)——完成产品列表页的更多相关文章
- ASP.NET MVC 5 学习教程:修改视图和布局页
原文 ASP.NET MVC 5 学习教程:修改视图和布局页 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 创建连接字符串 ...
- ASP.NET MVC 网站开发总结(四)——校友平台开发总结
又历经一个多月的努力,学校的一个校友平台项目也接近内测的尾声了,简单的总结一下这次的项目开发. 与上次做Wing工作室的门户网站相比,同样是团队开发,参与的人员多了一个,用的时间也差不多一个月,但从总 ...
- ASP.NET MVC下使用AngularJs语言(四):$window.alert
判断文本框是否有填写,没有填写使用angularjs的$window.alert来提示用户. 创建一个ASP.NET MVC控制器: 接下来是准备一个angularjs的控制器: pilotApp.c ...
- ASP.NET MVC之下拉框绑定四种方式(十)
前言 上两节我们讲了文件上传的问题,关于这个上传的问题还未结束,我也在花时间做做分割大文件处理以及显示进度的问题,到时完成的话再发表,为了不耽误学习MVC其他内容的计划,我们今天开始好好讲讲关于MVC ...
- ASP.NET MVC 设置Area中 Controller 的方法 默认启动页
MVC中通常分区域编程,互不干扰,如果需要设置某个区域下面的某个控制器下面的某个方法为默认启动页的话,直接修改项目的路由如下: public static void RegisterRoutes(Ro ...
- 《React后台管理系统实战 :四》产品分类管理页:添加产品分类、修改(更新)产品分类
一.静态页面 目录结构 F:\Test\react-demo\admin-client\src\pages\admin\category add-cate-form.jsx index.jsx ind ...
- ASP.Net请求处理机制初步探索之旅 - Part 5 ASP.Net MVC请求处理流程
好听的歌 我一直觉得看一篇文章再听一首好听的歌,真是种享受.于是,我在这里嵌入一首好听的歌,当然你觉得不想听的话可以点击停止,歌曲 from 王菲 <梦中人>: --> 开篇:上一篇 ...
- ASP.NET MVC 4.0的Action Filter
有时候你想在调用action方法之前或者action方法之后处理一些逻辑,为了支持这个,ASP.NET MVC允许你自定义创建action过滤器.Action过滤器是自定义的Attributes,用来 ...
- ASP.Net MVC请求处理流程
ASP.Net MVC请求处理流程 好听的歌 我一直觉得看一篇文章再听一首好听的歌,真是种享受.于是,我在这里嵌入一首好听的歌,当然你觉得不想听的话可以点击停止,歌曲 from 王菲 <梦中人& ...
随机推荐
- File not found images\Thumbs.db.
启动eclipse正常,部署项目的时候发生这个错误. 解决办法: 1. 从tomcat中删除这个项目,并清空work目录下的缓存 2. 在eclipse中执行project>Clean>C ...
- JS数组2(冒泡排列、数组里面查找数据)
数组 一.冒泡排列 对数组attr = [1,8,6,4,5,3,7,2,9]进行由大到小排列,用冒泡排列的方法排列时,会对数组进行比较互换.如果前一个数字较大,这2个元素排列方式不变,如果后一个元素 ...
- Spring boot教程
1.首先是新建Maven工程 2.引入Pom依赖 3.新建一个Controller 4.运行Main方法 5.浏览器访问 pom.xml <project xmlns="http:// ...
- ASP.NET中读取excel内容并显示
项目中经常会用到把excel的文件内容导入到数据库中的,刚刚花了点时间,做了个例子,基本上能实现导入Excel后显示的功能吧,导入的excel文件得是xls,即是2003的. 代码思路如下:要 ...
- Extjs文本输入域
var form = Ext.create('Ext.form.Panel', { renderTo: Ext.getBody(), frame: tr ...
- MAC OS下使用Xcode进行GLSL编程的配置过程
整理自之前使用的163博客原创文章. GLSL项目中需要使用GLEW库,因此先要安装GLEW库和在Xcode中配置GLEW.要使GLEW在Xcode中被正确链接,又需要通过MacPorts来安装GLE ...
- listview优化 汇总
1,listview加载性能优化ViewHolder 转自: http://blog.csdn.net/jacman/article/details/7087995 在android开发中Listvi ...
- UVA 10574 - Counting Rectangles 计数
Given n points on the XY plane, count how many regular rectangles are formed. A rectangle is regular ...
- UVA 10673 扩展欧几里得
题意:给出x 和k,求解p和q使得等式x = p[x / k] + q [ x / k], 两个[x / k]分别为向下取整和向上取整 题解:扩展欧几里得 //meek///#include<b ...
- Django视频教程 - 基于Python的Web框架(全13集)
Django是由Python驱动的开源模型-视图-控制器(MVC)风格的Web应用程序框架,使用Django可以在即可分钟内快速开发一个高品质易维护数据库驱动的应用程序.下面是一大坨关于Django应 ...