MVC+Bootstrap+Drapper使用PagedList.Mvc支持多查询条件分页

2024-02-21 19:13:04 65

前几天做一个小小小项目，使用了MVC+Bootstrap，以前做分页都是异步加载Mvc部分视图的方式，因为这个是小项目，就随便一点。一般的列表页面，少不了有查询条件，下面分享下Drapper+PagedList.Mvc支持多查询条件分页的使用经验。

在MVC中我们一般习惯使用强类型Model，通过分析Orders的展示页面，来构建这个Model。

1.查询参数的Model

publicclassOrderQueryParamModel
{
///
///订单编号
///
publicstringOrderNo{get;set;}
///
///客户名称
///
publicstringCustomerName{get;set;}
}

2.Orders分页数据Model

PagedList提供了一个StaticPagedList泛型类来封装数据。（看看StaticPagedList的源代码，使用非常方便，把T类型的数据subset，pageNumber，pageSize，totalCount初始化进去就可以了。
）

publicStaticPagedList(IEnumerablesubset,IPagedListmetaData):this(subset,metaData.PageNumber,metaData.PageSize,metaData.TotalItemCount)
{
}

3.Orders展示页面整体Model

publicclassOrderViewModel
{
publicOrderQueryParamModelQueryModel{get;set;}
publicPagedList.StaticPagedListOrderList{get;set;}
}

OK，接下来看看在Controller中如何给来OrderViewModel填充数据吧

publicActionResultList(OrderViewModelorderViewModel,intpage=1)
{
varpagesize=10;
varcount=0;
varorders=_orderService.GetOrders(page,pagesize,model.QueryModel,refcount);
orderViewModel.OrderList=newStaticPagedList(orders,page,pagesize,count);
returnView(orderViewModel);
}

Controller中代码很简单，接收POST过来的两个参数，orderViewModel：包含查询参数Model，page：PagedList定义的当前页。

顺便看看GetOrders()这个方法吧，为了省事懒得写存储过程，直接用了Drapper的QueryMultiple，感觉很强大啊。

publicListGetOrders(intpageindex,intpagesize,OrderQueryParamModelquery,refintcount)
{
varorders=newList();
varwhereStr=string.Empty;
if(query!=null)
{
if(!string.IsNullOrEmpty(query.CustomerName))
{
whereStr+=string.Format("andCustomerNamelike'%{0}%'",query.CustomerName);
}
}
varcmd=string.Format(@"SELECTCOUNT(*)FROM[Orders]WHERE1=1{0};
SELECT*FROM(
SELECT*,row_number()OVER(ORDERBYorderIdDESC)AS[row]
FROM[Orders]WHERE1=1{0})t
WHEREt.row>@indexMinANDt.row<=@indexMax",whereStr);
using(IDbConnectionconn=BaseDBHelper.GetConn())
{
using(varmulti=conn.QueryMultiple(cmd,
new{indexMin=(pageindex-1)*pagesize,indexMax=pageindex*pagesize}))
{
count=multi.Read().SingleOrDefault();
orders=multi.Read().ToList();
}
}
returnorders;
}

这里要注意下的是，multi.Read的顺序必须和Sql查询出来的数据集合顺序一样。

好了，数据就这么愉快的获取了，最后来看看关键的前端数据展示吧。

1.首先在View中添加引用

@usingPagedList.Mvc;
@usingPagedList;
@modelModels.OrderViewModel

2.为查询创建一个表单


@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)
查询
//咿，这个干吗用的？后面会解释

}

3.绑定数据




订单编号
客户名称
手机号码
商品数量
订单金额
下单时间



@foreach(variteminModel.OrderList)
{

@item.orderNo
@item.customerName
@item.customerMobile
@item.productQuantity
@item.orderAmount
@item.orderCreateTime

}

4.绑定分页插件数据

@if(Model.OrderList!=null&&Model.OrderList.Any())
{

@Html.PagedListPager(Model.OrderList,page=>Url.Action("List",new{page}),PagedListRenderOptions.Classic)

}

OK，一切搞定了，运行你会发现，分页导航生成的链接都是"/Order/List/2"这种形式，无法支持我们把其他查询参数也传递到Controller。

我们换一个思路，为什么不把page这个参数放到form表单去了？还记得我们form中有一个name=page的hiddeninput吧？

$(function(){
$(".pagination>li>a").click(function(){
event.preventDefault();
varindex=$(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()，这样就满足了我们一般的查询业务需求。

以上所述是小编给大家介绍的MVC+Bootstrap+Drapper使用PagedList.Mvc支持多查询条件分页，希望对大家有所帮助，如果大家有任何疑问欢迎给我们留言，小编会及时回复大家的！

MVC+Bootstrap+Drapper使用PagedList.Mvc支持多查询条件分页

热门推荐

随机推荐