MVC分页之MvcPager使用
最近刚刚接触MVC不久，因项目中要用到分页，网上找了下资料，最后采用了MvcPager(http://www.webdiyer.com/),支持同步和Ajax异步分页。废话不多说了直接上代码。
一.MvcPager异步
ViewModel:
public class Article
{
[Display(Name = "信息编号")]
public int ID { get; set; } [Display(Name = "信息标题")]
public string Title { get; set; } [Display(Name = "信息内容")]
public string Content { get; set; }
}
public class AjaxPager
{
public PagedList<Article> Articles { get; set; }
}
Control:
/// <summary>
/// 异步分页测试
/// </summary>
/// <param name="id">pageIndex</param>
/// <param name="key">关键字</param>
/// <returns></returns>
public ActionResult AjaxPaging(int? id = , string key = null)
{
int totalCount = ;
int pageIndex = id ?? ;
int pageSize = ;
List<Article> infoList = new SoleFuDAL.MyTest().GetArticleList(key, pageSize, (pageIndex - ) * , out totalCount);
PagedList<Article> InfoPager = infoList.AsQueryable().OrderByDescending(o => o.ID).ToPagedList(pageIndex, pageSize);
InfoPager.TotalItemCount = totalCount;
InfoPager.CurrentPageIndex = (int)(id ?? ); Models.MyTest.AjaxPager model = new Models.MyTest.AjaxPager();
model.Articles = InfoPager;
if (Request.IsAjaxRequest())
{
return PartialView("_ArticleList", model);
}
return View(model);
}
View:
@model soulefu_manage.Models.MyTest.AjaxPager
@using Webdiyer.WebControls.Mvc; <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MVCPager-AjaxPaging</title>
<link href="~/Content/pagerstyles.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div style="padding: 15px;">
@using (Html.BeginForm("AjaxPaging", "MyTest", new RouteValueDictionary { { "id", "" } }, FormMethod.Get))
{
@Html.Label("关键字：") <input name="key" value="@Request.QueryString["key"]" /><input type="submit" value="查询" />
} @*分页Table*@
@{ Html.RenderPartial("_ArticleTable"); } <div class="text-center">
@Ajax.Pager(Model.Articles, new PagerOptions
{
PageIndexParameterName = "id",
FirstPageText = "首页",
PrevPageText = "上一页",
NextPageText = "下一页",
LastPageText = "末页",
NumericPagerItemCount = ,
ContainerTagName = "ul",
CssClass = "pagination",
CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>",
DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>",
PagerItemTemplate = "<li>{0}</li>"
}).AjaxOptions(a => a.SetUpdateTargetId("articles"))
</div>
</div>
</body>
</html>
@model soulefu_manage.Models.MyTest.AjaxPager <table class="table table-bordered table-striped">
<tr>
<th class="nowrap">序号</th>
<th>
标题
</th>
<th>
内容
</th>
</tr>
@foreach (var item in Model.Articles)
{
<tr>
<td>@Html.DisplayFor(model => item.ID)</td>
<td>
@Html.DisplayFor(modelItem => item.Title)
</td>
<td>
@Html.DisplayFor(modelItem => item.Content)
</td>
</tr>
}
</table>
二.MvcPager同步
ViewModel（此处可不增加，直接和异步的共用同一个）:
public class MVCPager
{
//信息列表
public PagedList<Article> Articles { get; set; }
}
Control:
/// <summary>
/// 同步分页测试
/// </summary>
/// <param name="id">pageIndex</param>
/// <param name="key">关键字</param>
/// <returns></returns>
public ActionResult MVCPager(int? id = , string key = null)
{
int totalCount = ;
int pageIndex = id ?? ;
int pageSize = ;
List<Article> infoList = new SoleFuDAL.MyTest().GetArticleList(key, pageSize, (pageIndex - ) * , out totalCount);
PagedList<Article> InfoPager = infoList.AsQueryable().OrderByDescending(o => o.ID).ToPagedList(pageIndex, pageSize);
InfoPager.TotalItemCount = totalCount;
InfoPager.CurrentPageIndex = (int)(id ?? ); //数据组装到viewModel
Models.MyTest.MVCPager model = new Models.MyTest.MVCPager();
model.Articles = InfoPager;
return View(model);
}
View:
@model soulefu_manage.Models.MyTest.MVCPager
@using Webdiyer.WebControls.Mvc; <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MVCPager</title>
<link href="~/Content/pagerstyles.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div style="padding:15px;">
@using (Html.BeginForm("MVCPager", "MyTest", new RouteValueDictionary { { "id", "" } }, FormMethod.Get))
{
@Html.Label("关键字：")<input name="key" value="@Request.QueryString["key"]" /><input type="submit" value="查询" />
} <table class="table table-bordered table-striped">
<tr>
<th>编号</th>
<th>标题</th>
<th>内容</th>
</tr>
@foreach (var info in Model.Articles)
{
<tr>
<td>@Html.DisplayFor(model => info.ID)</td>
<td>@Html.DisplayFor(model => info.Title)</td>
<td>@Html.DisplayFor(model => info.Content)</td>
</tr>
}
</table> <div class="text-center">
<nav>
@Html.Pager(Model.Articles, new PagerOptions
{
PageIndexParameterName = "id",
FirstPageText = "首页",
PrevPageText = "上一页",
NextPageText = "下一页",
LastPageText = "末页",
ContainerTagName = "ul",
CssClass = "pagination",
CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>",
DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>",
PagerItemTemplate = "<li>{0}</li>",
Id = "bootstrappager"
})
</nav>
</div>
</div>
</body>
</html>
获取测试数据方法（共用）：
public class MyTest
{
/// <summary>
/// 获取测试数据
/// </summary>
/// <param name="key"></param>
/// <param name="PageSize"></param>
/// <param name="CurrentCount"></param>
/// <param name="TotalCount"></param>
/// <returns></returns>
public List<Article> GetArticleList(string key, int PageSize, int CurrentCount, out int TotalCount)
{
string tabName = string.Format("Article");
string strWhere = " 1=1";
if (!string.IsNullOrEmpty(key))
{
//SQL关键字过滤 包含关键字则不拼接SQL
if (!SqlInjection.GetString(key))
{
strWhere += string.Format(" AND (Title LIKE '%{0}%' OR Content LIKE '%{0}%')", key);
}
}
string Order = string.Format("ID ASC");
DataSet ds = SqlHelper.GetList(SqlHelper.connStr, Order, PageSize, CurrentCount, tabName, strWhere, out TotalCount);
List<Article> list = new List<Article>();
if (ds != null && ds.Tables.Count > )
{
foreach (DataRow dr in ds.Tables[].Rows)
{
Article model = new Article();
model.ID = Convert.ToInt32(dr["ID"]);
model.Title = dr["Title"].ToString();
model.Content = dr["Content"].ToString();
list.Add(model);
}
}
return list;
}
}
效果图：（需要引用CSS）
注意：需要引用MvcPager.DLL文件
MVC分页之MvcPager使用的更多相关文章
- ASP.NET MVC分页组件MvcPager 2.0版发布暨网站全新改版
MvcPager分页控件是在ASP.NET MVC Web应用程序中实现分页功能的一系列扩展方法,该分页控件的最初的实现方法借鉴了网上流行的部分源代码, 尤其是ScottGu的PagedList< ...
- ASP.NET MVC中使用MvcPager异步分页+在分页中复选框下一页上一页也保持选中
ASP.NET MVC 分页使用的是作者杨涛的MvcPager分页控件 地址:http://www.webdiyer.com/mvcpager/demos/ajaxpaging/ 这个分页控件在里面 ...
- MVC分页
http://www.cnblogs.com/iamlilinfeng/p/4075292.html 目录 一.Contrl与View数据传递(多表数据) 二.分页控件介绍 三.MVC源码说明 四.源 ...
- 转：MVC分页
原文地址:http://www.cnblogs.com/iamlilinfeng/p/4075292.html 分页总是搞得我很烦,也是因为刚接触,貌似有好多插件,之前在用一个,可是后来发现一翻页原来 ...
- ASP.NET MVC 4使用PagedList.Mvc分页
ASP.NET MVC中进行分页的方式有多种,在NuGet上有提供使用PagedList.PagedList.Mvc进行分页. 1. 通过NuGet引用PagedList.Mvc 在安装引用Paged ...
- ASP.NET MVC分页实现之改进版-增加同一个视图可设置多个分页
我之前就已经实现了ASP.NET MVC分页(查看该博文),但它有局限性,必须确保在同一个视图中只能有一处分页,若需要在同一个视图中设置多个分页,却无能为力,为此,我重新对原先的代码进行了优化,增加了 ...
- Mvc 分页栏扩展方法
using System; using System.Collections.Generic; using System.Reflection; using System.Text; using Sy ...
- spring mvc 分页
spring mvc 分页
- 基于Bootstrap的Asp.net Mvc 分页
基于Bootstrap的Asp.net Mvc 分页的实现 最近写了一个mvc 的 分页,样式是基于 bootstrap 的 ,提供查询条件,不过可以自己写样式根据个人的喜好,以此分享一下.首先新建一 ...
随机推荐
- C#接口的使用场合，接口应用
当一个项目不断的扩大的时候,会面临的问题是不断的有以下情况: 1.以前编写程序的人离职了,新来的程序员看不懂以前的程序,或者觉得以前的程序部够好,但又不希望删除: 2.当实现第三方接口时,如:读写IC ...
- 如何闪开安装VS2013必须要有安装IE10的限制
把下面这一段文字,储存成.bat档案,然后右击以管理员角色去执行它.@ECHO OFF :IE10HACK REG ADD "HKLM\SOFTWARE\Wow6432Node\Micros ...
- CentOS下Red5安装
Red5介绍 Red5是一个采用Java开发开源的Flash流媒体服务器.它支持:把音频(MP3)和视频(FLV)转换成播放流: 录制客户端播放流(只支持FLV):共享对象:现场直播流发布:远程调用. ...
- Solr 5.x集成中文分词word，mmseg4j
使用标准分词器,如图: 使用word分词器 下载word-1.3.jar,注意solr的版本和word分词的版本 将文件word-1.3.jar拷贝至文件夹C:\workspace\Tomcat7.0 ...
- “HTTPS”安全在哪里？
背景 最近基于兴趣学学习了下 HTTPS 相关的知识,在此记录下学习心得. 在上网获取信息的过程中,我们接触最多的信息加密传输方式也莫过于 HTTPS 了.每当访问一个站点,浏览器的地址栏中出现绿色图 ...
- win7搭建ios开发环境
安装过程参考文章: http://jingyan.baidu.com/article/ff411625b9011212e48237b4.html http://www.loukit.com/threa ...
- 聊聊IO多路复用之select、poll、epoll详解
本文转载自: http://mp.weixin.qq.com/s?__biz=MzAxODI5ODMwOA==&mid=2666538922&idx=1&sn=e6b436ef ...
- saiku之行速度优化（三）
经历了前两轮优化之后,saiku由不可使用,优化到可以使用,不过在分析大量日志数据的时候,还有顿卡的感觉!继续观察背后执行的Sql,决定将注意力关注到索引上面! 日志的主要使用场景是:固定日期维度的数 ...
- ux.form.field.Verify 验证码控件
//验证码控件 Ext.define('ux.form.field.Verify', { extend: 'Ext.container.Container', alias: ['widget.fiel ...
- 免费国内外"代码托管服务器"收集
国内 开源中国 http://git.oschina.net/ 支持git 淘宝code http://code.taobao.org/ 支持svn 京东code https://cod ...