學習ASP.NET Core Blazor程式設計系列十六——排序

在本篇文章我們來學習如何進行對列表按標題進行排序。

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

一、排序功能

1．在Visual Studio 2022的選單欄上，找到「偵錯--》開始偵錯」或是按F5鍵，Visual Studio 2022會生成BlazorAppDemo應用程式，並在瀏覽器中開啟Home頁面，我們使用滑鼠點選左邊的選單欄上的「圖書列表」選單項，會進入「圖書列表」頁面。如下圖。這是沒有排序的圖書列表頁面。

2. 在Visual Studio 2022的解決方案資源管理器中找到 Pages\ BookIndex.razor檔案，在文字編輯器中開啟，在@code中新增用於進行排序的變數，程式碼如下：

    public string NameSort { get; set; }
    public string DateSort { get; set; }
    public string PriceSort { get; set; }

3. 同時在@code中新增一個排序方法Sort(MouseEventArgs e, string sortOrder)，程式碼如下：

    public void Sort(MouseEventArgs e, string sortOrder)
    {

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

 
        //排序
        NameSort = String.IsNullOrEmpty(sortOrder) ? "name_desc" : "";

        DateSort = sortOrder == "Date" ? "date_desc" : "Date";
        PriceSort = sortOrder=="price"?"price_desc":"price";

        switch (sortOrder)
        {
            case "name_desc":

                qryBooks = qryBooks.OrderByDescending(s => s.Name);
                break;

            case "Date":
                qryBooks = qryBooks.OrderBy(s => s.ReleaseDate);
                break;

            case "date_desc":
                qryBooks = qryBooks.OrderByDescending(s => s.ReleaseDate);
                break;

            case "price_desc":
                qryBooks = qryBooks.OrderByDescending(s => s.Price);
                break;

            case "price":
                qryBooks = qryBooks.OrderBy(s => s.Price);
                break;

            default:
                qryBooks = qryBooks.OrderBy(s => s.Name);
                break;

        }

        books = qryBooks.ToList();

    }

按上面的程式碼，從排序按鈕的點選事件中接收sortOrder引數。「Name」、」Date」、「price」三個排序型別可以選擇用於降序排序，而在這三個排序型別加上下劃線和」desc」構成一個新的排序型別，即為升序。預設排序順序為升序。

第一次請求時，沒有任何排序型別的字串。書籍按名稱升序顯示也就是預設值中的排序方式。當用戶單擊列標題的超連結，將向Sort方法提供相應的sortOrder排序字串。

Blazor頁面使用 NameSort 、DateSort、PriceSort 為列標題超連結設定相應的排序字串值。程式碼如下所示：

        //排序

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

這三個語句都使用了三目運運算元。第一個語句指如果sortOrder引數為 null 或為空則 NameSort 設定為」name_desc」; 否則，設定為一個空字串。

Sort方法使用 LINQ 指定要作為排序依據的列。程式碼在switch 語句之前建立了IQueryable變數然後在 switch 語句中對其進行修改，並在switch語句之後呼叫ToList()方法。當你建立和修改IQueryable變數時資料庫不會接收到任何查詢。將 IQueryable 物件轉換成集合後才能執行查詢。通過呼叫 IQueryable 等方法可將 ToList() 轉換成集合。因此，IQueryable 程式碼會生成單個查詢，此查詢直到出現以下語句才執行：

        books = qryBooks.ToList();

3. 在以往經典的Web應用程式中，我們經常使用<a>標籤建立連結，然後將資料提交給後臺，進行排序。

那麼Blazor應用程式中應該如何進行排序呢？我們在此次的範例中還是使用<a>元素，但是將此元素當做按鈕來使用。通過onclick事件來呼叫排序方法。在Visual Studio 2022中找到已經開啟的BookIndex.razor檔案，用以下程式碼進行修改，以下程式碼主要新增列標題的超連結用於實現排序。

@page "/BookIndex"
@using BlazorAppDemo.Models
@using Microsoft.EntityFrameworkCore
@using Microsoft.AspNetCore.Mvc.Rendering;
@inject IDbContextFactory<BookContext> dbFactory
@inject NavigationManager NavigationManager
 
<PageTitle>圖書列表</PageTitle>
 
<h3>圖書列表</h3>
<EditForm Model=@books>
 
<div class="input-group mb-3"> 

    <div class="input-group-prepend">
    <span class="input-group-text" for="inputGroupSelectAuthor">作者：</span>
      </div>
      <InputSelect @bind-Value=Author id="inputGroupSelectAuthor" class="custom-select">
          <option value="">請選擇作者</option>
          @foreach (var item in Authors)
          {
                <option [email protected]>@item.Text</option>
         }

   
          </InputSelect>

    <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-default">圖書名稱：</span>
      </div>

    <InputText @bind-Value=Name class="form-control" aria-describedby="inputGroup-sizing-default"></InputText>
        <ValidationMessage For="@(() =>Name)" />
         
             <button id="search" class="btn btn-outline-secondary" @onclick="Query">查詢</button>
    </div>
    </EditForm>
<table class="table-responsive" width="90%"> 

    <tr>
        <td><a class="nav-link active" role="button" aria-pressed="true" @onclick="@(e => Sort(e, @NameSort))">書名</a></td>

        <td>作者</td>
        <td><a class="nav-link active" role="button" aria-pressed="true" @onclick="@(e => Sort(e, @PriceSort))">價格</a></td>
        <td><a class="nav-link active" role="button" aria-pressed="true" @onclick="@(e => Sort(e, @DateSort))">出版日期</a></td>
    <td>庫存數量</td>
    <td>已租數量</td>
    <td>操作</td>


    </tr>
    @foreach (var item in books)
    {
        <tr> 
        <td>@item.Name</td>
        <td>@item.Author</td>
        <td>@item.Price</td>
        <td>@item.ReleaseDate.ToShortDateString()</td>
        <td>@item.StockQty</td>
        <td>@item.Qty</td>
            <td><a href="/[email protected]">編輯</a>

                <button id="edit" class="btn btn-primary" @onclick="@(e => EditBook(e, @item.ID))">修改</button>
            </td>
    </tr>
 
    }

</table>

對於上面的程式碼中的三行斜體程式碼的說明：

向書名、出版日期、價格三列標題新增超連結。

使用NameSort 、DateSort 、PriceSort做為引數，通過按鈕的點選事件將此三個引數傳遞給Sort方法。

4. 在Visual Studio 2022的選單欄上，找到「偵錯-->開始偵錯」或是按F5鍵，Visual Studio 2022會生成BlazorAppDemo應用程式，並在瀏覽器中開啟Home頁面，我們使用滑鼠點選左邊的選單欄上的「圖書列表」選單項，會進入「圖書列表」頁面。

5. 在圖書列表頁面中使用滑鼠左鍵單擊列表標題中的「書名」2次。圖書資訊就按書名進行降序或升序排列。如下圖中1與2。

6．在圖書列表頁面中使用滑鼠左鍵單擊標題名「出版日期」2次，你會看到類似在「書名」上點選兩次的排序效果，圖書列表會根據出版日期進行升序或降序排列。

7.在圖書列表頁面中使用滑鼠左鍵單擊標題名「價格」2次。你會看到類似在標題「書名」上點選兩次的效果，圖書列表會根據價格進行升序或降序排列。