基于Bootstrap的Asp.net Mvc 分页的实现(转)
最近写了一个mvc 的 分页,样式是基于 bootstrap 的 ,提供查询条件,不过可以自己写样式根据个人的喜好,以此分享一下。首先新建一个Mvc 项目,既然是分页就需要一些数据,我这 边是模拟了一些假的数据,实际的项目中都是在数据库中去取得的,很简单的数据:
public class User
{
public string Name { get; set; }
public int Age { get; set; }
}
取数据我这边是加了120个数据:
public List<User> GetData()
{
List<User> list = new List<User>();
string[] array = new string[]{ "Tom", "Joy", "James", "Kobe", "Jodan","LiLei", "Hanmeimei", "xiaoming","Danneil", "Forest", "Newbee", "Azure" };
for (int i = 0; i < 120; i++)
{
User user = new User();
user.Age = i;
user.Name = array[i / 10];
list.Add(user);
}
return list;
}
然后新建一个 PageModel类
/// <summary>
/// 有些属性我写成了虚的, 这样可以根据不同的需要去重写便于扩展
/// </summary>
public class BasePageModel
{
public string SearchKeyWord { get; set; }
/// <summary>
///点击分页是指向 Action 的名字 根据具体需要而定
/// </summary>
public virtual string ActionName
{
get
{
return "Index";
}
}
public int TotalCount { get; set; }
public int CurrentIndex { get; set; }
public int TotalPages
{
get
{
return (int)Math.Ceiling((double)TotalCount / (double)PageSize);
}
}
/// <summary>
/// 根据需要具体而定PageSize
/// </summary>
public virtual int PageSize
{
get { return 10; }
}
/// <summary>
///根据需要具体而定 分页显示最大的页数
/// </summary>
public virtual int DisplayMaxPages
{
get
{
return 10;
}
}
public bool IsHasPrePage
{
get
{
return CurrentIndex != 1;
}
}
public bool IsHasNextPage
{
get
{
return CurrentIndex != TotalPages;
}
}
}
再新建一个分布式图 建在Shared 文件夹里,代码如下:
@using MvcTest.Models
@model MvcTest.Models.BasePageModel
@{if (Model != null && Model.TotalPages != 0)
{
<ul class="pagination">
@{
@Url.CreatPageLiTag(Model, Model.CurrentIndex - 1, false, Model.IsHasPrePage, "«")
if (Model.TotalPages <= Model.DisplayMaxPages)
{
for (int i = 1; i < Model.TotalPages; i++)
{
@Url.CreatPageLiTag(Model, i, i == Model.CurrentIndex);
}
}
else
{
if (Model.CurrentIndex - 1 < 5)
{
for (int i = 1; i <= Model.DisplayMaxPages - 1; i++)
{
@Url.CreatPageLiTag(Model, i, i == Model.CurrentIndex);
}
@Url.CreatPageLiTag(Model, Model.CurrentIndex, false, false, "...");
}
else
{
@Url.CreatPageLiTag(Model, 1);
if (Model.CurrentIndex + (Model.DisplayMaxPages - 2) / 2 >= Model.TotalPages)
{
int page = Model.CurrentIndex - (Model.DisplayMaxPages - Model.TotalPages + Model.CurrentIndex - 1);
if (page > 1)
{
@Url.CreatPageLiTag(Model, Model.CurrentIndex, false, false, "...");
}
for (int i = page + 1; i < Model.TotalPages; i++)
{
@Url.CreatPageLiTag(Model, i, i == Model.CurrentIndex);
}
}
else
{
int page = Model.CurrentIndex - (Model.DisplayMaxPages - 2) / 2;
if (page > 2)
{
@Url.CreatPageLiTag(Model, Model.CurrentIndex, false, false, "...");
}
for (int i = page; i < Model.CurrentIndex + (Model.DisplayMaxPages - 2) / 2; i++)
{
@Url.CreatPageLiTag(Model, i, i == Model.CurrentIndex);
}
@Url.CreatPageLiTag(Model, Model.CurrentIndex, false, false, "...");
}
}
}
@Url.CreatPageLiTag(Model, Model.TotalPages, Model.TotalPages == Model.CurrentIndex)
@Url.CreatPageLiTag(Model, Model.CurrentIndex + 1, false, Model.IsHasNextPage, "»")
}
</ul>
}
}
以上就是分页的核心代码,包括了一些判断逻辑,其中的 @Url.CreatPageLiTag 我是写了一个扩展
public static class HtmlHelperExtensions
{
public static MvcHtmlString CreatPageLiTag(this UrlHelper urlHelper,
BasePageModel pageModel,
int index,
bool isCurrentIndex = false,
bool isDisable = true,
string content = "")
{
string url = urlHelper.Action(pageModel.ActionName, new { searchkey = pageModel.SearchKeyWord, index = index });
string activeClass = !isCurrentIndex ? string.Empty : "class='active'";
string disableClass = isDisable ? string.Empty : "class='disabled'";
url = isDisable ? "href='" + url + "'" : string.Empty;
string contentString = string.IsNullOrEmpty(content) ? index.ToString() : content;
return new MvcHtmlString("<li " + activeClass + disableClass + "><a " + url + ">" + contentString + "</a></li>");
}
}
在这里面里面 是生成<a/>标签的,样式可以自己定。无非就是一些css 的定义。
然后就在action 的方法里取数据
public ActionResult Index(string searchkey, string index)
{
if (string.IsNullOrEmpty(index))
index = "1";
if (string.IsNullOrEmpty(searchkey))
searchkey = string.Empty;
List<User> totalList = GetData().Where(p=>p.Name.ToLower().Contains(searchkey.ToLower())).ToList();
BasePageModel page = new BasePageModel() { SearchKeyWord = searchkey, CurrentIndex = Int32.Parse(index), TotalCount = totalList.Count };
List<User> pageList = totalList.Skip((page.CurrentIndex - 1) * page.PageSize).Take(page.PageSize).ToList();
ViewData["pagemodel"] = page;
return View(pageList);
}
前台代码:
@model List<MvcTest.Controllers.User>
@{
ViewBag.Title = "Index";
}
<h2>Data List</h2>
<form class="navbar-form navbar-right" name="searchform" action="@Url.Action("Index", new {index="1" }) method="post">
<div class="input-group">
<input type="text" id="searchkey" name="searchkey" class="form-control" placeholder="Search..." />
<span class="btn input-group-addon" οnclick="document.searchform.submit();">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
</form>
<table class="table table-hover table-bordered table-condensed">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.Name</td>
<td>@item.Age</td>
</tr>
}
</tbody>
</table>
@Html.Partial("MvcPagerView", ViewData["pagemodel"])
Ok 搞定。效果如下:
基于Bootstrap的Asp.net Mvc 分页的实现(转)相关推荐
- ASP.NET MVC分页实现
ASP.NET MVC中不能使用分页控件,所以我就自己写了一个分页局部视图,配合PageInfo类,即可实现在任何页面任意位置呈现分页,由于采用的是基于POST分页方式,所以唯一的限制就是必须放在FO ...
- asp.net MVC分页
.Net MVC 分页代码,分页的关键就是在于这几个参数pageIndex ,recordCount,pageSize ,下面是张林的网站做的一个简单的分页代码 效果如图 public class ...
- Bootstrap整合ASP.NET MVC验证、jquery.validate.unobtrusive
没什么好讲的,上代码: (function ($) {var defaultOptions = {validClass: 'has-success',errorClass: 'has-error',h ...
- ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件
Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉菜单.导航.警告框.弹出框.输入框组等.在你的Web Application中使用这些组件,将为用户提供一致和简单易用的用户体验. ...
- asp.net mvc jqgrid 同一个页面查询不同的表,jqgrid显示不同表的表头和数据并且分页...
基于我上一篇文章<a href="http://www.cnblogs.com/alasai/p/4765756.html">asp.net mvc excel导入&l ...
- ASP.NET MVC使用Bootstrap系列(1)——开始使用Bootstrap
阅读目录 Bootstrap结构介绍 在ASP.NET MVC 项目中添加Bootstrap文件 为网站创建Layout布局页 使用捆绑打包和压缩来提升网站性能 在Bootstrap项目中使用捆绑打包 ...
- ASP.NET MVC使用Bootstrap系统(2)——使用Bootstrap CSS和HTML元素
ASP.NET MVC使用Bootstrap系统(2)--使用Bootstrap CSS和HTML元素 阅读目录 Bootstrap 栅格(Grid)系统 Bootstrap HTML元素 Boots ...
- 在 asp.net mvc中的简单分页算法 (续)
在上个月发表的 http://www.cnblogs.com/bwangel/p/mvcpager.html 中,讨论了一下asp.net mvc中结合Entity framework框架进行的分页, ...
- ASP.NET MVC 简单的分页思想与实现
首先我们通过VS创建一个空的基于Razor视图引擎的ASP.NET MVC3 Web应用程序,命名为JohnConnor.Web 对创建过程或Razor不太了解的看官,请移步 ASP.NET MVC ...
最新文章
- Spring3, Hibernate3.6与Proxool连接池配置
- 解决依赖的moduleBuildConfig.DEBUG总是未false的问题
- ViewPager用法
- 关于mysql触发器的问题:执行事件插入的字段是否一定要满足字段的所有约束条件?
- 【第二组】项目冲刺(Beta版本)第一次每日例会 2017/7/18
- C#并行编程-并发集合
- Python风格总结:迭代器与生成器
- 【渝粤教育】国家开放大学2019年春季 1152教育法学 参考试题
- hdu 3926 hands in hands
- 下拉树取值与赋值单元格填报(取值赋值)
- 第三讲 系统建模与仿真
- 尚学堂百战程序员python_尚学堂百战程序员:Python之数据分析库
- 保证接口数据安全的10种方案
- 被破解毁掉的国产游戏之光
- 产品数据管理系统框架与信息安全
- 数据分析报告这样写,才算真正读懂了数据
- 喧喧发布 2.5.1 版本,支持移动版和桌面端同时登录
- 判断是否为水仙花数(Python)
- mysql错误码 1068_服务启动报错----错误1068 的解决方法
- 操作系统——文件分配和空间管理
热门文章
- POJ 1236 Network of Schools(强连通 Tarjan+缩点)
- Ubuntu 用户提权到Root
- ASP.NET 2.0 中Cookies的Expires属性详解
- NBA球队球员介绍1
- (转)解决Google Adsense广告只显示英文的问题
- Sentinel系统规则_分布式系统集群限流_线程数隔离_削峰填谷_流量控制_速率控制_服务熔断_服务降级---微服务升级_SpringCloud Alibaba工作笔记0044
- 微信公众开放平台开发03---百度BAE上搭建属于自己的微信公众平台 -JAVA,微信公众开放平台部署到百度云中BASE2.0,进行调试,木有钱买云服务器的亲们试试
- android学习笔记---37_采用广播接收者实现系统短信操作_获取短信_收发短信等
- nnlm代码解读链接
- LeetCode632 最小区间