.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. 乔布斯，TED，我的演讲

    乔布斯传这部独立影片虽然以失败告终,但是人们把期待留给了索尼影业即将投拍的官方乔布斯传记电影. 据传,这部影片将以乔布斯最成功的四次演讲作为主线,这无疑说明,演讲,对于乔布斯这个传奇人物,是非常重要的 ...

  2. Microsoft.VisualBasic.dll的妙用and 改善C#公共程序类库质量的10种方法

    Microsoft.VisualBasic.dll的妙用(开发中肯定会用到哦) 前言 做过VB开发的都知道,有一些VB里面的好的函数在.NET里面都没有,而Microsoft.VisualBasic. ...

  3. SVM学习资料

    SVM学习资料 2013-06-21 17:29 by 夜与周公, 227 阅读, 0 评论, 收藏, 编辑 SVM(support vector machine),被认为是“off-the-shel ...

  4. Bek Trak Trik for wireless WPA/WPA2 & SSH & email

    FOR wireless tools: hydra, medusa, crunch, aircrack-ng packages (airodump-ng, airmon-ng, aircrack-ng ...

  5. 成都传智播客JDBC视频及讲师介绍

    成都传智播客java讲师,也许,你跟他很熟,你或者听过他的课,或者跟他争论过什么,又或者你们在一起共事,再者你们只是偶尔擦肩而过.在小编的印象中郭老师完全没有架子,和他相处会让你觉得不是面对一个老师, ...

  6. “Will not add file alias 'samefile' ('SameFile' already exists in index)” when `git add/commit` operation

    从远程仓库pull下来的代码有两个类类名首字母小写出现如下情况 然后我想删了重新写一下(就是把这个类删了,代码复制到名字正确的类里面),然后commit的时候出现这个错误,后来删一个commit一下, ...

  7. 初级FTP搭建

    一:了解FTP基本知识 Vsftpd 1.什么是FTP? File Transfer Protocol 基于C/S结构的文件传输协议2.使用什么协议?什么端口? TCP 21 建立命令链路 TCP 2 ...

  8. CSS3样式linear-gradient的使用

    linear-gradient linear-gradient是CSS3中新增的样式,主要用于颜色的渐变效果.MDN地址 linear-gradient在不同内核下使用方式不同,详细内容可参考w3cp ...

  9. Linux系统下搭建DNS服务器——DNS原理总结

    2017-01-07 整理 DNS原理 域名到IP地址的解析过程 IP地址到域名的反向域名解析过程 抓包分析DNS报文和具体解析过程 DNS服务器搭建和配置 这个东东也是今年博主参见校招的时候被很多公 ...

  10. windows全系列激活脚本-改良版.cmd

    @ECHO OFFTITLE Windows 全版本系统激活cscript //nologo %Systemroot%\system32\slmgr.vbs -skms 10.1.1.12ECHO 检 ...