.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. linux 消息队列例子

    /author:DriverMonkey //phone:13410905075 //mail:bookworepeng@Hotmail.com //qq:196568501 #include < ...

  2. php的数组与字符串的转换函数整理

    1.将一个字符串转化为数组 str_split()用于将一个字符串转化为数组 语法: str_split(string,length) //string是必须的,是要分割的字符串: //length是 ...

  3. 三千万数据量下redis2.4的一统计情况

    先说一下工作场景,要求做一个服务,满足:处理千万级别数据,单个请求响应时间在20ms以下.由于是存储的数据格式为key:list[],所以很适合使用redis来存放数据,为了测试一下redis存储的效 ...

  4. HTTPCLIENT抓取网页内容

    通过httpclient抓取网页信息. public class SnippetHtml{ /** * 通过url获取网站html * @param url 网站url */ public Strin ...

  5. STL---基本算法---<stl_algobase.h>概述

    通过一个实例来说明这些算法的接口使用: #include <iostream> #include <algorithm> #include <functional> ...

  6. C++ 头文件系列(array)

    注意,该头文件仅在C++11中标准才开始出现. 简介 与语言内置的数组一样, array类模版支持几乎所有内置数组包含的特性: 顺序的(sequence) 内存连续的(contiguous stora ...

  7. Android 关于在Activity中监听ListView

    Android 开发时,最常用的控件之一就是ListView了,而使用ListView的同时,必然需要对它设置监听器,常用的监听器有这么几个: 1. OnItemClickListener // 监听 ...

  8. 日志快速筛选 之 linux命令grep|uniq|wc|awk

    以前我个人的观念是,在线上运行的东西尽量不要记什么流水日志. 但是后来我变了,发现在线上记日志是一个绝对有必要的东西,尤其是在当下很流行的微服务的推动下,没有日志的帮助,犹如一个睁眼瞎,排查问题基本靠 ...

  9. jndi 与 jdbc

    现在开发中经常用到数据库的两种配置1 jdbc2  jndi 一般开发环境都会使用jdbc环境,自己弄配置方便.但是测试和生产环境一般都使用jndi方式.原因有:1   使用jndi方式配置,数据库的 ...

  10. HostOnly模式下的Centos克隆虚拟机+配置固定ip

    首先在你想克隆的虚拟机上右击,选择管理下的克隆 让我们骚等一会~ ok,现在开机,这个时候是没有ip的 来修改一个文件 删掉红框中的内容,把箭头指的eth1改为eth0 在来修改一个文件 删掉红框的内 ...