.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. 添加可运行的js代码

    如何在博客园的文章/随笔中添加可运行的js代码 在博客园浏览大牛们写的文章时,经常会看到在文章中混有一些可运行示例,例如司徒正美的博客中: 带有可运行示例 可以点击“运行代码” 经过一番小小的探索,掌 ...

  2. 谈谈.NET程序集（一）

    谈谈.NET程序集(一) The Assembly in .NET by 唐小崇 http://www.cnblogs.com/tangchong 在.NET出现之前, Windows的程序有一些非常 ...

  3. 基于BrokerPattern服务器框架

    基于BrokerPattern服务器框架 RedRabbit 经典网游服务器架构 该图省略了专门用途的dbserver.guildserver等用于专门功能的server,该架构的优点有: l Log ...

  4. Cygwin 各种情况下中文乱码--终极解决方案

    0.引言 本人从进公司以来一直负责公司Android平台下产品的NDK开发,用的工具: 01. Google的adt-bundle(集成了eclipse和sdk) 02. NDK 03. Cygwin ...

  5. MySQL SET TRANSACTION 设置事务隔离级别

    1. 首先说一下autocommit 默认情况下autocommit的开关是打开的,也就是ON,查看方法 方法1. select @@[global/session].autocommit; 方法2. ...

  6. Java的Exception和Error面试题10问10答

    在Java核心知识的面试中,你总能碰到关于 处理Exception和Error的面试题.Exception处理是Java应用开发中一个非常重要的方面,也是编写强健而稳定的Java程序的关键,这自然使它 ...

  7. Java定时器Timer简述

    概述 主要用于Java线程里指定时间或周期运行任务.Timer是线程安全的,但不提供实时性(real-time)保证. 构造函数 Timer() 默认构造函数. Timer(boolean) 指定关联 ...

  8. Linux 下安裝 Java SE Development Kit（JDK）並配置環境變量

    下載頁面:http://www.oracle.com/technetwork/java/javase/archive-139210.html 打開“Java SE 7”,再打開“Java SE Dev ...

  9. Racket中使用Y组合子

    关于Y组合子,网上已经介绍很多了,其作用主要是解决匿名lambda的递归调用自己. 首先我们来看直观的递归lambda定义, 假设要定义阶乘的lambda表达,C#中需要这么定义 Func<in ...

  10. jmeter压力测试的简单实例+badboy脚本录制（一个简单的网页用户登录测试的结果）

    JMeter的安装:在网上下载,在下载后的zip解压后,在bin目录下找到JMeter.bat文件,双击就可以运行JMeter. http://jmeter.apache.org/ 在使用jmeter ...