用@Html.EditorFor在MVC3中封装带表单(Form)提交的分页控件(通用代码)
来源:互联网 发布:java程序员简历包装 编辑:程序博客网 时间:2024/05/11 02:29
MVC3框架好像没有提供通用的用于分页的控件,有些好心网友提供了一些不错的控件。可惜我这个人没耐心,不愿意花一点时间去学习别人控件的用法,就自己花了点时间写了一段简单通用代码,拿出来和那家分享。不是我想去重复发明轮子,只是觉得这个分页控件内容太少,自己做一个的时间可能要少于学习第三方控件使用的时间,并且维护起来还方便。另外,MVC3实现一个类似的功能非常方便,也不需要做一个专用控件那么复杂。
对了,忘了补充一下,本人水平所限(非常初级),故高手和批评家轻绕行:),跟我一样菜鸟请留下。
在正式开始写代码之前,先了解一下一点预备知识:@Html.EditorFor。这个东西详细了我也讲不明白,我使用的这点功能是我自己试出来的,我只介绍我用的这点功能,想了解更详细的话请自己去查。
@Html.EditorFor可以通过一个模板视图(Template View)编辑和显示一个Model的内容。具体语法:Html.EditorFor(m => m.Pager, "Pager"),第一个参数是用来传递Model的lamda表达式,第二个参数是 Partial Template View的名字。Partial Template View缺省放在Views->Shared->EditorTemplates,如果想换目录的话请自行查资料,我不知道怎么换,呵呵。如果想换Area的目录,我知道,可以问我。
在Partial Template View里面,@Html.TextBoxFor等方法可以直接编辑模板对应Model里面的数据,Form提交提交时可以把数据放到Model里面传到后台,前提是模板Model必须是页面Model的一个属性,比如UserListModel.Pager,MVC3框架会自动对应过去,多包几层也没关系,如UserListModel.XX.BB.Pager,我试过,请放心用。
我们的通用分页代码可以用一个Partial Template View来展示,可以取名为Pager.cshtml。
@Html.EditorFor就说这么多,下面说一下标题中为什么要有“表单(Form)提交”,因为有的时候我们需要检索页面,这样点分页的连接的话就可以把页面上的检索条件也传到后台。所以,我们的分页代码中的链接不直接使用链接,而可以使用提交表单的链接:
function SubmitDefaultForm() { document.forms[0].submit(); } function GetPageNumberCtrl() { return document.getElementById("@Html.IdFor(m => m.PageNumber)"); } function FirstPage() { var hidenCtrl = GetPageNumberCtrl(); if (hidenCtrl != null) { hidenCtrl.value = 1; } SubmitDefaultForm(); } <a href="javascript:FirstPage();">[首页]</a>
这段代码,现在只看JS相关的就可以了,尤其划掉的代码先不要管。我假设整个画面只有一个FORM,所以使用document.forms[0].submit();,如果不是一个FORM的话请修改这个FORM提交代码。
啰嗦了这么多,现在步入正题,先看分页的样子(可以情况自己修改):
根据页面显示,给这个分页控件(或者通用代码)见一个Model:
using System;using System.Collections.Generic;using System.Linq;using System.Text;namespace YourNameSpace{ public class Pager { /// <summary> /// 当前页码 /// </summary> public int PageNumber { get; set; } /// <summary> /// 总页数 /// </summary> public int TotalPageCount { get { double pageCount = (double)TotalItemsCount / (double)PageSize; pageCount = Math.Ceiling(pageCount); return (int)pageCount; } } /// <summary> /// 总记录数 /// </summary> public int TotalItemsCount { get; set; } /// <summary> /// 每页显示记录数 /// </summary> public int PageSize { get; set; } public Pager() { PageNumber = 1; TotalItemsCount = 0; PageSize = 20; } }}
这个段代码复制到一个文件里面可以直接使用。注意修改NameSpace就可以了。
然后做一个Partial Template View名字为Pager.cshtml,放在Views->Shared->EditorTemplates目录下:
1 @model YourNameSpace.Pager 2 @using WebBricks.Framework.Mvc.Html; 3 4 <div style="width:100%; text-align:right"> 5 <script language="javascript" type="text/javascript"> 6 7 function SubmitDefaultForm() { 8 document.forms[0].submit(); 9 }10 11 function GetPageNumberCtrl() {12 return document.getElementById("@Html.IdFor(m => m.PageNumber)");13 }14 15 function FirstPage() {16 var hidenCtrl = GetPageNumberCtrl();17 if (hidenCtrl != null) {18 hidenCtrl.value = 1;19 }20 SubmitDefaultForm();21 }22 23 function PreviousPage(){24 var hidenCtrl = GetPageNumberCtrl();25 if (hidenCtrl != null) {26 hidenCtrl.value = parseInt(hidenCtrl.value) - 1;27 }28 SubmitDefaultForm();29 }30 31 function NextPage() {32 var hidenCtrl = GetPageNumberCtrl();33 if (hidenCtrl != null) {34 hidenCtrl.value = parseInt(hidenCtrl.value) + 1;35 }36 SubmitDefaultForm();37 }38 39 function LastPage(){40 var hidenCtrl = GetPageNumberCtrl();41 if (hidenCtrl != null) {42 hidenCtrl.value = "@Model.TotalPageCount";43 }44 SubmitDefaultForm();45 }46 47 function ChangeTo(toPage){48 var hidenCtrl = GetPageNumberCtrl();49 if (hidenCtrl != null) {50 hidenCtrl.value = toPage;51 }52 SubmitDefaultForm();53 }54 55 </script>56 @Html.HiddenFor(m=>m.PageNumber)57 记录数:<span style="color:Red">@Model.TotalItemsCount</span> 58 页码:<span style="color:Red">@Model.PageNumber/@Model.TotalPageCount</span> 59 60 @if(Model.PageNumber <= 1)61 {62 @:[首页]63 @:[上一页]64 }65 else66 {67 <a href="javascript:FirstPage();">[首页]</a>68 <a href="javascript:PreviousPage();">[上一页]</a>69 } 70 71 @if (Model.PageNumber >= Model.TotalPageCount)72 {73 @:[下一页]74 @:[末页]75 }76 else77 {78 <a href="javascript:NextPage();">[下一页]</a>79 <a href="javascript:LastPage();">[末页]</a>80 } 81 82 跳到第83 <select onchange="ChangeTo(this.options[this.options.selectedIndex].value);">84 @for(int i = 1;i <= Model.TotalPageCount; i++)85 {86 var selected = "";87 if(i == Model.PageNumber)88 {89 selected = "selected='selected'";90 }91 <option value='@i' @selected >@i</option>92 }93 </select>94 页95 96 </div>
第一行用于描述模板里面Model的类型,就是我们前面定义的Pager,注意修改Namespace。第二行跟第12行有关系,具体请看《在MVC3 中给HtmlHelper 添加扩展(Extension)来消除魔鬼代码》,如果不想看的话,也没关系,直接把第2行删除,把第12行改为return document.getElementById("Pager.PageNumber");。如果还想使用第12行代码,那么把下面这个扩展放到你的项目里:
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Linq.Expressions;using System.Web.Mvc;namespace YourProject.Mvc.Html{ public static class HtmlHelperExtensions { public static string IdFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression) { return html.ViewData.TemplateInfo.GetFullHtmlFieldId(ExpressionHelper.GetExpressionText(expression)); } public static string NameFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression) { return html.ViewData.TemplateInfo.GetFullHtmlFieldName(ExpressionHelper.GetExpressionText(expression)); } }}
同样需要注意修改Name space。
在页面Model里面这样写:
public class UserListModel : ModelBase { public string KeyWord { get; set; } public IEnumerable<User> UserList; public Pager Pager { get; set; } }
在Controller里面这样用:
Pager pager = new Pager();
model.Pager = pager;
model.UserList = _userService.GetPage(string.Empty, pager);
return View(model);
_userService.GetPage(string.Empty, pager)里面会对Pager的各个属性进行赋值,点击分页链接的时候,当前页码的数据会通过MVC3直接放到pager.PageNumber里面。
需要显示分页的页面视图这么写:@Html.EditorFor(m => m.Pager, "Pager")就可以把分页控件显示在页面上了。
就这么多吧,不明白可以随时问我:)
- 用@Html.EditorFor在MVC3中封装带表单(Form)提交的分页控件(通用代码)
- 在MVC3中使用jquery及jquery.form.js来提交表单
- 今天遇到一个问题,原来在html的form中如果只有一个type="text"的控件,如果在text中点击回车键,就是自动提交表单!
- form 表单提交, html中ID, name 的区别
- html - form提交表单
- DWZ控件中Ajax提交form表单
- html form onsubmit表单提交的问题
- 在JS中写form表单的提交与判断
- WebBrowser控件表单(form)的自动填写和提交
- 相同name的控件Form表单提交
- HTML中<form>表单利用 post 提交与利用 get 提交时的区别
- 用JS提交参数创建form表单在FireFox中遇到的问题
- combo在form表单提交时传值的问题(ext2)
- html form 表单控件的类型
- html form表单提交处理
- html form多表单切换提交的demo代码实例下载
- 表单提交数据的方式 怎么在服务器获取 服务器控件 html服务器控件 提交服务器之前的验证 前台网页编写c#代码
- 如何在 HTML form 表单提交时验证信息!?
- 直接插入排序
- 3.spring bean的作用域(是否单例):测试
- 最大流问题
- Flexigrid例子一: 添加数据但不绑定server-side请求
- 我要尽快赚取十万,一百万。
- 用@Html.EditorFor在MVC3中封装带表单(Form)提交的分页控件(通用代码)
- 1.Spring完成自动装配,两种方式:bean
- UC/GUI 移植 STM32F103VE
- 黑马程序员_C#语法(1)——工程架构
- org.hibernate.MappingException: Unknown entity
- 2.Spring完成自动装配,两种方式:applicationContext-common.xml
- 2012年8月25日学习笔记---顺序容器
- ubuntu上安装使用php的icnov函数
- 3.Spring完成自动装配,两种方式:测试