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

2024-07-10 13:32:24

字体：大中小

来源：转载

供稿：网友

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

在MVC中我们一般习惯使用强类型Model，通过分析Orders的展示页面，来构建这个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 = 1)    {      var pagesize = 10;      var count = 0;      var orders = _orderService.GetOrders(page, pagesize, model.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 - 1) * 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="1" />  }</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()，这样就满足了我们一般的查询业务需求。

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

注：相关教程知识阅读请移步到ASP.NET教程频道。

上一篇：jQuery+Asp.Net实现省市二级联动功能的方法

下一篇：基于Cookie使用过滤器实现客户每次访问只登录一次