用@Html.EditorFor在MVC3中封装带表单(Form)提交的分页控件(通用代码)

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)提交”,因为有的时候我们需要检索页面,这样点分页的连接的话就可以把页面上的检索条件也传到后台。所以,我们的分页代码中的链接不直接使用链接,而可以使用提交表单的链接:

View Code
复制代码
    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:

View Code
复制代码
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目录下:

View Code
复制代码
 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> &nbsp;
58 页码:<span style="color:Red">@Model.PageNumber/@Model.TotalPageCount</span> &nbsp;
59 
60 @if(Model.PageNumber <= 1)
61 {
62     @:[首页]
63     @:[上一页]
64 }
65 else
66 {
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 else
77 {
78     <a href="javascript:NextPage();">[下一页]</a>
79     <a href="javascript:LastPage();">[末页]</a>
80 }  
81 &nbsp; 
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>
9495 
96 </div>
复制代码

第一行用于描述模板里面Model的类型,就是我们前面定义的Pager,注意修改Namespace。第二行跟第12行有关系,具体请看《在MVC3 中给HtmlHelper 添加扩展(Extension)来消除魔鬼代码》,如果不想看的话,也没关系,直接把第2行删除,把第12行改为return document.getElementById("Pager.PageNumber");。如果还想使用第12行代码,那么把下面这个扩展放到你的项目里:

View Code
复制代码
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")就可以把分页控件显示在页面上了。

就这么多吧,不明白可以随时问我:)

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值