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

WebApiClient 介面註冊與選項 1 配置文件中配置HttpApiOptions選項配置示例 "IUserApi": { "HttpHost": "http://www.webappiclient.com/", "UseParameterPropertyValidate": false, ...

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

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

一、排序功能

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>