學習ASP.NET Core Razor 編程系列目錄

學習ASP.NET Core Razor 編程系列一

學習ASP.NET Core Razor 編程系列二——添加一個實體

學習ASP.NET Core Razor 編程系列三——創建數據表及創建項目基本頁面

學習ASP.NET Core Razor 編程系列四——Asp.Net Core Razor列表模板頁面

學習ASP.NET Core Razor 編程系列五——Asp.Net Core Razor新建模板頁面

學習ASP.NET Core Razor 編程系列六——數據庫初始化

學習ASP.NET Core Razor 編程系列七——修改列表頁面

學習ASP.NET Core Razor 編程系列八——並發處理

學習ASP.NET Core Razor 編程系列九——增加查詢功能

學習ASP.NET Core Razor 編程系列十——添加新字段

學習ASP.NET Core Razor 編程系列十一——把新字段更新到數據庫

學習ASP.NET Core Razor 編程系列十二——在頁面中增加校驗

學習ASP.NET Core Razor 編程系列十三——文件上傳功能（一）

學習ASP.NET Core Razor 編程系列十四——文件上傳功能（二）

學習ASP.NET Core Razor 編程系列十五——文件上傳功能（三）

在本教程中，我們來學習如何進行排序。

通過前面的教程學習，你可以實現一個簡單的書籍管理系統。 在本教程將向書籍索列表頁面中添加排序功能。

下圖顯示你完成本教程後書籍列表頁面的樣子。 列標題是一個鏈接，用戶可以單擊它使數據按該列排序。 反復單擊列標題在升序排列和降序排列之間切換。

一、向 OnGetAsync方法添加排序功能

為了在書籍列表頁面中添加排序功能，你將更改書籍控制器中的OnGetAsync或OnGet方法並向書籍索引視圖添加相關的代碼。

1) 在Visual Studio 2017的解決方案資源管理器中找到 Books\ Index.cshtml.cs文件，添加排序字符串，代碼如下：

public string NameSort { get; set; }
public string DateSort { get; set; }
public string CurrentFilter { get; set; }
public string CurrentSort { get; set; }    

2) 同時修改OnGetAsync(string author, string searchString)方法，添加排序字符串：

        public async Task OnGetAsync(string author, string searchString,string sortOrder)
        { 

            IQueryable<string> AuthorQuery = from m in _context.Book
                                             orderby m.Author
                                             select m.Author; 

            var books = from m in _context.Book
                         select m; 

            if (!String.IsNullOrEmpty(searchString))
            {
                books = books.Where(s => s.Name.Contains(searchString));
            }
        

            if (!String.IsNullOrEmpty(author))
            {
                books = books.Where(x => x.Author == author);
            }
            Authors = new SelectList(await AuthorQuery.Distinct().ToListAsync()); 

//排序
            NameSort = String.IsNullOrEmpty(sortOrder) ? "name_desc" : "";
            DateSort = sortOrder == "Date" ? "date_desc" : "Date"; 
 
            switch (sortOrder)
            {
                case "name_desc":
                    books = books.OrderByDescending(s => s.Name);
                    break;
                case "Date":
                    books = books.OrderBy(s => s.ReleaseDate);
                    break;
                case "date_desc":
                    books = books.OrderByDescending(s => s.ReleaseDate);

                    break;
                default:
                    books = books.OrderBy(s => s.Name);
                    break;
            }
             Book = await books.AsNoTracking().ToListAsync();

}

按上面的代碼從 URL 中的查詢字符串中接收sortOrder參數。 ASP.NET Core 提供的查詢字符串作為參數傳遞給的操作方法。 “Name”或”Date”，後面可以選擇性跟用於指定降序順序的下劃線和”desc”構成參數字符串。 默認排序順序為升序。

第一次請求索引頁時，沒有任何查詢字符串。 書籍按名稱升序顯示也就是缺省值中的排序方式。 當用戶單擊列標題的超鏈接，將向OnGetAsync方法提供相應的sortOrder查詢字符串。

Razor 頁面使用 NameSort 和 DateSort 為列標題超鏈接配置相應的排序字符串值。

  NameSort = String.IsNullOrEmpty(sortOrder) ? "name_desc" : "";
            DateSort = sortOrder == "Date" ? "date_desc" : "Date";

這兩個語句都使用了三目運算符。 第一個語句指如果sortOrder參數為 null 或為空則 NameSort 設置為”name_desc”; 否則，設置為一個空字符串。 這兩個語句實現下表中的功能：

該方法使用 LINQ 指定要作為排序依據的列。 代碼在switch 語句之前創建了IQueryable變量然後在 switch 語句中對其進行修改，並在switch語句之後調用ToListAsync方法。 當你創建和修改IQueryable變量時數據庫不會接收到任何查詢。將 IQueryable 對象轉換成集合後才能執行查詢。 通過調用 IQueryable 等方法可將 ToListAsync 轉換成集合。 因此，IQueryable 代碼會生成單個查詢，此查詢直到出現以下語句才執行：

Book = await books.AsNoTracking().ToListAsync();

二、向書籍列表頁面中的標題添加超鏈接

1) 在Visual Studio 2017中打開Books /Index.cshtml文件，用以下代碼替換，添加列標題超鏈接。 高亮代碼為已更改的行。

@page 
@model RazorMvcBooks.Pages.Books.IndexModel 

@{
    ViewData["Title"] = "Index";
} 

<h2>Index</h2> 
<p>
    <a asp-page="Create">Create New</a>
</p>
<form>
    <p>
        <select asp-for="Publish" asp-items="Model.Publishs">
            <option value="">All</option>
        </select>
書籍名稱
         <input type="text" name="SearchString">
        <input type="submit" value="查詢" />
    </p>
</form> 

<table class="table">
    <thead>
        <tr>
                <th>
                    <a asp-page="./Index" asp-route-sortOrder="@Model.NameSort">
                        @Html.DisplayNameFor(model => model.Book[0].Name)
                    </a>                 
                </th>
                <th>
                    <a asp-page="./Index" asp-route-sortOrder="@Model.DateSort">
                        @Html.DisplayNameFor(model => model.Book[0].ReleaseDate)
                        </a>
</th>
                <th>
                    @Html.DisplayNameFor(model => model.Book[0].Author)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Book[0].Price)

                </th>

            <th>
                @Html.DisplayNameFor(model => model.Book[0].Publishing)

            </th>
            <th></th>
        </tr>

    </thead>
    <tbody>
@foreach (var item in Model.Book) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)

            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ReleaseDate)

            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Author)

            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Price)

            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Publishing)

            </td>
            <td>
                <a asp-page="./Edit" asp-route-id="@item.ID">Edit</a> |
                <a asp-page="./Details" asp-route-id="@item.ID">Details</a> |
                <a asp-page="./Delete" asp-route-id="@item.ID">Delete</a>

            </td>
        </tr>
}
    </tbody>
</table>

對於上面的代碼中的兩行斜體代碼的說明：

向 Name 和 ReleaseDate 列標題添加超鏈接。

使用 NameSort 和 DateSort 中的信息為超鏈接設置當前的排序順序值。

2) 在Visual Studio 2017中按F5，運行書籍管理應用程序。

3) 在瀏覽器中瀏覽到書籍列表頁面。

4) 在書籍列表頁面單擊“Name”2次。如下圖中1與2。

5)在書籍列表頁面單擊“出版日期”2次。如下圖中1與2。

三、了解此功能實現過程

如果你想要更好地了解此功能的實現過程，可以進行以下操作：

1）在Visual Studio 2017的 Books/Index.cshtml.cs 文件的 switch (sortOrder) 上設置斷點。

2） 添加對 NameSort 和 DateSort 的監視。

3）在 Books/Index.cshtml 中的 @Html.DisplayNameFor(model => model.Book[0].Name) 上設置斷點。

4） 然後在Visual Studio 2017中單步執行調試程序。

學習ASP.NET Core Razor 編程系列十六——排序