組建 Blazor 電影資料庫應用程式 （第 6 部分 - 新增搜尋）
本文是 Blazor 電影資料庫應用程式教學課程的第六個部分，教您建立具有管理電影資料庫功能的 ASP.NET Core Blazor Web App 應用程式基本知識。
本教學課程系列這部分涵蓋將搜尋功能新增至電影 Index 元件，以依標題篩選電影。
實作 QuickGrid 元件的篩選功能
影片 Index 元件 (Components/MoviePages/Index.razor) 使用 QuickGrid 元件來顯示資料庫中的影片：
<QuickGrid Class="table" Items="context.Movie">
...
</QuickGrid>
Items 參數接收 IQueryable<TGridItem>，其中 TGridItem 是網格中每列所代表的資料類型(Movie)。 Items 指派從插入的資料庫內容中心 (DbFactory) 所建立的資料庫內容 (CreateDbContext) 取得的影片實體DbSet<Movie>集合。
若使 QuickGrid 元件篩選電影標題， Index 元件應該：
- 從查詢字串將篩選字串設定為 元件參數 。
- 如果參數具有一個值，請篩選從資料庫傳回的影片。
- 提供輸入給使用者，用來提供篩選字串，以及使用篩選條件觸發重新載入的按鈕。
首先，將下列程式碼新增至 Index 元件的 @code 區塊 (MoviePages/Index.razor)：
[SupplyParameterFromQuery]
private string? TitleFilter { get; set; }
private IQueryable<Movie> FilteredMovies =>
context.Movie.Where(m => m.Title!.Contains(TitleFilter ?? string.Empty));
TitleFilter 是篩選條件字串。 該屬性提供 [SupplyParameterFromQuery] 屬性，這可讓您 Blazor 知道當查詢字串包含相同名稱的欄位時，應該從查詢字串指派的值 TitleFilter （例如 ?titleFilter=road+warrior 產生 TitleFilter 的值 road warrior）。 請注意，查詢字串欄位名稱，例如 titleFilter，不區分大小寫。
FilteredMovies 屬性是 IQueryable<Movie>，這是指派給 QuickGrid的 Items 參數類型。 此屬性根據提供的 TitleFilter篩選電影清單。 如果 TitleFilter 未從查詢字串被指派一個值 (TitleFilter 為 null)，則空字串 (string.Empty) 會被 Contains 子句使用。 因此，不會篩選任何電影以供顯示。
將 QuickGrid 元件的 Items 參數變更為使用 movies 集合：
- <QuickGrid Class="table" Items="context.Movie">
+ <QuickGrid Class="table" Items="FilteredMovies">
movie => movie.Title!.Contains(...) 程式碼是 Lambda 運算式。 在以方法為基礎的 LINQ 查詢中，Lambda 會用來作為標準查詢運算子方法的引數，例如 Where 或 Contains 方法 。 定義 LINQ 查詢或藉由電話撥接方法，例如 Where、 Contains或 OrderBy等進行修改時，並不會執行查詢。 而是會延後查詢執行。 運算式的評估會延遲，直到該運算式的實現值被迭代為止。
Contains 方法是在資料庫上執行，而不是在 C# 程式碼中執行。 查詢的大小寫區分取決於資料庫及定序。 對於 SQL Server， Contains 對應至 SQL LIKE LIKE，不區分大小寫。 根據查詢，具有預設定序的 SQLite 提供區分大小寫和不區分大小寫的組合。 有關不區分大小寫 SQLite 查詢的詳細資訊，請參閱本文的 其他資源 章節。
執行應用程式，並瀏覽至位於 /movies的電影 Index 頁面。 資料庫載入的電影：
將查詢字串附加至網址列的 URL： ?titleFilter=road+warrior。 例如，完整 URL 顯示為 https://localhost:7073/movies?titleFilter=road+warrior，假設連接埠號碼為 7073。 隨即顯示篩選後的電影：
接下來，讓使用者能夠透過元件的 UI 提供 titleFilter 篩選字串的方法。 在 H1 標題下新增下列 HTML。(<h1>Index</h1>) 下列 HTML 會將文字方塊的內容重新載入為查詢字串值的頁面：
<p>
<form action="/movies" data-enhance>
<input type="search" name="titleFilter" />
<input type="submit" value="Search" />
</form>
</p>
data-enhance 屬性會將 增強式導覽 套用至元件，其中 Blazor 會攔截 GET 要求並改為執行提取要求。 Blazor 然後將回覆內容修補到頁面，以避免全頁重新載入並保留更多頁面狀態。 頁面載入速度較快，通常不會遺失使用者的捲動位置。
儲存您正在處理的檔案。 透過重新啟動應用程式或使用熱重新載入將變更套用至執行中的應用程式，以套用變更。
關閉瀏覽器視窗，然後在 VS Code 選擇 執行>重新啟動偵錯 ，或在鍵盤上按 Ctrl+Shift+F5 。 VS Code 會使用您儲存的變更重新編譯並執行應用程式，並為應用程式產生一個新的瀏覽器視窗。
由於應用程式目前正在執行 dotnet watch，因此會自動偵測已儲存的變更，並反映在現有瀏覽器視窗中。
在搜尋方塊中輸入「road warrior」，然後選取Search按鈕以篩選電影：
搜尋 road warrior 之後的結果：
請注意，篩選電影後，搜尋方塊會失去搜尋值 ("road warrior")。 如果您想要保留搜尋的值，請新增 data-permanent 屬性：
- <form action="/movies" data-enhance>
+ <form action="/movies" data-enhance data-permanent>
停止應用程式
關閉瀏覽器的視窗以停止應用程式。
關閉瀏覽器的視窗，然後在 VS Code 中，於鍵盤按 Shift+F5，以停止應用程式。
關閉瀏覽器的視窗，然後在命令殼層中，按 Ctrl+C (Windows) 或 ⌘+C (macOS)，以停止應用程式。
使用已完成的範例進行疑難排解
如果您在依照教學課程進行時遇到無法從文字解決的問題，請將程式碼與 Blazor 範例存放庫中已完成的專案進行比較：
Blazor 範例 GitHub 存放庫 (dotnet/blazor-samples)
選取最新版本資料夾。 本教學課程專案的樣本資料夾名為 BlazorWebAppMovies。
其他資源
- LINQ 文件
- 撰寫 C# LINQ 查詢以查詢資料 (C# 文件)
- Lambda 運算式 (C# 文件)
- 不區分大小寫的 SQLite 查詢
法務
《瘋狂麥斯》、《衝鋒飛車隊》、《瘋狂麥斯：衝鋒飛車隊續集》、《瘋狂麥斯：憤怒道》 及 《芙莉歐莎：瘋狂麥斯傳奇篇章》商標與著作權屬於 Warner Bros. Entertainment。
