.net MVC 中“MvcPager” 插件的简单使用。
.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;">
名称: @item.UserName
</td>
<td>
密码: @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” 插件的简单使用。的更多相关文章
- ASP.NET MVC中使用highcharts 生成简单的折线图
直接上步骤: 生成一个options,选项包含了一些基本的配置,如标题,坐标刻度,serial等: 配置X轴显示的Category数据,为一个数组: 配置Y轴显示的数据,也为一个数据: 用 ...
- ASP.NET MVC中权限控制的简单实现
1.重写AuthorizeAttribute类,用自己的权限控制逻辑重写AuthorizeCore方法 public class MyAuthorizeAttribute : AuthorizeAtt ...
- spring mvc 中Uploadify插件的使用
具体过程不写了,直接上代码 jsp代码 $("#uplodefile").uploadify({ 'swf': '/statics/uploadify/uploadify.swf' ...
- ElasticSearch中head插件的简单用法
1.首先在左侧打开Query栏. 2.Query下方的第一栏是分别输入es的地址.端口号.index.type. 3.Query下方的第二栏是输入将要执行的方式,旁边的下拉框是辅助选择执行的类型,如图 ...
- IOC运用到MVC中
IOC可以摒弃掉类中类的紧耦合,让设计和重用更简单,将IOC加入到MVC中的实现非常简单,那么有哪几种方法?它们的实现又是什么原理呢? IOC在MVC中的注入,主要是在获取Controller对象中实 ...
- ASP.NET MVC中使用Ninject
ASP.NET MVC中使用Ninject 在[ASP.NET MVC 小牛之路]系列上一篇文章(依赖注入(DI)和Ninject)的末尾提到了在ASP.NET MVC中使用Ninject要做的两件事 ...
- 在MVC项目中分页使用MvcPager插件
参考网站 http://www.webdiyer.com/mvcpager/demos/ 这个插件非常简单易用,如果想快速使用 可以参考我这篇文章,其实参考网站也是非常简单的 首先选择你的web项目 ...
- Ninject在mvc中的简单配置
前言 Ninject是一款开源的轻量级的依赖注入插件.从接触ioc以来,一直都是使用这个,感觉用起来还是不错的,配置起来也很方便简单.在mvc中更是基本傻瓜式的配置. 开发前的准备 新建一个mvc3项 ...
- mvc中html导出成word下载-简单粗暴方式
由于工作需求,需要把html简历页导出成word下载.网上搜索了很多解决方案,基本都是用一些插件,然后写法也很麻烦,需要创建模板什么的. 固定替换值 代码一大堆.但是对于我的需求来说 并没有什么用 ...
随机推荐
- myeclipse maven编译出错
从.net 到java 快一年了.这一年学了很多东西.从开发角度来说俩个语言查不到.部署上差异较大.不过java处理问题上确实不太统一.好多问题在网上没有正确的回答.刚换台式机发现 mvn inst ...
- 在C#中模拟Javascript的setTimeout方法
在C#中模拟Javascript的setTimeout方法 背景 每种语言都有自己的定时器(Timer),很多人熟悉Javascript中的setInterval和setTimeout,在Javasc ...
- 关于JdbcTemplate的queryForList返回值
通过spring的jdbctemplate返回的list其实封装的是需要通过如下方法得到里面的内容的 public void getAllUsers() { List allUsers = new A ...
- IE11仿真文档模式默认IE5 IE7的调整办法
<meta http-equiv="X-UA-Compatible" content="IE=edge">
- data矩阵poj 2778 DNA Sequence
最近研究data矩阵,稍微总结一下,以后继续补充: ac自动机处理字符串,dp计算谜底,用矩阵来减速 每日一道理 巴尔扎克说过“不幸,是天才的进升阶梯,信徒的洗礼之水,弱者的无底深渊”.风雨过 ...
- 转]python 结巴分词(jieba)学习
原文 http://www.gowhich.com/blog/147 主题 中文分词Python 源码下载的地址:https://github.com/fxsjy/jieba 演示地址:http:/ ...
- SAP CRM 高效调试方法
调试,是程序开发中的基本技巧.快速定位错误消息在源代码中的位置,对发现和解决程序中的问题有着重要的意义.在SAP CRM中,错误消息通常在前台的Web Client页面中展示,应该怎样定位相关代码的位 ...
- SR-IOV简介
转载:http://docs.oracle.com/cd/E38902_01/html/E38873/glbzi.html SR-IOV 技术是一种基于硬件的虚拟化解决方案,可提高性能和可伸缩性.SR ...
- [大山中学dp常练-4 Rounds]
Round#1 2016.9.28 这次晚练十分sb 有点浪费时间 全是dp题 先说过程 3分钟草了第一题之后感觉好像有点水 然后翻了翻题目 看了看第一第四题两颗星 其他三颗星 然后一下子第二题题目太 ...
- 论JSON的重要性☞异步上传过程中data取多组值的方法
异步上传取多组值一起post改变属性 如图: 看图说话