MVC5+EF6 入門完整教程七

本篇咱們針對表格顯示添加一些新功能。

前面咱們已經講解過表格顯示數據了，如今咱們添加三個經常使用功能：

對顯示結果進行排序、過濾、分頁。

文章提綱

• 理論基礎/前置準備
• 詳細步驟
• 總結

前置準備 – 應用以前樣式，增長測試數據

咱們對以前的Views à Account à Index.cshtml 進行修改以完成今天的示例。

界面樣式修改前：

下面對Views à Account à Index.cshtml進行以下修改：

1. 應用佈局頁 _LayoutAdmin.cshtml

2. 將HTML部分body以外的所有刪掉，只留下正文內容，運行這個頁面。

對樣式作一些小調整，最終變成以下樣式。

（調整樣式的步驟略，你們能夠直接查看源碼）

經過Create New 新建兩條測試數據，爲後面分頁作準備，後面每3條分一頁。

目前準備工做就OK了，下面開始今天功能的操做。

詳細步驟

1、標題添加連接排序功能

1. 打開 Controllers à AccountController.cs,  修改Index方法以下

2. 打開 ViewsàAccountàIndex.cshtml, 替換標題內容。

@Html.ActionLink("UserName", "Index", new { sortOrder = ViewBag.NameSortParm })

點擊標題就能夠在升序倒序中切換了

2、增長名字搜索功能

繼續修改Index方法，增長條件篩選功能。改動的部分見黃色背景部分。

咱們添加了一個 searchString 的參數，而且添加了一個where字句用來過濾名字。

如今咱們再去ViewsàAccountàIndex.cshtml 中添加一個text box用來傳遞這個過濾值。

如今測試一下，運行這個頁面，能夠看到結果符合咱們的預期。

好的，下面就完成最後一個功能，分頁。

3、增長分頁功能(使用PagedList.MVC)

安裝PagedList.MVC

打開Package Manager Console，確保Package source是nuget.org, 輸入

install-package PagedList.mvc

AccountController.cs中先添加聲明。

using PagedList;

修改Index方法

Index的增長以下highlight部分（我只截取了開頭和結尾的部分）

咱們添加了兩個傳入參數 currentFilter和page

頁面第一次顯示或沒有點擊頁碼或排序時，全部傳入的值爲null

當點擊分頁連接時，傳入頁碼。

current sort order須要被傳入，這是由於在分頁時，須要保持相同順序。

ViewBag.CurrentSort = sortOrder;

另一個屬性， ViewBag.CurrentFilter, 提供view當前的過濾字符串。

這個值用來維持分頁時過濾條件不變，而且必須在分頁時從新顯示在text box中。若是子分頁時過濾條件改變了，頁面必須重設爲1，由於新的過濾條件會致使顯示不一樣的數據. 當過濾條件改變時， searchString不爲null

在最後，ToPagedList將查詢結果轉換成分頁的一個集合傳遞到view中。

Note

?? 操做符叫作 null-coalescing operator.

這個操做符給可爲null的類型定義一個默認值。 （page ?? 1）表示若是page爲null返回1，不然返回page的值。

你們直接看下面例子：

在View中增長分頁的顯示和功能連接

主要增長/修改 以下部分：

頂部的@model聲明指定view得到一個PagedList對象。

（原來是List對象，見註釋部分）

增長@using PagedList.Mvc , 得到相關分頁的helper

重載BeginForm爲get方式。

咱們以前文章提到過，若是不涉及更新數據操做，建議用get方式。

 

text box 初始化爲CurrentFilter.

這樣當切換到下一頁是能夠看到當前過濾條件。

表格的標題連接也把CurrentFilter傳過去。

最後再加上相似 Page x of x格式的當前頁數和總共數量。

若是沒有頁面顯示，則顯示 Page 0 of 0

這種狀況下，page number>page count.

根據Index方法能夠得知PageNumber是1，Model.PageCount是0.

分頁按鈕經過PagedListPager helper來顯示。

最終結果

第二頁

遺留問題

最後作了個實驗，發現有個問題，知道的園友幫忙解答下。

對UserName排序沒問題。

我用Email排序時，若是直接把條件加到表達式中，都是OK的，以下圖。

倒序排

 

若是按下面這種方式

或

不論正序仍是倒序，都出現以下結果：

問題總結，下面兩種寫法，第二種不符合預期。

 

總結

本次咱們主要講解了排序、過濾條件、分頁三個功能。

另外還有個遺留問題，知道的園友解答下。

此次的知識點比較碎，詳細的能夠參考代碼。

請充分理解本篇文章所講的幾個例子。