學習ASP.NET Core Blazor編程系列十五——查詢

一：背景 1.講故事這周有個朋友找到我，說他的程式出現了記憶體緩慢增長，沒有回頭的趨勢，讓我幫忙看下到底怎麼回事，據朋友說這個問題已經困擾他快一周了，還是沒能找到最終的問題，看樣子這個問題比較刁鑽，不管怎麼說，先祭出 WinDbg。二：WinDbg 分析 1. 托管還是非托管泄露一直關註這個系列 ...

在這一篇教程中我們學習如何增加查詢功能，我們將在書籍列表頁面中添加搜索功能，通過按“書籍名稱”或“作者”來搜索書籍。

一、根據圖書名稱查詢

1. 在Visual Studio 2022的文本編輯器中打開Pages/BookIndex.razor文件。

在以往經典的Web應用程式中，我們經常使用<form>元素創建表單，在表單中添加<input> 元素，<input> 有一個 type 屬性，用於指定輸入的類型及其顯示方式（作為數字、文本框、單選按鈕、覆選框、按鈕等），讓用戶輸入數據，在用戶提交表單時進行數據驗證。如果驗證成功，則可以執行相應的操作（新增，更新，刪除等）。

那麼Blazor應用程式中如何進行數據輸入呢，Blazor也提供了一個類似表單的組件——<EditForm> 組件。此外，Blazor提供了一系列專用輸入元素，這些元素可用於格式化和驗證用戶輸入的數據。

我們首先在已經打開的BookIndex.razor文件中頂部位置的輸入獲取查詢條件的代碼。代碼如下：

@page "/BookIndex"
@using BlazorAppDemo.Models
@using Microsoft.EntityFrameworkCore


@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" 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>書名</td>

    <td>作者</td>
    <td>價格</td>
    <td>出版日期</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>

2.然後在Visual Studio 2022的文本編輯器中，拖拉滾動條，來到BookIndex.razor文件中@code的位置，添加一個書籍名稱(Name)的屬性和一個查詢方法，具體代碼如下：

private   static BookContext _context;
    private List<Book> books = new List<Book>();
    public string Name{get ;set;}

 

    protected override async Task OnInitializedAsync()
    {
        _context = dbFactory.CreateDbContext();
        books=_context.Book.ToList();
        await base.OnInitializedAsync();

    }

    public void EditBook(MouseEventArgs e ,int Id)
    {
        NavigationManager.NavigateTo("/AddBook?Id="+Id.ToString());

    }

    public void Query()
    {
        var qryBooks = from m in _context.Book
                         select m; 

            if (!String.IsNullOrEmpty(Name))
            {
                qryBooks = qryBooks.Where(s => s.Name.Contains(Name.Trim()));

            }
            books = qryBooks.ToList();        
    }

在上面的Query查詢方法的第一行創建了 LINQ 查詢用於選擇書籍：

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

這一行代碼僅僅是對查詢進行了定義，還沒有到傳給資料庫讓資料庫去執行。

如果 Name參數包含一個查詢條件字元串，則查詢語句會根據查詢條件字元串進行修改，代碼如下：

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

s => s.Name.Contains() 這段代碼是Lambda表達式。Lambda在基於方法的 LINQ 查詢中用作標準查詢運算符方法的參數，如 Where 方法或 Contains（前面的代碼中所使用的）。在對 LINQ 查詢進行定義或通過調用方法（如 Where、Contains 或 OrderBy）進行修改後，此查詢語句不會被立即執行，會延遲執行。這意味著表達式的計算會延遲，直到迴圈訪問其實現的值或者調用 ToListAsync 方法。

註意：Contains 方法在資料庫中運行，而不是在 C# 代碼中運行。查詢條件是否要區分大小寫取決於你採用什麼樣的資料庫或者你在資料庫中使用什麼樣的排序規則。在 SQL Server 上，Contains 映射到資料庫查詢語法中的LIKE，這是不區分大小寫的。在 SQLite 中，如果使用預設排序規則，則查詢條件會區分大小寫。

3.在Visual Studio 2022的菜單欄上，找到“調試à開始調試”或是按F5鍵，Visual Studio 2022會生成BlazorAppDemo應用程式，併在瀏覽器中打開Home頁面，我們使用滑鼠點擊左邊的菜單欄上的“圖書列表”菜單項，會進入“圖書列表”頁面，如下圖。

4. 在瀏覽器中的圖書名稱查詢條件輸入框中輸入“JAVA”，然後點擊“查詢”按鈕，系統會根據查詢條件顯示相應的書籍信息。根據查詢條件得到的查詢結果如下圖。

二、根據作者查詢

1.在Visual Studio 20222的解決方案資源管理器中找到Pages/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 value[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>書名</td>
    <td>作者</td>
    <td>價格</td>
    <td>出版日期</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>

2.然後在Visual Studio 2022的文本編輯器中，拖拉滾動條，來到BookIndex.razor文件中@code的位置，添加一個作者(Author)的屬性和一個SelectList類型的作者列表變數Authors，同時添加一個查詢作者的方法BindAuthor，並對Query查詢方法進行修改。具體代碼如下：

@code {
    private   static BookContext _context;
    private List<Book> books = new List<Book>();
    private SelectList Authors;
    public string Name{get ;set;}
    public string Author{get ;set;}

 
   protected override async Task OnInitializedAsync()
    {

        _context = dbFactory.CreateDbContext();
        books=_context.Book.ToList();
        BindAuthor();
        await base.OnInitializedAsync();
    }

    public void EditBook(MouseEventArgs e ,int Id)
    {
        NavigationManager.NavigateTo("/AddBook?Id="+Id.ToString());
    }

    public void BindAuthor()
   {
       
            IQueryable<string> AuthorQuery = from m in _context.Book
                                             orderby m.Author
                                             select m.Author;
Authors = new SelectList(AuthorQuery.Distinct().ToList());       

    }

    public void Query()
    {
         var qryBooks = from m in _context.Book
                         select m;
 
            if (!String.IsNullOrEmpty(Name))
            {
                qryBooks = qryBooks.Where(s => s.Name.Contains(Name.Trim()));
            }
        if (!String.IsNullOrEmpty(Author))
        {
            qryBooks = qryBooks.Where(x => x.Author == Author);
 
        }
            books = qryBooks.ToList();       

    }

SelectList Author 包含作者列表，方便用戶在界面上選擇一位作者。

我們通過以下代碼使用一個LINQ 查詢的語句，可以從資料庫中查詢所有作者。

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

作者列表 SelectList 是通過以下語句進行創建。

 Authors = new SelectList(AuthorQuery.Distinct().ToList());

Author屬性包含用戶選擇的特定作者（例如“梁桐銘”）。

3. 在Visual Studio 2022的菜單欄上，找到“調試à開始調試”或是按F5鍵，Visual Studio 2022會生成BlazorAppDemo應用程式，併在瀏覽器中打開Home頁面，我們使用滑鼠點擊左邊的菜單欄上的“圖書列表”菜單項，會進入“圖書列表”頁面，如下圖。

4.在瀏覽器的作者查詢條件中，我們從下拉列表中選擇“梁桐銘”，然後點擊“查詢”按鈕。如下圖。