asp.net MVC 使用Bootstrap 分页

Boostrap分页控件比较美观,

控制器代码:使用仓储模式实现。如果是直接使用DbContext上下文使用更简单。

public ActionResult Index(int? page,string categoryName,string SearchTitle)
{
var categoryNameList = new List<string>(); //可考虑使用hashSet<>
var categoryQuery = from c in _articleService.FindAll()
select c.Category.CategoryName;
categoryNameList.AddRange(categoryQuery.Distinct());
ViewBag.categoryNameList = new SelectList(categoryNameList, categoryName);
ViewBag.categoryName = categoryName;

ViewBag.SearchTitle = SearchTitle;

int pageNumber = page ?? 1;  //如果page  参数没有赋值,默认为1。??空值合并运算符,意思是如果page有值,就为page的值,如果page 为空,值就为1.

ViewBag.page = pageNumber;

int recordPerPage =3;    //设置每一页记录数。

ViewBag.recordPerPage = recordPerPage;
int totalRecord = 0;   //定义一个输出参数。其实这里给输出参数赋值为0,是没多大意义的。只是为了能够访问到这个变量名而已。输出参数就像引用参数一样,跟形参占用相同的内存空间,形参值改变了,输出参数值也变了。 输出参数是为了解决一个C#中一个函数只能返回一个值的问题,使用它能返回多个值。
IEnumerable<Article> articles;
if (string.IsNullOrEmpty(categoryName))
{
if(string.IsNullOrEmpty(SearchTitle))
articles = _articleService.FindPageList<DateTime>(pageNumber, recordPerPage, out totalRecord, a =>true, OrderType.Desc, a => a.PostTime);
else
articles = _articleService.FindPageList<DateTime>(pageNumber, recordPerPage, out totalRecord, a => a.Title.Contains(SearchTitle), OrderType.Desc, a => a.PostTime);
}
else
{
if (string.IsNullOrEmpty(SearchTitle))
articles = _articleService.FindPageList<DateTime>(pageNumber,recordPerPage,out totalRecord,a=>a.Category.CategoryName == categoryName,OrderType.Desc,a =>a.PostTime);
else
articles = _articleService.FindPageList<DateTime>(pageNumber, recordPerPage, out totalRecord, a => a.Category.CategoryName == categoryName && a.Title.Contains(SearchTitle), OrderType.Desc, a => a.PostTime);

}

ViewBag.totalRecord = totalRecord;
ViewBag.totalPage =(int)Math.Ceiling((double)totalRecord/(double)recordPerPage);      //Math.Celling()向上取整函数。 同样,Math.Floor()向下取整函数。

return View(articles.ToList());
}

视图:

@model IEnumerable<MajorConstruction.Models.Article>

@{
ViewBag.Title = "文章列表";
}

<h2>@ViewBag.Title</h2>

@using (Html.BeginForm("Index", "Article", FormMethod.Get, new { @class = "form-inline", role = "form" }))   //内联表单,显示在一行上。
{
<label for="categoryName" class="control-label">栏目名称:</label>
<div class="form-group">
@Html.DropDownList("categoryName", ViewBag.categoryNameList as SelectList, "全部栏目", new { @class="form-control"})
</div>

<label for="searchTextbox" class="control-label"> 通过标题查找:</label>
<div class="form-group">
@Html.TextBox("SearchTitle", ViewBag.SearchTitle as string, new { @class = "form-control" })
</div>

<input type="submit" value="查找" class="btn btn-primary" />

}
<table class="table table-striped table-hover">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Category.CategoryName)
</th>
<th>
@Html.DisplayNameFor(model => model.Title)
</th>
<th>
@Html.DisplayNameFor(model => model.AuthorName)
</th>
<th>
@Html.DisplayNameFor(model => model.PostTime)
</th>
<th>
@Html.DisplayNameFor(model => model.PriorOrder)
</th>
<th>
@Html.DisplayNameFor(model => model.ClickCount)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Category.CategoryName)
</td>
<td>
@Html.DisplayFor(modelItem => item.Title)
</td>
<td>
@Html.DisplayFor(modelItem => item.AuthorName)
</td>
<td>
@Html.DisplayFor(modelItem => item.PostTime)
</td>
<td>
@Html.DisplayFor(modelItem => item.PriorOrder)
</td>
<td>
@Html.DisplayFor(modelItem => item.ClickCount)
</td>

<td>
@Html.ActionLink("编辑", "Edit", new { id = item.ArticleID }) |
@Html.ActionLink("预览", "Details", new { id = item.ArticleID }) |
@Html.ActionLink("删除", "Delete", new { id = item.ArticleID })
</td>
</tr>
}
</tbody>
<tfoot>
<tr>
<td class="text-info" colspan="5">
每页 @ViewBag.recordPerPage 条记录,共有 @ViewBag.totalRecord 条记录。 第 @(ViewBag.totalRecord == 0 ? 0 : ViewBag.page) 页 ,共 @ViewBag.totalPage 页  //如果查询到的记录数为0,就显示为第0页。这里有一个条件表达式的目的是为了避免 如  第1页,共0页。的情况。
</td>
</tr>
</tfoot>
</table>

@if (ViewBag.totalRecord != 0)       //是为了避免出现没有记录,还是显示下一页的符号链接。
{
<ul class="pagination">
@if (ViewBag.page != 1)  //如果当前页面不是第1页,就显示 <<上一页的符号链接。当前页面是第1页,就不显示<<了。
{
<li><a href="@Url.Action("Index", new { categoryName= ViewBag.categoryName,SearchTitle=ViewBag.SearchTitle, page =(int)(ViewBag.page) -1})">&laquo;</a></li>   //为了保证分页与筛选功能的一致性,所以在链接中增加了路由参数。并将当前值通过ViewBag回传给各个输入表单字段。
}

@for (int page = 1; page <= (int)@ViewBag.totalPage; page++)
{
string activeCss = page == (int)ViewBag.page ? "active" : null;
<li class="@activeCss"><a href="@Url.Action("Index", new { categoryName = ViewBag.categoryName,SearchTitle=ViewBag.SearchTitle, page = page })">@page</a></li>

}
@if (ViewBag.page != ViewBag.totalPage)  //如果当前页面不是最后一页了,就显示 >>下一页的符号链接。当前页面是最后一页,就不显示>>了。
{
<li><a href="@Url.Action("Index", new { categoryName = ViewBag.categoryName,SearchTitle=ViewBag.SearchTitle, page = (int)(ViewBag.page) + 1 })">&raquo;</a></li>
}

</ul>
}

时间: 2024-07-30 18:28:38

asp.net MVC 使用Bootstrap 分页的相关文章

ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件

Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉菜单.导航.警告框.弹出框.输入框组等.在你的Web Application中使用这些组件,将为用户提供一致和简单易用的用户体验. Bootstrap组件本质上是结合了各种现有Bootstrap元素以及添加了一些独特Class来实现.Bootstrap元素我在上一篇文章中涉及到,具体可以参考<ASP.NET MVC使用Bootstrap系列(2)——使用Bootstrap CSS和HTML元素>. 在这篇博客中,我将继续探索B

基于ASP.NET MVC和Bootstrap搭建响应式个人博客站(一)

1.0 为什么要做这个博客站? www.zynblog.com   在工作学习中,经常要搜索查找各种各样的资料,每次找到相关资料后都会顺手添加到浏览器书签中,时间一长,书签也就满了.而且下次再点击这个书签时,可能 就会忘记当时为什么要添加这个书签了,更有可能书签连接已经无效.这样一来,也就不方便自己查阅了.如果转载.收藏到自己的博客园账号中.CSDN账号 中,脚本之家中,知乎中等等,依然是很凌乱,不方便下次查阅. 因此,我下决心开发一个个人技术博客站.主要原因是:可以整合各种宝贵资源,将知识变为

[备用]权限设计方案、如何使用session、MVC如何使用模板、DropdownList、怎么添加Bootstrape框架、使用ASP.NET MVC 4 Bootstrap Layout Template(VS2012)

1.权限设计方案: http://jingyan.baidu.com/article/9f63fb91ae22bac8410f0e70.html 2.如何使用session: 控制器中使用session namespace me.Controllers { public class LoginController : Controller { // // GET: /Login/ public ActionResult Index() { //设置session this.HttpContext

ASP.NET MVC 简单的分页思想与实现

, 作为一个程序猿,数据分页是每个人都会遇到的问题.解决方案更是琳琅满目,花样百出.但基本的思想都是差不多的. 下面给大家分享一个简单的分页器,让初学者了解一下最简单的分页思想,以及在ASP.NET MVC中的简单实现与应用. 一,定义分页器类 在ASP.net MVC中,分页的数据源可能是各种不同的类型,所以最好使用泛型来定义. public class PagingHelper<T> 二,基本三要素 实现分页人所共知的三个基本属性: DataSource:数据源,要知道数据源共计多少条数据

[ASP.NET MVC] 使用Bootstrap套件

[ASP.NET MVC] 使用Bootstrap套件 前言 在开发Web项目的时候,除了一些天赋异禀的开发人员之外,大多数的开发人员应该都跟我一样,对于如何建构出「美观」的用户接口而感到困扰.这时除了,加入美术人员这个选项之外,开发人员也可以自立自强,为Web项目内加入Bootstrap套件.透过使用Bootstrap套件中各种设计精美的样式.组件,来让Web项目的用户接口更加的美观大气,增加客户对于项目产出的好感度.本篇文章介绍如何在Web项目里使用Bootstrap套件,为自己留个纪录也希

ASP.NET MVC利用PagedList分页(二)PagedList+Ajax+JsRender

(原文) 昨天在ASP.NET MVC利用PagedList分页(一)的 最后一节提到,一个好的用户体验绝对不可能是点击下一页后刷新页面,所以今天来说说利用Ajax+PagedList实现无刷新(个人绝对局部刷新更准确 些)的分页.其实在PagedList.Mvc中早已经为我们提供好了Ajax分页的各种东东,但是这里我要自己写下. 实现思想: 1.客户端发送Ajax请求.2.服务器端响应请求并将响应结果回传给客户端.3.客户端接收响应结果并进行数据绑定. 实现方案: 大多数人都知道这个思想,但是

asp.net mvc easyui datagrid分页

提到 asp.net mvc 中的分页,很多是在用aspnetpager,和easyui datagrid结合的分页却不多,本文介绍的是利用easyui 中默认的分页控件,实现asp.net mvc分页. easyui datagrid分页要求数据采用的格式 :{total:2,row:[]}, 在asp.net mvc 中服务器端只要返回这符合这样格式的json数据就好. 页面前端: 服务器端: 附带asp.net 结合 easyui 增删改查的例子: asp.net mvc easyui d

基于ASP.NET MVC和Bootstrap搭建响应式个人博客站

1.0 为什么要做这个博客站? www.zynblog.com 在工作学习中,经常要搜索查找各种各样的资料,每次找到相关资料后都会顺手添加到浏览器书签中,时间一长,书签也就满了.而且下次再点击这个书签时,可能 就会忘记当时为什么要添加这个书签了,更有可能书签连接已经无效.这样一来,也就不方便自己查阅了.如果转载.收藏到自己的博客园账号中.CSDN账号 中,脚本之家中,知乎中等等,依然是很凌乱,不方便下次查阅. 因此,我下决心开发一个个人技术博客站.主要原因是:可以整合各种宝贵资源,将知识变为宝库

Asp.net MVC 使用PagedList 分页

在asp.net mvc 中,可以bootstrap来作为界面,自己来写分页程序.也可以使用PagedList来分页 1.首先,在NuGet程序包管理控制台 ,输入Install-Package PagedList.mvc 安装PagedList 和PageList.Mvc;查看程序中的引用,已经有了PagedList,和PagedList.Mvc两个文件的引用 2.使用,下面是一个实现了分页.排序.查找.分页功能的例子.通过多设置一个查找变量参数来保存当时的查找字符串 currentFilte