.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. 在.NET Framework对于JSON本来就提供了很好的支持

    1. 使用JavaScriptSerializer,位于命名空间System.Web.Script.Serialization,使用: 序列化为JSON字符串: Code }; JavaScriptS ...

  2. MySQL中函数、游标、事件、视图

    MySQL中函数.游标.事件.视图基本应用举例(代码) MySQL中function用户自定义函数c,fun,fun是面向过程的实现方式只能传入参数,或不传入参数,不能传出参数,必有返回值函数中是不能 ...

  3. Linux epoll总结

    Linux epoll总结 Linux  epoll epoll是Kernel 2.6后新加入的事件机制,在高并发条件下,远优于select.epoll最大的好处在于它不会随着监听fd数目的增长而降低 ...

  4. yowsup ( an application to use whatsapp) hack

    yowsup, in python https://github.com/tgalal/yowsup try this: http://hacktracking.blogspot.com.ar/201 ...

  5. zoj 1610 Count the Colors（线段树延迟更新）

    所谓的懒操作模板题. 学好acm,英语很重要.做题的时候看不明白题目的意思,我还拉着队友一块儿帮忙分析题意.最后确定了是线段树延迟更新果题.我就欣欣然上手敲了出来. 然后是漫长的段错误.... 第一次 ...

  6. Js-Html 前端系列--页面撑开头尾

    今天学习过程中,发现一个超实用的方法,就是当页面有尾部,但是内容又不多的情况下,让中间的内容把尾部撑到底部. <script type="text/javascript"&g ...

  7. .net 实战 根据configuration选项生成不同的config文件

    项目开发过程中都会遇到的问题,开发环境的配置肯定是和生产环境不一样的,一直都是重复手动拷贝,但是配置太多拷贝的弊端就显现出来了,为了解决这个问题可以有几种方案: 1.Web.config Transf ...

  8. Springmvc @CookieValue实用

    页面直接请求,  Controller代码 @RequestMapping("/testCookieValue") public String testCookieValue(@C ...

  9. 办理西蒙弗雷泽大学(本科)学历认证『微信171922772』SFU学位证成绩单使馆认证Simon Fraser University

    办理西蒙弗雷泽大学(本科)学历认证『微信171922772』SFU学位证成绩单使馆认证Simon Fraser University Q.微信:171922772办理教育部国外学历学位认证海外大学毕业 ...

  10. 【成长之路】【python】python基础1

    1.python的优点 高级语言:不需考虑底层实现的细节 可移植性:python程序不需经过任何修改就可以在所有的平台系统上运行 可扩展性:可以把用c和c++实现的代码嵌到python中 可嵌入性:可 ...