MVC5+EF6 入門完整教程七


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

前面我們已經講解過表格顯示數據了,現在我們添加三個常用功能:

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

文章提綱

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

前置准備 – 應用之前樣式,增加測試數據

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

界面樣式修改前:

下面對Views à Account à Index.cshtml進行如下修改:

  1. 應用布局頁 _LayoutAdmin.cshtml

2. 將HTML部分body之外的全部刪掉,只留下正文內容,運行這個頁面。

對樣式做一些小調整,最終變成如下樣式。

(調整樣式的步驟略,大家可以直接查看源碼)

通過Create New 新建兩條測試數據,為后面分頁做准備,后面每3條分一頁。

目前准備工作就OK了,下面開始今天功能的操作。

詳細步驟

一、標題添加鏈接排序功能

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

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

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

點擊標題就可以在升序倒序中切換了

二、增加名字搜索功能

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

我們添加了一個 searchString 的參數,並且添加了一個where字句用來過濾名字。

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

現在測試一下,運行這個頁面,可以看到結果符合我們的預期。

好的,下面就完成最后一個功能,分頁。

三、增加分頁功能(使用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的,如下圖。

倒序排

 

如果按下面這種方式

不論正序還是倒序,都出現如下結果:

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

 

總結

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

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

這次的知識點比較碎,詳細的可以參考代碼。

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

好了,今天就到這里。


 




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM