注意
此版本不是本文的最新版本。 有关当前版本，请参阅本文的 .NET 9 版本。
本文是 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 被分配了一个从注入的数据库上下文工厂 (DbSet<Movie>) 创建的数据库上下文 (CreateDbContext) 获取的电影实体 (DbFactory) 的集合。
若要对电影标题进行 QuickGrid 组件筛选，Index 组件应：
- 将筛选器字符串设置为查询字符串中的组件参数。
- 如果参数具有值，则筛选从数据库返回的电影。
- 为用户提供输入，以提供筛选器字符串和用于使用筛选器触发重新加载的按钮。
首先将以下代码添加到 @code 组件 (Index) 的 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 表达式。 Lambda 在基于方法的 LINQ 查询中用作标准查询运算符方法（如 Where 方法或 Contains 方法）的参数。 在对 LINQ 查询进行定义或通过调用方法（如 Where、Contains 或 OrderBy）进行修改后，不会执行此查询。 相反，会延迟执行查询。 表达式的计算会延迟，直到循环访问其实现的值为止。
Contains 方法在数据库中运行，而不是在 C# 代码中运行。 查询是否区分大小写取决于数据库和排序规则。 对于 SQL Server，Contains 映射到 SQL LIKE，这是不区分大小写的。 具有默认排序规则的 SQLite 是区分大小写和不区分大小写的混合，具体取决于查询。 有关进行不区分大小写的 SQLite 查询的信息，请参阅本文的“其他资源”部分。
运行应用并导航到在 Index 的电影 /movies 页。 数据库加载中的电影：
将查询字符串追加到地址栏中的 URL：?titleFilter=road+warrior。 例如，如果端口号为 https://localhost:7073/movies?titleFilter=road+warrior，则完整 URL 显示为 7073。 将显示筛选后的电影：
接下来，为用户提供一种通过组件 UI 提供 titleFilter 筛选器字符串的方法。 在 H1 标题 (<h1>Index</h1>) 下添加以下 HTML。 以下 HTML 以查询字符串值的形式重新加载包含文本框内容的页面：
<div>
<form action="/movies" data-enhance>
<input type="search" name="titleFilter" />
<input type="submit" value="Search" />
</form>
</div>
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 来停止应用。
用完成的示例排除故障
如果在学习本教程时遇到无法从文本中解决的问题，请将代码与 Blazor 示例存储库中已完成的项目进行比较：
Blazor 示例 GitHub 存储库 (dotnet/blazor-samples)
选择最新版本文件夹。 本教程项目的示例文件夹命名为 BlazorWebAppMovies。
其他资源
- LINQ 文档
- 编写 C# LINQ 查询以查询数据（C# 文档）
- Lambda 表达式（C# 文档
- 不区分大小写的 SQLite 查询
Legal
Mad Max、The Road Warrior、Mad Max: Beyond Thunderdome、Mad Max: Fury Road 和 Furiosa: A Mad Max Saga 是 Warner Bros. Entertainment 的商标和版权。
