MVC+Bootstrap+Drapper使用PagedList.Mvc支持多查询条件分页
前几天做一个小小小项目,使用了MVC+Bootstrap,以前做分页都是异步加载Mvc部分视图的方式,因为这个是小项目,就随便一点。一般的列表页面,少不了有查询条件,下面分享下Drapper+PagedList.Mvc支持多查询条件分页的使用经验。
构建强类型Model
1.查询参数的Model
public class OrderQueryParamModel
{
/// <summary>
/// 订单编号
/// </summary>
public string OrderNo { get; set; } /// <summary>
/// 客户名称
/// </summary>
public string CustomerName { get; set; }
}
2.Orders分页数据Model
PagedList提供了一个StaticPagedList<T>泛型类来封装数据。(看看StaticPagedList的源代码,使用非常方便,把T类型的数据subset,pageNumber,pageSize,totalCount初始化进去就可以了。
)
public StaticPagedList(IEnumerable<T> subset, IPagedList metaData) : this(subset, metaData.PageNumber, metaData.PageSize, metaData.TotalItemCount)
{
}
3.Orders展示页面整体Model
public class OrderViewModel
{
public OrderQueryParamModel QueryModel { get; set; } public PagedList.StaticPagedList<OrderModel> OrderList { get; set; }
}
OK,接下来看看在Controller中如何给来OrderViewModel填充数据吧
public ActionResult List(OrderViewModel orderViewModel, int page = )
{
var pagesize = ;
var count = ; var orders = _orderService.GetOrders(page, pagesize, orderViewModel.QueryModel, ref count); orderViewModel.OrderList = new StaticPagedList<OrderModel>(orders, page, pagesize, count); return View(orderViewModel);
}
Controller中代码很简单,接收POST过来的两个参数,orderViewModel:包含查询参数Model,page:PagedList定义的当前页。
顺便看看GetOrders()这个方法吧,为了省事懒得写存储过程,直接用了Drapper的QueryMultiple,感觉很强大啊。
public List<OrderModel> GetOrders(int pageindex, int pagesize, OrderQueryParamModel query, ref int count)
{
var orders = new List<OrderModel>();
var whereStr = string.Empty; if (query != null)
{
if (!string.IsNullOrEmpty(query.CustomerName))
{
whereStr += string.Format(" and CustomerName like '%{0}%' ", query.CustomerName);
}
} var cmd = string.Format(@"SELECT COUNT(*) FROM [Orders] WHERE 1=1 {0};
SELECT * FROM (
SELECT *, row_number() OVER (ORDER BY orderId DESC ) AS [row]
FROM [Orders] WHERE 1=1 {0} )t
WHERE t.row >@indexMin AND t.row<=@indexMax", whereStr); using (IDbConnection conn = BaseDBHelper.GetConn())
{
using (var multi = conn.QueryMultiple(cmd,
new { indexMin = (pageindex - ) * pagesize, indexMax = pageindex * pagesize }))
{
count = multi.Read<int>().SingleOrDefault();
orders = multi.Read<OrderModel>().ToList();
}
}
return orders;
}
这里要注意下的是,multi.Read的顺序必须和Sql查询出来的数据集合顺序一样。
前端数据展示
1.首先在View中添加引用
@using PagedList.Mvc;
@using PagedList;
@model Models.OrderViewModel
2.为查询创建一个表单
<div class="page-header"> @using (Html.BeginForm("List", "Order", FormMethod.Post, new { id = "OrderForm", @class = "form-horizontal" }))
{
@Html.Raw("客户名称:") @Html.TextBoxFor(m => m.QueryModel.CustomerName)
@Html.Raw("订单编号:") @Html.TextBoxFor(m => m.QueryModel.OrderNo) <button type="submit" class="btn btn-purple btn-sm">查询</button> //咿,这个干吗用的?后面会解释
<input type="hidden" name="page" value="" />
}
</div>
3.绑定数据
<table class="table loading table-bordered margin-top-5 margin-bottom-5">
<thead>
<tr>
<th>订单编号</th>
<th>客户名称</th>
<th>手机号码</th>
<th>商品数量</th>
<th>订单金额</th>
<th>下单时间</th>
</tr>
</thead>
<tbody> @foreach (var item in Model.OrderList)
{
<tr>
<td>@item.orderNo</td>
<td>@item.customerName</td>
<td>@item.customerMobile</td>
<td>@item.productQuantity</td>
<td>@item.orderAmount</td>
<td>@item.orderCreateTime</td>
</tr>
}
</tbody>
</table>
4.绑定分页插件数据
@if (Model.OrderList != null&&Model.OrderList.Any())
{
<div class="pagedList" style="margin:0 auto;text-align:center">
@Html.PagedListPager(Model.OrderList, page => Url.Action("List", new { page }), PagedListRenderOptions.Classic)
</div>
}
OK,一切搞定了,运行你会发现,分页导航生成的链接都是 "/Order/List/2" 这种形式,无法支持我们把其他查询参数也传递到Controller。
我们换一个思路,为什么不把page这个参数放到form表单去了? 还记得我们form中有一个name=page 的hidden input吧?
$(function () { $(".pagination > li > a").click(function () { event.preventDefault(); var index = $(this).html(); if (index == '»') {
index = parseInt($(".pagination > li[class=active] > a").html()) + 1;
}
if (index == '«') {
index = parseInt($(".pagination > li[class=active] > a").html()) - 1;
} if (index < 1) return; $("input[name=page]").val(index);
$("#OrderForm").submit();
}); });
通过这段JS,直接把原来分页的a标签作废了,获取他的page值放到了form中,然后直接触发form的submit(),这样就满足了我们一般的查询业务需求。
本文博客园地址:http://www.cnblogs.com/struggle999/p/6918524.html
MVC+Bootstrap+Drapper使用PagedList.Mvc支持多查询条件分页的更多相关文章
- MVC客户管理(添加、修改、查询、分页)
ASP.NET MVC搭建项目后台UI框架—6.客户管理(添加.修改.查询.分页) 目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2 ...
- KnocoutJs+Mvc+BootStrap 学习笔记(Mvc)
Mvc 1.Html 增加扩展方法 using System.Web.Mvc; namespace KnockoutBootstrapMvc.Entensions { public static ...
- 再谈使用X.PagedList.Mvc 分页(ASP.NET Core 2.1)
在以前的博文中写过使用X.PagedList.Mvc组件来对ASP.NET MVC应用程序进行分页,可以参考此篇随笔:Asp.net MVC 使用PagedList(新的已更名 为X.PagedLis ...
- MVC Bootstrap极速开发框架
ASP.NET MVC Bootstrap极速开发框架 前言 每次新开发项目都要从头开始设计?有木有一个通用的快速开发框架?并且得是ASP.NET MVC And Bootstrap?数据库不要手工 ...
- SpringMVC Hibernate+Spring+Spring MVC+Bootstrap的管理系统实现
SpringMVC学习系列(12) 完结篇 之 基于Hibernate+Spring+Spring MVC+Bootstrap的管理系统实现 到这里已经写到第12篇了,前11篇基本上把Spring M ...
- 使用EF+ASP.NET MVC+Bootstrap开发一个功能强大的问卷调查系统
功能简介 支持七大题型 下拉选择题.单选题.多选题.填空题.数字题.问答题.组合/矩阵题(单选组合.多选组合.填空组合.数字组合) 题库支持 每个问卷都要设置姓名.年龄.性别.学历,怎么办?题库帮您轻 ...
- Asp.net MVC 使用PagedList(新的已更名 为X.PagedList.Mvc) 分页
在asp.net mvc 中,可以bootstrap来作为界面,自己来写分页程序.也可以使用PagedList(作者已更名为 X.PagedList.Mvc)来分页. 1.首先,在NuGet程序包管理 ...
- Asp.Net MVC+BootStrap+EF6.0实现简单的用户角色权限管理
这是本人第一次写,写的不好的地方还忘包含.写这个的主要原因是想通过这个来学习下EF的CodeFirst模式,本来也想用AngularJs来玩玩的,但是自己只会普通的绑定,对指令这些不是很熟悉,所以就基 ...
- 分享基于EF+MVC+Bootstrap的通用后台管理系统及架构
基于EF+MVC+Bootstrap构建通用后台管理系统,集成轻量级的缓存模块.日志模块.上传缩略图模块.通用配置及服务调用, 提供了OA.CRM.CMS的原型实例,适合快速构建中小型互联网及行业 ...
随机推荐
- Hadoop之HDFS原理及文件上传下载源码分析(上)
HDFS原理 首先说明下,hadoop的各种搭建方式不再介绍,相信各位玩hadoop的同学随便都能搭出来. 楼主的环境: 操作系统:Ubuntu 15.10 hadoop版本:2.7.3 HA:否(随 ...
- CSS开发框架技术OOCSS编写和管理CSS的方法
目前最流行的CSS开发框架技术当属OOCSS,尽管还有其他类似技术(如BEM).这些方法试图对CSS采用面向对象的编程原则.样式语言与面向对象的设计原则在概念之间存在一定的问题.欠缺经验的人员可能不会 ...
- 优雅地解决Ajax接口参数来自另一个接口的问题
最近闲赋在家,终于有时间回顾我在工作中遇到的一些东西,由于经验不足,有些方面做的不是很好.在上家公司曾经遇到一个小问题,就是Ajax的接口中有参数是从另一个接口后台传来的.当时我的做法是将需要参数的接 ...
- 关于mysql查询区分大小写
使用查询语句时,携带collate utf8_bin 在SQL语句中使用collate 使用collate子句,能够为一个比较覆盖任何默认校对规则.collate可以用于多种SQL语句中,比如wher ...
- iOS原生地图与高德地图的使用
原生地图 1.什么是LBS LBS: 基于位置的服务 Location Based Service 实际应用:大众点评,陌陌,微信,美团等需要用到地图或定位的App 2.定位方式 1.GPS定位 2. ...
- PHP 魔术方法__set() __get() 方法
a); //output: 123 var_dump($s->b); //output: 123 var_dump($s->c); //output: null var_dump($s-& ...
- Array和ArrayCollection作为数据源的一个应用区别
在不用[Enabled]元标签的前提下,将一个Array赋值给DataGrid.DataList等控件的DataProvider后,当Array值发生改变时,控件显示内容不会及时更新(可调用控件的in ...
- 为用户增加sudo权限(修改sudoers文件)
在使用Linux系统过程中,通常情况下,我们都会使用普通用户进行日常操作,而root用户只有在权限分配及系统设置时才会使用,而root用户的密码也不可能公开.普通用户执行到系统程序时,需要临时提升权限 ...
- IO调度器原理介绍
IO调度器(IO Scheduler)是操作系统用来决定块设备上IO操作提交顺序的方法.存在的目的有两个,一是提高IO吞吐量,二是降低IO响应时间.然而IO吞吐量和IO响应时间往往是矛盾的,为了尽量平 ...
- Kafka官方文档
Apache Kafka是 一个分布式消息发布订阅系统.它最初由LinkedIn公司基于独特的设计实现为一个分布式的提交日志系统( a distributed commit log),,之后成为Apa ...