.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; }

    }

}

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 = )

        {

            int totalCount = ;

            int pageSize = ;

            List<LoginModel> userList = new List<LoginModel>();

            for (int i = ; 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);

        }

    }

}

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="width: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>

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

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

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

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

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

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

5、运行后如下图：

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

.net MVC 中“MvcPager” 插件的简单使用。的更多相关文章

  1. ASP.NET MVC中使用highcharts 生成简单的折线图

        直接上步骤:   生成一个options,选项包含了一些基本的配置,如标题,坐标刻度,serial等: 配置X轴显示的Category数据,为一个数组: 配置Y轴显示的数据,也为一个数据: 用 ...

  2. ASP.NET MVC中权限控制的简单实现

    1.重写AuthorizeAttribute类,用自己的权限控制逻辑重写AuthorizeCore方法 public class MyAuthorizeAttribute : AuthorizeAtt ...

  3. spring mvc 中Uploadify插件的使用

    具体过程不写了,直接上代码 jsp代码 $("#uplodefile").uploadify({ 'swf': '/statics/uploadify/uploadify.swf' ...

  4. ElasticSearch中head插件的简单用法

    1.首先在左侧打开Query栏. 2.Query下方的第一栏是分别输入es的地址.端口号.index.type. 3.Query下方的第二栏是输入将要执行的方式,旁边的下拉框是辅助选择执行的类型,如图 ...

  5. IOC运用到MVC中

    IOC可以摒弃掉类中类的紧耦合,让设计和重用更简单,将IOC加入到MVC中的实现非常简单,那么有哪几种方法?它们的实现又是什么原理呢? IOC在MVC中的注入,主要是在获取Controller对象中实 ...

  6. ASP.NET MVC中使用Ninject

    ASP.NET MVC中使用Ninject 在[ASP.NET MVC 小牛之路]系列上一篇文章(依赖注入(DI)和Ninject)的末尾提到了在ASP.NET MVC中使用Ninject要做的两件事 ...

  7. 在MVC项目中分页使用MvcPager插件

    参考网站  http://www.webdiyer.com/mvcpager/demos/ 这个插件非常简单易用,如果想快速使用 可以参考我这篇文章,其实参考网站也是非常简单的 首先选择你的web项目 ...

  8. Ninject在mvc中的简单配置

    前言 Ninject是一款开源的轻量级的依赖注入插件.从接触ioc以来,一直都是使用这个,感觉用起来还是不错的,配置起来也很方便简单.在mvc中更是基本傻瓜式的配置. 开发前的准备 新建一个mvc3项 ...

  9. mvc中html导出成word下载-简单粗暴方式

    由于工作需求,需要把html简历页导出成word下载.网上搜索了很多解决方案,基本都是用一些插件,然后写法也很麻烦,需要创建模板什么的. 固定替换值  代码一大堆.但是对于我的需求来说  并没有什么用 ...

随机推荐

  1. 整合MVVM框架(Prism)

    整合MVVM框架(Prism) 我们基础的框架已经搭建起来了,现在整合MVVM框架Prism,在ViewModel做一些逻辑处理,真正把界面设计分离出来. 这样方便我们系统开发分工合作,同时提高系统可 ...

  2. 依赖注入（IOC）

    依赖注入(IOC) 背景介绍 在设计模式中,尤其是结构型模式很多时候解决的就是对象间的依赖关系,变依赖具体为依赖抽象.平时开发中如果发现客户程序依赖某个或某类对象,我们常常会对他们进行一次抽象,形成抽 ...

  3. javascript生成自定义的arcgis simpletoolbar

    javascript生成自定义的arcgis simpletoolbar 最近在学习ARCGIS for Javascript过程中,在ESRI的在线帮助上看见了这样一个示例,查看源码后,觉得左侧工具 ...

  4. Reeder Web版

    Reeder Web版 访Reeder界面效果 一直很欣赏触控手势的代码实现,所以最近折腾了个Javascript触控手势库--JTouch,效果还有诸多不完善之处,苦于硬件设备不完善,针对ie10的 ...

  5. continue与break

    1.continue语句,1至20内奇数累加和 #include<iostream> using namespace std; void main(){ int i=0; int sum= ...

  6. 在gem5的full system下运行 x86编译的测试程序 running gem5 on ubuntu in full system mode in x86

    背景 上篇博客写了如何在gem5的full system模式运行alpha的指令编译的程序,这篇博客讲述如何在gem5的full system模式运行x86指令集编译的程序,这两种方式非常类似. 首先 ...

  7. Spring中AOP的模拟实现

    什么是AOP? 面向切面编程(AOP)完善spring的依赖注入(DI),面向切面编程在spring中主要表现为两个方面 1.面向切面编程提供声明式事务管理 2.spring支持用户自定义的切面 面向 ...

  8. Eclipse 4.3正式版发布

    Eclipse 4.3正式版发布 作者:chszs,转载需注明.博客主页: http://blog.csdn.net/chszs Eclipse 4.3版代号为Kepler. 主要特性如下: 1. E ...

  9. Spring实战——XML和JavaConfig的混合配置

    前言 看了园龄已经两年多了,再不能写完内容直接点击发布,留下一片密密麻麻的文字让别人看的头昏脑涨.所以现在每次写完主要内容后,还需要对于格式稍稍调整下.那么有没有什么编辑模式能够在你写完文章后基本也把 ...

  10. [ios2]蓝牙通信【转】

    iPhone开发应用中关于GameKit蓝牙实例讲解是本文要介绍的内容,主要是来了解并学习GameKit蓝牙实例.介绍一下这个实例实现的是两个带有蓝牙设备的touch之间的一个小游戏,在界面上有个可以 ...