.net MVC 中“MvcPager” 插件的简单使用。

.net MVC 中提供了一个分页组件“MvcPager”，用起来还算方便，实用性较强。

简单写一下使用方法，如有不足的地方，请各位大大给小弟指正出来。

一、准备工作

使用这个组件需要 MvcPager.dll 与 MvcPager.js

下载地址：http://pan.baidu.com/s/1jI5BpKa

二、代码

1、项目引用MvcPager.dll

2、在页面分页显示，首先需要一些数据，这里创建了一个实体 LoginModel 包含用户名、密码两个属性，代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebTest.Models
{
    public class LoginModel
    {
        /// <summary>
        /// 用户名
        /// </summary>
        public string UserName { get; set; }

        /// <summary>
        /// 密码
        /// </summary>
        public string Pwd { get; set; }
    }
}

View Code

3、控制器中写一个返回实体列表（列表为“PagedList”）的方法，代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Webdiyer.WebControls.Mvc;
using WebTest.Models;

namespace WebTest.Controllers
{
    public class LoginController : Controller
    {
        /// <summary>
        /// 实体列表
        /// </summary>
        /// <returns></returns>
        public ActionResult PageTest(int pageIndex = 1)
        {
            int totalCount = 200;
            int pageSize = 10;

            List<LoginModel> userList = new List<LoginModel>();
            for (int i = 1; i <= totalCount; i++) 
            {
                LoginModel model = new LoginModel();
                model.UserName = "用户" + i;
                model.Pwd = i.ToString();
                userList.Add(model);
            }

            PagedList<LoginModel> pList = userList.ToPagedList(pageIndex, pageSize);
            pList.PageSize = pageSize;
            pList.TotalItemCount = totalCount;
            pList.CurrentPageIndex = pageIndex;
            return View(pList);
        }
    }
}

View Code

4、如果需要使用跳转按钮功能则页面要添加 MvcPager.js，如果不需要则不用添加了。视图代码如下：

@using WebTest.Models;
@using Webdiyer.WebControls.Mvc;
@model PagedList<LoginModel>

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>PageTest</title>
    <style type="text/css">

        /*分页容器 主体样式*/
        .pager {
            padding:10px;
        }

        /*可用的按钮*/
        .able {
            margin: 0 2px;
            padding: 3px 10px;
            border: 1px solid #ddd;
            background-color: #fff;
            color: #777;
            cursor: default;
        }

        /*不可用的按钮*/
        .disable {
            margin: 0 2px;
            padding: 3px 10px;
            border: 1px solid #ddd;
            background-color: #fff;
            color: #777;
            cursor:default;
        }

        /*当前按钮*/
        .current {
            margin: 0 2px;
            padding: 3px 10px;
            border: 1px solid #337ab7;
            background-color: #337ab7;
            color: #fff;
            cursor: default;
        }
    </style>
</head>
<body>
    <div style="padding:10px;"> 
        @foreach(var item in Model)
        {
            <table>
                <tr>
                    <td style="130px;">
                        名称：&nbsp; @item.UserName
                    </td>
                    <td>
                        密码：&nbsp; @item.Pwd
                    </td>
                </tr>
            </table>
        }
    </div>
    @Html.Pager(Model,
        new PagerOptions
        {
            Id = "pager",
            PageIndexParameterName = "pageIndex",//控制器参数
            ContainerTagName = "span",//分页容器形式（默认好像是div）
            CssClass = "pager",//容器css class
            ShowMorePagerItems = false,//“更多”按钮不显示
            CurrentPagerItemTemplate = "<span class="current">{0}</span>",//当前按钮 模版
            DisabledPagerItemTemplate = "<span class="disable">{0}</span>",//不可用按钮 模版
            PagerItemTemplate = "<span class="able">{0}</span>",//可用按钮 模版
            FirstPageText = "首页",
            PrevPageText = "上一页",
            NextPageText = "下一页",
            LastPageText = "末页",
            PageIndexBoxId = "pagebox",
            GoToButtonId = "goBtn"
        }
    )
    <input type="text" id="pagebox" />
    <button id="goBtn">跳转</button>

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/MvcPager.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#goBtn").click(function () {
                var pager = Webdiyer.MvcPagers.getById("pager");
                if (pager != null) {
                    pager.goToPage($("#pagebox").val());
                }
            });
        });
    </script>
</body>
</html>

View Code

PagerOptions 有一些属性（自行百度，都能看明白），代码里我只写了几个常用的

下面的几个都是分页组件的模版(分页按钮本身都是a标签，加上模版就是在a标签外面套上模版，下面的几个就是 a标签外面套了一个样式分别为current、disableable的span标签 这样能让分页组件变得好看一些^_^)

CurrentPagerItemTemplate = "{0}",//当前按钮 模版
DisabledPagerItemTemplate = "{0}",//不可用按钮 模版（比如当前页为第一页时，“上一页”、“首页” 这两个按钮就是“不可用按钮”）
PagerItemTemplate = "{0}",//可用按钮 模版

如果要加上跳转按钮功能，则需要在页面引用jquery与MvcPager.js，

PageIndexBoxId = "pagebox", //指向文本框
GoToButtonId = "goBtn"//指向按钮

并加入上面代码中的js就可以啦。

5、运行后如下图：

试了下可以顺利切换。^_^