Asp.Net MVC實作分頁、擷取、排序的程式碼展示

很多時候需要這樣的功能，對表格進行分頁、排序​​和檢索。本篇文章主要介紹了Asp.Net MVC 分頁、檢索、排序整體實現，有興趣的可以了解一下。

很多時候需要這樣的功能，將表格分頁、排序​​和檢索。這個有很多實作的方式，有現成的表格控制項、用前端的mvvm，使用者控制項。但很多時候看著很漂亮的東西你想進一步控制的時候卻不那麼如意。這裡自己實現一次，功能不是高大全，但求一個清楚明白，也歡迎園友拍磚。前端是bootstrap3+jPaginate，後台是基於membership。沒什麼難點。

先上效果圖。

分頁其實就是處理好 每頁項目數、總項目數、總頁數、目前頁。為了方便多用，就先從倉庫開始說起。

一、建立倉庫

  1.定義Ipager接口，需要分頁的模型倉庫繼承這個介面

namespace Protal.Model.Abstract
{
  /// <summary>
  /// 分页处理
  /// </summary>
  public interface IPager
  {
    /// <summary>
    /// 每页项目数
    /// </summary>
    /// <value>The page item count.</value>
   int PageItemCount { get; set; }
   /// <summary>
   /// 总页数
   /// </summary>
   /// <value>The totoal page.</value>
    int TotoalPage { get; }
    /// <summary>
    /// 显示的页数
    /// </summary>
    /// <value>The display page.</value>
    int DisplayPage { get; set; }
    /// <summary>
    /// 满足条件的总数目
    /// </summary>
    int TotalItem { get; set; }
  }
}

2.定義IUsersRepository，主要處理User 相關的業務邏輯。 Find函數是主要的查詢方法，order表示順反排序。

 public interface IUsersRepository : IPager
  {
    /// <summary>
    /// Post list
    /// </summary>
    /// <param name="order">Order expression</param>
    /// <param name="filter">Filter expression</param>
    /// <param name="skip">Records to skip</param>
    /// <param name="take">Records to take</param>
    /// <returns>List of users</returns>
    IEnumerable<User> Find(int order=0,string filter="", int skip = 0, int take = 10);
    /// <summary>
    /// Get single post
    /// </summary>
    /// <param name="name">User id</param>
    /// <returns>User object</returns>
    User FindByName(string name);
    /// <summary>
    /// Add new user
    /// </summary>
    /// <param name="user">Blog user</param>
    /// <returns>Saved user</returns>
    User Add(User user);
    /// <summary>
    /// Update user
    /// </summary>
    /// <param name="user">User to update</param>
    /// <returns>True on success</returns>
    bool Update(User user);
    /// <summary>
    /// Save user profile
    /// </summary>
    /// <param name="user">Blog user</param>
    /// <returns>True on success</returns>
    bool SaveProfile(User user);
    /// <summary>
    /// Delete user
    /// </summary>
    /// <param name="userName">User ID</param>
    /// <returns>True on success</returns>
    bool Remove(string userName);
  }

二、倉庫的實作與綁定

  主要方法：Membership的中的User和我們自訂的不一樣，所以存在一個轉換

 public class UsersRepository : IUsersRepository
  {
    /// <summary>
    /// The _user list
    /// </summary>
    private List<User> _userList = new List<User>();
    /// <summary>
    /// The _page item count
    /// </summary>
    private int _pageItemCount;
    /// <summary>
    /// The _display page
    /// </summary>
    private int _displayPage;
    /// <summary>
    /// The _usercount
    /// </summary>
    private int _usercount;
    /// <summary>
    /// The _total item
    /// </summary>
    private int _totalItem;
    /// <summary>
    /// 标记是否有查询条件 没有的话则返回全部数目
    /// </summary>
    private Func<User, bool> _func;

    /// <summary>
    /// Gets or sets the users.
    /// </summary>
    /// <value>The users.</value>
    public List<User> Users
    {
      get
      {
        int count;
        var usercollection = Membership.GetAllUsers(0, 999, out count);
        if (count == _usercount) return _userList;
        _usercount = count;
        var members = usercollection.Cast<MembershipUser>().ToList();
        foreach (var membershipUser in members)//这里存在一个转换
        {
          _userList.Add(new User
          {
            Email = membershipUser.Email,
            UserName = membershipUser.UserName,
            //roles password
          });
        }
        return _userList;
      }
      set { _userList = value; }
    }   
//查询
public IEnumerable<User> Find(int order = 0, string filter = "", int skip = 0, int take = 10)
    {
      if (take == 0) take = Users.Count;
      //过滤
      _func = string.IsNullOrEmpty(filter) ? (Func<User, bool>) (n => n.UserName != "") : (n => n.UserName.Contains(filter));
      var users = Users.Where(_func).ToList();
      //更新总数目
      _totalItem = users.Count;
      users = order == 0 ? users.OrderBy(n => n.UserName).ToList() : users.OrderByDescending(n => n.UserName).ToList();
      return users.Skip(skip).Take(take);
    }
 /// <summary>
    /// 每页项目数
    /// </summary>
    /// <value>The page item count.</value>
    public int PageItemCount
    {
      get
      {
        if (_pageItemCount == 0)
        {
          _pageItemCount = ProtalConfig.UserPageItemCount;
        }
        return _pageItemCount;
      }
      set { _pageItemCount = value; }
    }

    /// <summary>
    /// 总页数
    /// </summary>
    /// <value>The totoal page.</value>
    public int TotoalPage
    {
      get
      {
        var page = (int) Math.Ceiling((double) TotalItem/PageItemCount);
        return page==0?1:page; 
      }
    }
    /// <summary>
    /// 显示的页数
    /// </summary>
    /// <value>The display page.</value>
    public int DisplayPage
    {
      get
      {
        if (_displayPage == 0)
        {
          _displayPage = ProtalConfig.UserDisplayPage;
        }
        return _displayPage;
      }
      set { _displayPage = value; }
    }


    /// <summary>
    /// 满足条件的总数目 保持更新
    /// </summary>
    /// <value>The total item.</value>
    public int TotalItem
    {
      get
      {
        if (_func == null)
          _totalItem = Users.Count;
        return _totalItem;
      }
      set { _totalItem = value; }
    }
}

ProtalConfig.UserDisplayPage 這裡是透過配置實作一個預設頁數，讓使用者可以再webconfig中更改行列的數目。

public static int UserPageItemCount
        {
          get
          {
            if (_userPageItemCount == 0)
            {
              _userPageItemCount = WebConfigurationManager.AppSettings["UserPageItemCount"] != null ?
                Convert.ToInt16(WebConfigurationManager.AppSettings["UserPageItemCount"]) : 5;
            }
            return _userPageItemCount;
          }
          set
          {
            _userPageItemCount = value;
          }
        }

再進行綁定：

#

 _kernel.Bind<IUsersRepository>().To<UsersRepository>();

##三、控制器部分

我們需要兩個頁面，一個主頁面Index，一個負責局部刷新的部分視圖UserTable

下面是主要的方法，主要邏輯都在在倉庫中處理了。

  [Authorize]
  public class UserManagerController : Controller
  {
    /// <summary>
    /// The _repository
    /// </summary>
    private readonly IUsersRepository _repository;

    /// <summary>
    /// Initializes a new instance of the <see cref="UserManagerController"/> class.
    /// </summary>
    /// <param name="iRepository">The i repository.</param>
    public UserManagerController(IUsersRepository iRepository)
    {
      _repository = iRepository; 
    }

    /// <summary>
    /// Indexes the specified page index.
    /// </summary>
    /// <param name="pageIndex">Index of the page.</param>
    /// <returns>ActionResult.</returns>
    public ActionResult Index(int pageIndex=1)
    {
      ViewBag.DisplayPage = _repository.DisplayPage;
      pageIndex = HandlePageindex(pageIndex);
     
      //支持地址栏直接分页
      ViewBag.CurrentPage = pageIndex;
      return View();
    }


    /// <summary>
    /// Users table. 分页模块
    /// </summary>
    /// <param name="pageIndex">Index of the page.</param>
    /// <param name="order">The order.</param>
    /// <param name="filter">The filter str.</param>
    /// <returns>ActionResult.</returns>
    public ActionResult UserTable(int pageIndex = 1, int order = 0, string filter = "")
    {
      pageIndex = HandlePageindex(pageIndex);
      var skip = (pageIndex - 1) * _repository.PageItemCount;
      var users = _repository.Find(order,filter, skip, _repository.PageItemCount);
      
      //总用户数
      ViewBag.TotalUser = _repository.TotalItem;
      //总页数
      ViewBag.TotalPageCount = _repository.TotoalPage; ;

      return PartialView(users);
    }

    /// <summary>
    /// 处理页数 防止过大或过小
    /// </summary>
    /// <param name="index"></param>
    /// <returns></returns>
    private int HandlePageindex(int index)
    {
      var totoalpage = _repository.TotoalPage;
      if (index == 0) return 1;
      return index > totoalpage ? totoalpage : index;
    }
}

四、檢視部分Html jquery

 1.Index.cshtml

<script src="~/Scripts/form.js"></script>
<p class="container">
  <h4 class="bottomline">管理用户</h4>
  <p>
    <button data-target="#adduser" id="adduserbt" data-toggle="modal" class="btn btn-info btn-hover">新增用户</button>
    <button class="btn btn-danger" id="deluser">删除</button>
    <span class="errorinfo"></span>
    <input type="search" class="pull-right" id="usersearch" placeholder="搜索"/>
  </p>
  <p id="userpart">
     @Html.Action("UserTable",new{pageIndex=ViewBag.CurrentPage})
  </p>
  <p id="userpager"></p>
  <input type="hidden" id="dispalypage" value="@ViewBag.DisplayPage"/>
  <input type="hidden" id="page" value="@ViewBag.CurrentPage"/>
  <input type="hidden" id="currentpage" value="@ViewBag.CurrentPage"/>

</p>
<p class="modal fade adduserbox"id="adduser" tabindex="1" role="dialog" aria-hidden="true">
  <p class="modal-content">
    <p class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true" >×</button>
       <h4 class="modal-title">Add new User</h4>
    </p>
    <p class="modal-body">
      @{
        Html.RenderAction("Create","UserManager");
      }
    </p>
  </p>
</p>

@section Scripts {
  @Scripts.Render("~/bundles/jqueryval")
}

2.UserTable.cshtml,角色部分還未處理，這個表格更新之後，也會更新滿足條件的使用者數和新的總頁數，觸發Jpaginate重新分頁一次。

@model IEnumerable<Protal.Model.Data.User.User>
 <table id="usertable" class="table table-striped table-condensed table-hover table-bordered">
    <tr>
      <th><input type="checkbox" id="allcheck" /><label for="allcheck">全选</label></th>
      <th><a href="#" id="usersort" data-order="0" class="glyphicon-sort">名称</a></th>
      <th>角色</th>
      <th>E-mail</th>
    </tr>
    <tbody>
      @foreach (var item in Model) {
        <tr>
          <td> <input type="checkbox" data-id="@item.UserName" /></td>
          <td> <a>@item.UserName</a> </td>
          <td> @Html.Raw(item.Role) </td>
          <td> @item.Email</td>
        </tr>
      }</tbody>
   <tfoot>
     <tr>
       <td colspan="4">
         <span>@Html.Raw("共"+ViewBag.TotalUser+"人")</span> @*<span>@ViewBag.TotalPageCount</span>*@
       </td>
     </tr>
   </tfoot>
  </table>
 <input type="hidden" id="totoalpage" value="@ViewBag.TotalPageCount"/>

3.腳本

其中用到的像checkall，infoShow 都是自己擴充的一些簡單的方法，用於全選和提示。

 

$(function () {

    var options = {
      dataType: 'json',
      success: processJson
    };
    pageagin($("#totoalpage").val());
    //分页
    function pageagin(totalcount) {
      $("#userpager").paginate({
        count: totalcount,
        start: $("#page").val(),
        dispaly: $("#dispalypage").val(),
        boder: false,
        border_color: '#fff',//自己调整样式。
        text_color: 'black',
        background_color: 'none',
        border_hover_color: '#ccc',
        text_hover_color: '#000',
        background_hover_color: '#fff',
        images: false,
        mouse: 'press',
        onChange: function (page) { //翻页
          paging(page);
          $("#currentpage").val(page);
        }
      });
    }
    //分页更新
    function paging(page) {
      $.post("/Users/UserTable", { pageIndex: page, order: $("#userpart").attr("data-order"), filter: $.trim($("#usersearch").val()) }, function (data) {
        $("#userpart").html(data);
      });
    }

    //排序
    $("#usersort").live("click",function () {
      $("#userpart").triggerdataOrder();
      paging( $("#currentpage").val());
    });
    
    //搜索
    $("#usersearch").keyup(function() {
      paging($("#currentpage").val());
      pageagin($("#totoalpage").val());
    });

    //处理form
    $("#userForm").submit(function () {
      $(this).ajaxSubmit(options);
      return false;
    });
    function processJson(data) {
      if (data == 1) {
        location.reload();
      } else {
        alert("添加失败");
      }
    }

    //高亮
    $("#unav li:eq(0)").addClass("active");
    $("#adnav li:eq(2)").addClass("active");
    //全选/全不选
    $("#allcheck").checkall($("#usertable tbody input[type='checkbox']"));

    //删除用户
    $("#deluser").click(function () {
      var checks = $("#usertable tbody input[type='checkbox']:checked");
      var lens = checks.length;
      if (lens == 0) {
        $.infoShow("未选择删除对象",0);
        return false;
      }
      if (confirm("确定要删除所选中用户？")) {
        for (var i = 0; i < lens; i++) {
          var $chek = checks.eq(i);
          var id = $chek.attr("data-id");
          var tr = $chek.parent().parent();
          $.post("Users/DeleteUser", { id: id }, function (data) {
            if (data == 1) {
              tr.fadeOut();
              $.infoShow("删除成功", 1);
            } else {
              $.infoShow("删除失败", 0);
            }
          });
        }
      }
       return true;
    });
    
    // 增加用户
    $("#adduserbt").click(function() {
      $(".modal-header").show();
    });
  })

到這裡就是全部的程式碼,供大家和自己參考。

再給大家看兩張效果圖，一個是kendoui的grid，一個是Angular做的分頁。後面有機會給大家介紹。

Kendo- Grid

Kendo和MVC框架融合度比較高，它的核心程式碼如下：

@model IEnumerable<Kendo.Mvc.Examples.Models.ProductViewModel>

@(Html.Kendo().Grid(Model)
  .Name("Grid")
  .Columns(columns =>
  {
    columns.Bound(p => p.ProductID).Groupable(false);
    columns.Bound(p => p.ProductName);
    columns.Bound(p => p.UnitPrice);
    columns.Bound(p => p.UnitsInStock);
  })
  .Pageable()
  .Sortable()
  .Scrollable() 
  .Filterable()  
  .DataSource(dataSource => dataSource    
    .Ajax()
    .ServerOperation(false)    
   )
)

AngularJs 核心還是呼叫封裝好的API函數，相當於上面的倉庫中的方法，然後透過模型綁定。

總結一下：自己實現程式碼量比較多，功能不全，有重複造輪子的感覺，但可以較好的控制，基本夠用；kendo的方式感覺高大全，用熟了開發速度快。就是多一些引用，且需要擔心kendoui和其他的ui框架會有衝突。前端MVVM的方式我了解還不夠深，感覺前端腳本的程式碼量也蠻多，效果不錯。但產生的html程式碼很少。上面這個表格。 chrome F12或右鍵查看原始碼都是下面這樣子的：

主要的就一個p 

 <p data-ng-app="blogAdmin" data-ng-view="" id="ng-view"></p>

自我保護倒是蠻好，也就是SEO可能有問題。應該還有更好的方式，猿友指點。

  
  
  
  
  
  
  
  
  






  


  
  
  

    <p data-ng-app="blogAdmin" data-ng-view="" id="ng-view"></p>
  
  
  

PS：這個東西沒什麼難度，邏輯都在倉庫中，要源碼的同學我後續分離出來了再貼出來。當然這個又很多方式，我也不是要秀什麼框架，但我目前專案的需求是要這麼分開的。一個控制器是可用解決所有問題，但我其他模型也要分頁又要方便測試難道我都寫在控制器中嗎？

以上是Asp.Net MVC實作分頁、擷取、排序的程式碼展示的詳細內容。更多資訊請關注PHP中文網其他相關文章！