学习制作MVC4分页控件（上）

2024-09-27 16:51:51

浏览栏目下内容的时候肯定要用到分页，MVC4下没有带分页控件，那么就自己写一个HtmlHelper-Pager。写之前看了一些大神的分页控件，启发很大。先设想一下自己的分页控件

分页控件分普通分页（Pager）和Ajax分页（PagerAjax）两块。两块的显示相同，如图：

各部说明：

在开始写之前还要先有两个类：一个是分页设置类，一个是分页数据类。

分页的设置类包含了常用的分页参数，是为了方便保存到数据库中，可以直接在栏目中设置该栏目下每页显示的记录数；记录的计量单位：是“条”还是“篇”；记录的名称是“新闻”、“文章”还是“教程”等。

分页设置模型

分页数据类
用来提供记录列表和分页设置PagerData<T> 继承自 List<T>

想好直接之后，开始设置基础函数

1、pager的基础函数

代码如下:

Pager(this HtmlHelper htmlHelper, string actionName, string controllerName, RouteValueDictionary routeValues, PagerConfig pageConfig, string ctrlId, string cssClass, int digitalLinkNum, bool showTotalRecord, bool showCurrentPage, bool showTotalPage, bool showSelect, bool showInput)

参数说明：
actionName-动作名称；
controllerName-控制器名称；
routeValues-路由参数；
pageConfig-分页配置；
ctrlId-分页控件Id；
cssClass-分页控件css类名；
digitalLinkNum-显示的数字链接个数；
showTotalRecord-显示总记录数；
showCurrentPage-显示当前页；
showTotalPage-显示总页数；
showSelect-显示页码下拉框；
showInput-显示页码输入框。

重载可能用到参数
currentPage-当前页；
totalPage-总页数；
pageSize-每页显示记录数；
totalRecord-总记录数；
recordUnit-记录单位；
recordName-记录名称；

2、PagerAjax基础函数

代码如下:

public static MvcHtmlString PagerAjax(this HtmlHelper htmlHelper, string ctnrId, string actionName, string controllerName, RouteValueDictionary routeValues, PagerConfig pageConfig, string ctrlId, string cssClass, int digitalLinkNum, bool showTotalRecord, bool showCurrentPage, bool showTotalPage, bool showSelect, bool showInput)

参数说明：
ctnrId-内容容器Id。用于包裹ajax返回html的容器控件id
其他参数与1、pager相同
==========================
基本的东西都准备好了，写代码就快了。

右键点击Extensions文件夹，添加类PagerExtensions

命名空间改为System.Web.Mvc，在该命名空间下先写PagerConfig，再写PagerData，代码都很简单。

namespace System.Web.Mvc
{
  /// <summary>
  /// 分页配置
  /// </summary>
  public class PagerConfig
  {
    [Key]
    public int PagerConfigId { get; set; }
    /// <summary>
    /// 当前页
    /// </summary>
    [NotMapped]
    public int CurrentPage { get; set; }
    /// <summary>
    /// 每页记录数
    /// </summary>
    [Display(Name = "每页记录数", Description = "每页显示的记录数。")]
    [Required(ErrorMessage="×")]
    public int PageSize { get; set; }
    /// <summary>
    /// 总页数
    /// </summary>
    [NotMapped]
    public int TotalPage { get { return (int)Math.Ceiling(TotalRecord / (double)PageSize); } }
    /// <summary>
    /// 总记录数
    /// </summary>
    [NotMapped]
    public int TotalRecord { get; set; }
    /// <summary>
    /// 记录单位
    /// </summary>
    [Display(Name="记录单位",Description="记录的数量单位。如文章为“篇”；新闻为“条”")]
    [Required(ErrorMessage = "×")]
    public string RecordUnit { get; set; }
    /// <summary>
    /// 记录名称
    /// </summary>
    [Display(Name = "记录名称", Description = "记录的名称。如“文章”、“新闻”、“教程”等")]
    [Required(ErrorMessage = "×")]
    public string RecordName { get; set; }

    public PagerConfig()
    {
      CurrentPage = 1;
      PageSize = 20;
      RecordUnit = "条";
      RecordName = "记录";
    }
  }

  /// <summary>
  /// 分页数据
  /// </summary>
  public class PagerData<T> : List<T>
  {
    public PagerData(List<T> list, PagerConfig pagerConfig)
    {
      this.AddRange(list);
      Config = pagerConfig;
    }
    public PagerData(List<T> list, int currentPage, int pageSize, int totalRecord)
    {
      this.AddRange(list);
      Config.CurrentPage = currentPage;
      Config.PageSize = pageSize;
      Config.TotalRecord = totalRecord;
    }
    public PagerData(List<T> list, int currentPage, int pageSize, int totalRecord, string recordUnit, string recordName)
    {
      this.AddRange(list);
      Config.CurrentPage = currentPage;
      Config.PageSize = pageSize;
      Config.TotalRecord = totalRecord;
      Config.RecordUnit = recordUnit;
      Config.RecordName = recordName;
    }

    public PagerConfig Config { get; set; }
  }
}

下面到了关键部分：
在文件PagerExtensions.cs底部再添加一个命名空间namespace System.Web.Mvc.Html。
在里面添加静态类public static class PagerExtensions。
在类中间添加函数public static MvcHtmlString Pager(……)
代码也很容易就是用UrlHelper.Action生成链接的地址，再创建一个StringBuilder _strBuilder，不停的向里面附加html代码，最后使用return MvcHtmlString.Create(_strBuilder.ToString());返回MvcHtmlString。就是写的太乱啦

public static MvcHtmlString Pager(this HtmlHelper htmlHelper, string actionName, string controllerName, RouteValueDictionary routeValues, PagerConfig pageConfig, string ctrlId, string cssClass, int digitalLinkNum, bool showTotalRecord, bool showCurrentPage, bool showTotalPage, bool showSelect, bool showInput)
    {
      UrlHelper _url = new UrlHelper(htmlHelper.ViewContext.RequestContext);
      StringBuilder _strBuilder = new StringBuilder("<div id=\"" + ctrlId + "\" class=\"" + cssClass + "\">");
      if (showTotalRecord) _strBuilder.Append("共" + pageConfig.TotalRecord + pageConfig.RecordUnit + pageConfig.RecordName + " ");
      if (showCurrentPage) _strBuilder.Append("每页" + pageConfig.PageSize + pageConfig.RecordUnit + " ");
      if(showTotalPage) _strBuilder.Append("第" + pageConfig.CurrentPage + "页/共" + pageConfig.TotalPage + "页 ");
      //首页链接
      if (pageConfig.CurrentPage > 1)
      {
        routeValues["page"] = 1;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">首页</a>");
      }
      else _strBuilder.Append("<span class=\"btn\">首页</span>");
      //上一页
      if (pageConfig.CurrentPage > 1)
      {
        routeValues["page"] = pageConfig.CurrentPage - 1;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">上一页</a>");
      }
      else _strBuilder.Append("<span class=\"btn\">上一页</span>");
      //数字导航开始
      int _startPage, _endPage;
      //总页数少于要显示的页数，页码全部显示
      if (digitalLinkNum >= pageConfig.TotalPage) { _startPage = 1; _endPage = pageConfig.TotalPage; }
      else//显示指定数量的页码
      {
        int _forward = (int)Math.Ceiling(digitalLinkNum / 2.0);
        if (pageConfig.CurrentPage > _forward)//起始页码大于1
        {
          _endPage = pageConfig.CurrentPage + digitalLinkNum - _forward;
          if (_endPage > pageConfig.TotalPage)//结束页码大于总页码结束页码为最后一页
          {
            _startPage = pageConfig.TotalPage - digitalLinkNum;
            _endPage = pageConfig.TotalPage;

          }
          else _startPage = pageConfig.CurrentPage - _forward;
        }
        else//起始页码从1开始
        {
          _startPage = 1;
          _endPage = digitalLinkNum;
        }
      }
      //向上…
      if (_startPage > 1)
      {
        routeValues["page"] = _startPage - 1;
        _strBuilder.Append("<a class=\"linkbatch\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">…</a>");
      }
      //数字
      for (int i = _startPage; i <= _endPage; i++)
      {
        if (i != pageConfig.CurrentPage)
        {
          routeValues["page"] = i;
          _strBuilder.Append("<a class=\"linknum\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">" + i.ToString() + "</a>");
        }
        else
        {
          _strBuilder.Append("<span class='currentnum'>" + i.ToString() + "</span>");
        }
      }
      //向下…
      if (_endPage < pageConfig.TotalPage)
      {
        routeValues["page"] = _endPage + 1;
        _strBuilder.Append("<a class=\"linkbatch\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">…</a>");
      }
      ////数字导航结束
      //下一页和尾页
      if (pageConfig.CurrentPage < pageConfig.TotalPage)
      {
        routeValues["page"] = pageConfig.CurrentPage + 1;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">下一页</a>");
        routeValues["page"] = pageConfig.TotalPage;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">尾页</a>");
      }
      else _strBuilder.Append("<span class=\"btn\">下一页</span><span class=\"btn\">尾页</span>");
      //显示页码下拉框
      if (showSelect)
      {
        routeValues["page"] = "-nspageselecturl-";
        _strBuilder.Append(" 跳转到第<select id=\"nspagerselect\" data-url=\"" + _url.Action(actionName, controllerName, routeValues) + "\">");
        for (int i = 1; i <= pageConfig.TotalPage; i++)
        {
          if (i == pageConfig.CurrentPage) _strBuilder.Append("<option selected=\"selected\" value=\"" + i + "\">" + i + "</option>");
          else _strBuilder.Append("<option value=\"" + i + "\">" + i + "</option>");
        }
        _strBuilder.Append("</select>页");
        _strBuilder.Append("<script type=\"text/javascript\">$(\"#" + ctrlId + " #nspagerselect\").change(function () { location.href = $(\"#" + ctrlId + " #nspagerselect\").attr(\"data-url\").replace(\"-nspageselecturl-\", $(\"#" + ctrlId + " #nspagerselect\").val());});</script>");
      }
      //显示页码输入框
      if (showInput)
      {
        routeValues["page"] = "-nspagenumurl-";
        _strBuilder.Append("转到第<input id=\"nspagernum\" type=\"text\" data-url=\"" + _url.Action(actionName, controllerName, routeValues) + "\" />页");
        _strBuilder.Append("<script type=\"text/javascript\">$(\"#" + ctrlId + " #nspagernum\").keydown(function (event) {if (event.keyCode == 13) location.href = $(\"#" + ctrlId + " #nspagernum\").attr(\"data-url\").replace(\"-nspagenumurl-\", $(\"#" + ctrlId + " #nspagernum\").val()); });</script>");
      }
      _strBuilder.Append("</div>");
      return MvcHtmlString.Create(_strBuilder.ToString());
    }

PagerAjax跟Pager基本一样。不同点是在点击链接的时候Pager是转到相应页面，PagerAjax是在点击paer内的链接的时候利用jquery Post获取链接指定页面的html代码替换内容包裹容器的html。实际上就是这句jquery语句

代码如下:

PagerAjax的整个内容

public static MvcHtmlString PagerAjax(this HtmlHelper htmlHelper, string ctnrId, string actionName, string controllerName, RouteValueDictionary routeValues, PagerConfig pageConfig, string ctrlId, string cssClass, int digitalLinkNum, bool showTotalRecord, bool showCurrentPage, bool showTotalPage, bool showSelect, bool showInput)
    {
      UrlHelper _url = new UrlHelper(htmlHelper.ViewContext.RequestContext);
      StringBuilder _strBuilder = new StringBuilder("<div id=\"" + ctrlId + "\" class=\"" + cssClass + "\">");
      if (showTotalRecord) _strBuilder.Append("共" + pageConfig.TotalRecord + pageConfig.RecordUnit + pageConfig.RecordName + " ");
      if (showCurrentPage) _strBuilder.Append("每页" + pageConfig.PageSize + pageConfig.RecordUnit + " ");
      if (showTotalPage) _strBuilder.Append("第" + pageConfig.CurrentPage + "页/共" + pageConfig.TotalPage + "页 ");
      //首页链接
      if (pageConfig.CurrentPage > 1)
      {
        routeValues["page"] = 1;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">首页</a>");
      }
      else _strBuilder.Append("<span class=\"btn\">首页</span>");
      //上一页
      if (pageConfig.CurrentPage > 1)
      {
        routeValues["page"] = pageConfig.CurrentPage - 1;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">上一页</a>");
      }
      else _strBuilder.Append("<span class=\"btn\">上一页</span>");
      //数字导航开始
      int _startPage, _endPage;
      //总页数少于要显示的页数，页码全部显示
      if (digitalLinkNum >= pageConfig.TotalPage) { _startPage = 1; _endPage = pageConfig.TotalPage; }
      else//显示指定数量的页码
      {
        int _forward = (int)Math.Ceiling(digitalLinkNum / 2.0);
        if (pageConfig.CurrentPage > _forward)//起始页码大于1
        {
          _endPage = pageConfig.CurrentPage + digitalLinkNum - _forward;
          if (_endPage > pageConfig.TotalPage)//结束页码大于总页码结束页码为最后一页
          {
            _startPage = pageConfig.TotalPage - digitalLinkNum;
            _endPage = pageConfig.TotalPage;

          }
          else _startPage = pageConfig.CurrentPage - _forward;
        }
        else//起始页码从1开始
        {
          _startPage = 1;
          _endPage = digitalLinkNum;
        }
      }
      //向上…
      if (_startPage > 1)
      {
        routeValues["page"] = _startPage - 1;
        _strBuilder.Append("<a class=\"linkbatch\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">…</a>");
      }
      //数字
      for (int i = _startPage; i <= _endPage; i++)
      {
        if (i != pageConfig.CurrentPage)
        {
          routeValues["page"] = i;
          _strBuilder.Append("<a class=\"linknum\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">" + i.ToString() + "</a>");
        }
        else
        {
          _strBuilder.Append("<span class='currentnum'>" + i.ToString() + "</span>");
        }
      }
      //向下…
      if (_endPage < pageConfig.TotalPage)
      {
        routeValues["page"] = _endPage + 1;
        _strBuilder.Append("<a class=\"linkbatch\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">…</a>");
      }
      ////数字导航结束
      //下一页和尾页
      if (pageConfig.CurrentPage < pageConfig.TotalPage)
      {
        routeValues["page"] = pageConfig.CurrentPage + 1;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">下一页</a>");
        routeValues["page"] = pageConfig.TotalPage;
        _strBuilder.Append("<a class=\"linkbtn\" href=\"" + _url.Action(actionName, controllerName, routeValues) + "\">尾页</a>");
      }
      else _strBuilder.Append("<span class=\"btn\">下一页</span><span class=\"btn\">尾页</span>");
      //显示页码下拉框
      if (showSelect)
      {
        routeValues["page"] = "-nspageselecturl-";
        _strBuilder.Append(" 跳转到第<select id=\"nspagerselect\" data-url=\"" + _url.Action(actionName, controllerName, routeValues) + "\">");
        for (int i = 1; i <= pageConfig.TotalPage; i++)
        {
          if (i == pageConfig.CurrentPage) _strBuilder.Append("<option selected=\"selected\" value=\"" + i + "\">" + i + "</option>");
          else _strBuilder.Append("<option value=\"" + i + "\">" + i + "</option>");
        }
        _strBuilder.Append("</select>页");
        _strBuilder.Append("<script type=\"text/javascript\">$(\"#" + ctrlId + " #nspagerselect\").change(function () {$.post($(\"#" + ctrlId + " #nspagerselect\").attr(\"data-url\").replace(\"-nspageselecturl-\", $(\"#" + ctrlId + " #nspagerselect\").val()), function (data) {$(\"#" + ctnrId + "\").html(data);});});</script>");
      }
      //显示页码输入框
      if (showInput)
      {
        routeValues["page"] = "-nspagenumurl-";
        _strBuilder.Append(" 转到第<input id=\"nspagernum\" type=\"text\" data-url=\"" + _url.Action(actionName, controllerName, routeValues) + "\" />页");
        _strBuilder.Append("<script type=\"text/javascript\">$(\"#" + ctrlId + " #nspagernum\").keydown(function (event) {if (event.keyCode == 13) { $.post($(\"#" + ctrlId + " #nspagernum\").attr(\"data-url\").replace(\"-nspagenumurl-\", $(\"#" + ctrlId + " #nspagernum\").val()), function (data) {$(\"#" + ctnrId + "\").html(data);}); } });</script>");
      }
      _strBuilder.Append("<script type=\"text/javascript\">$(\"#" + ctrlId + " a\").click(function () {$.post($(this).attr(\"href\"), function (data) {$(\"#" + ctnrId + "\").html(data);});return false; });</script>");
      _strBuilder.Append("</div>");
      return MvcHtmlString.Create(_strBuilder.ToString());
    }

完工

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

AspNetPager分页控件UrlRewritePattern参数设置的重写代码

复制代码代码如下: <AspNet:AspNetPager ID="AspPages" runat="server" CustomInfoHTML="第%CurrentPageIndex%/%PageCount%页,每页%PageSize%条,共%RecordCount%条" FirstPageText="首页" LastPageText="尾页"
ASPNETPAGER分页控件的使用方法[图文]

1. 加入dll文件这是必须的. 2.拖入控件到应用位置,添加引用: 引用: <%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %> 控件: 复制代码代码如下: <div style="text-align:center;"> <webdiyer:AspNetPager ID=&q
laypage分页控件使用实例详解

在开发的时候经常遇到分页比较麻烦,尤其对于一个后端程序猿来说,但是这个问题不能不解决,于是找了一个分页的控件用用,记录在下,以便以后使用. 以下是官网中使用的简单例子: //以下将以jquery.ajax为例,演示一个异步分页 $.getJSON('test/demo1.json', {curr: 6}, function(res){ //从第6页开始请求.返回的json格式可以任意定义 laypage({ cont: 'page1', //容器.值支持id名.原生dom对象,jquery对象.
基于jquery实现简单的分页控件

前台分页控件有很多,这里分享我的分页控件 pagination.js 1.0版本,该控件基于jquery. 先来看一下预览效果: 默认情况下,点击页码会像博客园一样,在url后面加上"#p页码". 控件有2个参数需要注意: 1. beforeRender: 在每个页码项呈现前会被调用,参数为页码的jQuery对象.这个时候我们可以在呈现前做一些处理,例如增加自己的属性等.默认情况下,点击页码,会在url后面加上"#p页码",这样的url并不会刷新页面.如果我们需要刷
ASP.Net 分页控件源码

特性: .支持datagrid,datalist等分种数据显示控件,理论上只要有datasource的控件都可以 .支持url方式分页,url分页的每一页都可以被搜索引擎搜到,并且支持url重写 .控件样式可自定义 .封装完全,使用过程序只需写一行代码复制代码代码如下: /****************************************************************** ** 文件名:Pager.cs ** 创建人:杨响武 ** 日期:2005年7月27日
基于jQuery的实现简单的分页控件

1:效果图 2:素材 3:编码 3.1思考需要做什么? 1:分页控件需要向后台发送请求,发送的参数包括当前页,每页显示数量,查询条件:并且获取数据加载到当前页面: 2:进行修改删除操作的时候能记住当前页: 3:查询后翻页的时候可以可以记住当前查询的条件 3.2实现 HTML 复制代码代码如下:  <div class="tableData"> </div>  <div cla
AspNetAjaxPager,Asp.Net通用无刷新Ajax分页控件，支持多样式多数据绑定

本控件可以对GridView,Repeater,DataGrid,DataList...几乎所有的.net数据绑定控件进行分页,全部无刷新,数据绑定部分可以使用存储过程也可以直接使用sql语句,这对本控件没有任何干扰!本控件具有较好的用户界面,能够根据需要变换各种样式,配合css控制效果则更好! 1.分页样式效果图: 2.如何使用: 于bin目录下添加:AspNetAjaxPager.dll引用 aspx文件内容: 复制代码代码如下: <%@ Page Language="C#"
asp.net下Repeater使用 AspNetPager分页控件

一.AspNetPager分页控件分页是Web应用程序中最常用到的功能之一,在ASP.NET中,虽然自带了一个可以分页的DataGrid(asp.net 1.1)和GridView(asp.net 2.0)控件,但其分页功能并不尽如人意,如可定制性差.无法通过Url实现分页功能等,而且有时候我们需要对DataList和Repeater甚至自定义数据绑定控件进行分页,手工编写分页代码不但技术难度大.任务繁琐而且代码重用率极低,因此分页已成为许多ASP.NET程序员最头疼的问题之一. AspNet
asp.net分页控件AspNetPager的样式美化

在前段时间的开发网站的过程中,突然觉得这个简洁的样式看着和网站整体的风格实在不搭调,于是看看AspNetPager的最后生成html,写了一段CSS样式,将分页的样式和网站整体风格统一起来了. 效果如下: 做的不是很好看,希望大家不要丢砖头,俺的头没包棉絮,伤不起 ~-_-~ CSS样式表: /* AspNetPager Style Power By http://www.edweb.cn */.pager{ width:95%; margin:10px; line-height:20px;
AspNetPager分页控件源代码（Version 4.2）第1/2页

//AspNetPager分页控件源代码(Version 4.2): using System; using System.IO; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; using System.Collections.Specialized; using System.Text; using System.Componen

学习制作MVC4分页控件（上）

相关推荐

随机推荐