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

前几天做一个小小小项目，使用了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支持多查询条件分页，希望对大家有所帮助