将搜索添加到 ASP.NET Core Razor 页面Add search to ASP.NET Core Razor Pages
- 本文内容
按流派搜索Search by genre
- 将按流派搜索添加到 Razor 页面Add search by genre to the Razor Page
其他资源Additional resources
按流派搜索Search by genre
- 将按流派搜索添加到 Razor 页面Add search by genre to the Razor Page
其他资源Additional resources

将搜索添加到 ASP.NET Core Razor 页面Add search to ASP.NET Core Razor Pages

本文内容

在以下部分中，添加了按流派或名称搜索电影。

将以下突出显示的属性添加到 Pages/Movies/Index.cshtml.cs ：

public class IndexModel : PageModel
{
    private readonly RazorPagesMovie.Data.RazorPagesMovieContext _context;
    public IndexModel(RazorPagesMovie.Data.RazorPagesMovieContext context)
    {
        _context = context;
    }
    public IList<Movie> Movie { get; set; }
    [BindProperty(SupportsGet = true)]
    public string SearchString { get; set; }
    // Requires using Microsoft.AspNetCore.Mvc.Rendering;
    public SelectList Genres { get; set; }
    [BindProperty(SupportsGet = true)]
    public string MovieGenre { get; set; }

SearchString：包含用户在搜索文本框中输入的文本。SearchString 也有 [BindProperty] 属性。[BindProperty] 会绑定名称与属性相同的表单值和查询字符串。在 GET 请求中进行绑定需要 (SupportsGet = true)。
Genres：包含流派列表。Genres 使用户能够从列表中选择一种流派。SelectList 需要 using Microsoft.AspNetCore.Mvc.Rendering;
MovieGenre：包含用户选择的特定流派（例如“西部”）。
Genres 和 MovieGenre 会在本教程的后续部分中使用。

警告

出于安全原因，必须选择绑定 GET 请求数据以对模型属性进行分页。请在将用户输入映射到属性前对其进行验证。当处理依赖查询字符串或路由值的方案时，选择加入 GET 绑定非常有用。

若要将属性绑定在 GET 请求上，请将 [BindProperty] 特性的 SupportsGet 属性设置为 true：

[BindProperty(SupportsGet = true)]

有关详细信息，请参阅 ASP.NET Core Community Standup:Bind on GET discussion (YouTube)（绑定 GET 讨论）。

使用以下代码更新索引页面的 OnGetAsync 方法：

public async Task OnGetAsync()
{
    var movies = from m in _context.Movie
                 select m;
    if (!string.IsNullOrEmpty(SearchString))
    {
        movies = movies.Where(s => s.Title.Contains(SearchString));
    }
    Movie = await movies.ToListAsync();
}

OnGetAsync 方法的第一行创建了 LINQ 查询用于选择电影：

// using System.Linq;
var movies = from m in _context.Movie
             select m;

此时仅对查询进行了定义，它还不会针对数据库运行。

如果 SearchString 属性不为 null 或空，则电影查询会修改为根据搜索字符串进行筛选：

if (!string.IsNullOrEmpty(SearchString))
{
    movies = movies.Where(s => s.Title.Contains(SearchString));
}

s => s.Title.Contains() 代码是 Lambda 表达式。Lambda 在基于方法的 LINQ 查询中用作标准查询运算符方法的参数，如 Where 方法或 Contains（前面的代码中所使用的）。在对 LINQ 查询进行定义或通过调用方法（如 Where、Contains 或 OrderBy）进行修改后，此查询不会被执行。相反，会延迟执行查询。这意味着表达式的计算会延迟，直到循环访问其实现的值或者调用 ToListAsync 方法为止。有关详细信息，请参阅 Query Execution（查询执行）。

备注

Contains 方法在数据库中运行，而不是在 C# 代码中运行。查询是否区分大小写取决于数据库和排序规则。在 SQL Server 上，Contains 映射到 SQL LIKE，这是不区分大小写的。在 SQLite 中，由于使用了默认排序规则，因此需要区分大小写。

导航到电影页面，并向 URL追加一个如 ?searchString=Ghost 的查询字符串（例如 https://localhost:5001/Movies?searchString=Ghost）。筛选的电影将显示出来。

如果向索引页面添加了以下路由模板，搜索字符串则可作为 URL 段传递（例如 https://localhost:5001/Movies/Ghost）。

@page "{searchString?}"

前面的路由约束允许按路由数据（URL 段）搜索标题，而不是按查询字符串值进行搜索。"{searchString?}" 中的 ? 表示这是可选路由参数。

ASP.NET Core 运行时使用模型绑定，通过查询字符串 (?searchString=Ghost) 或路由数据 (https://localhost:5001/Movies/Ghost) 设置 SearchString 属性的值。模型绑定搜索不区分大小写。

但是，不能指望用户修改 URL 来搜索电影。在此步骤中，会添加 UI 来筛选电影。如果已添加路由约束 "{searchString?}"，请将它删除。

打开 Pages/Movies/Index.cshtml 文件，并添加以下代码中突出显示的 <form> 标记：

@page
@model RazorPagesMovie.Pages.Movies.IndexModel
@{
    ViewData["Title"] = "Index";
}
<h1>Index</h1>
<p>
    <a asp-page="Create">Create New</a>
</p>
<form>
    <p>
        Title: <input type="text" asp-for="SearchString" />
        <input type="submit" value="Filter" />
    </p>
</form>
<table class="table">
    @*Markup removed for brevity.*@

HTML <form> 标记使用以下标记帮助程序：

表单标记帮助程序。提交表单时，筛选器字符串将通过查询字符串发送到 Pages/Movies/Index 页面。
输入标记帮助程序

保存更改并测试筛选器。

按流派搜索Search by genre

使用以下代码更新 OnGetAsync 方法：

public async Task OnGetAsync()
{
    // Use LINQ to get list of genres.
    IQueryable<string> genreQuery = from m in _context.Movie
                                    orderby m.Genre
                                    select m.Genre;
    var movies = from m in _context.Movie
                 select m;
    if (!string.IsNullOrEmpty(SearchString))
    {
        movies = movies.Where(s => s.Title.Contains(SearchString));
    }
    if (!string.IsNullOrEmpty(MovieGenre))
    {
        movies = movies.Where(x => x.Genre == MovieGenre);
    }
    Genres = new SelectList(await genreQuery.Distinct().ToListAsync());
    Movie = await movies.ToListAsync();
}

下面的代码是一种 LINQ 查询，可从数据库中检索所有流派。

// Use LINQ to get list of genres.
IQueryable<string> genreQuery = from m in _context.Movie
                                orderby m.Genre
                                select m.Genre;

流派的 SelectList 是通过投影不包含重复值的流派创建的。

Genres = new SelectList(await genreQuery.Distinct().ToListAsync());

将按流派搜索添加到 Razor 页面Add search by genre to the Razor Page

更新 Index.cshtml，如下所示：

@page
@model RazorPagesMovie.Pages.Movies.IndexModel
@{
    ViewData["Title"] = "Index";
}
<h1>Index</h1>
<p>
    <a asp-page="Create">Create New</a>
</p>
<form>
    <p>
        <select asp-for="MovieGenre" asp-items="Model.Genres">
            <option value="">All</option>
        </select>
        Title: <input type="text" asp-for="SearchString" />
        <input type="submit" value="Filter" />
    </p>
</form>
<table class="table">
    @*Markup removed for brevity.*@

通过按流派或/和电影标题搜索来测试应用。

其他资源Additional resources

本教程的 YouTube 版本

查看或下载示例代码（如何下载）。

在以下部分中，添加了按流派或名称搜索电影。

将以下突出显示的属性添加到 Pages/Movies/Index.cshtml.cs ：

public class IndexModel : PageModel
{
    private readonly RazorPagesMovie.Models.RazorPagesMovieContext _context;
    public IndexModel(RazorPagesMovie.Models.RazorPagesMovieContext context)
    {
        _context = context;
    }
    public IList<Movie> Movie { get; set; }
    [BindProperty(SupportsGet = true)]
    public string SearchString { get; set; }
    // Requires using Microsoft.AspNetCore.Mvc.Rendering;
    public SelectList Genres { get; set; }
    [BindProperty(SupportsGet = true)]
    public string MovieGenre { get; set; }

SearchString：包含用户在搜索文本框中输入的文本。SearchString 也有 [BindProperty] 属性。[BindProperty] 会绑定名称与属性相同的表单值和查询字符串。在 GET 请求中进行绑定需要 (SupportsGet = true)。
Genres：包含流派列表。Genres 使用户能够从列表中选择一种流派。SelectList 需要 using Microsoft.AspNetCore.Mvc.Rendering;
MovieGenre：包含用户选择的特定流派（例如“西部”）。
Genres 和 MovieGenre 会在本教程的后续部分中使用。

警告

若要将属性绑定在 GET 请求上，请将 [BindProperty] 特性的 SupportsGet 属性设置为 true：

[BindProperty(SupportsGet = true)]

有关详细信息，请参阅 ASP.NET Core Community Standup:Bind on GET discussion (YouTube)（绑定 GET 讨论）。

使用以下代码更新索引页面的 OnGetAsync 方法：

public async Task OnGetAsync()
{
    var movies = from m in _context.Movie
                 select m;
    if (!string.IsNullOrEmpty(SearchString))
    {
        movies = movies.Where(s => s.Title.Contains(SearchString));
    }
    Movie = await movies.ToListAsync();
}

OnGetAsync 方法的第一行创建了 LINQ 查询用于选择电影：

// using System.Linq;
var movies = from m in _context.Movie
             select m;

此时仅对查询进行了定义，它还不会针对数据库运行。

如果 SearchString 属性不为 null 或空，则电影查询会修改为根据搜索字符串进行筛选：

if (!string.IsNullOrEmpty(SearchString))
{
    movies = movies.Where(s => s.Title.Contains(SearchString));
}

注意：Contains 方法在数据库中运行，而不是在 C# 代码中运行。查询是否区分大小写取决于数据库和排序规则。在 SQL Server 上，Contains 映射到 SQL LIKE，这是不区分大小写的。在 SQLite 中，由于使用了默认排序规则，因此需要区分大小写。

导航到电影页面，并向 URL追加一个如 ?searchString=Ghost 的查询字符串（例如 https://localhost:5001/Movies?searchString=Ghost）。筛选的电影将显示出来。

如果向索引页面添加了以下路由模板，搜索字符串则可作为 URL 段传递（例如 https://localhost:5001/Movies/Ghost）。

@page "{searchString?}"

前面的路由约束允许按路由数据（URL 段）搜索标题，而不是按查询字符串值进行搜索。"{searchString?}" 中的 ? 表示这是可选路由参数。

但是，不能指望用户修改 URL 来搜索电影。在此步骤中，会添加 UI 来筛选电影。如果已添加路由约束 "{searchString?}"，请将它删除。

打开 Pages/Movies/Index.cshtml 文件，并添加以下代码中突出显示的 <form> 标记：

@page
@model RazorPagesMovie.Pages.Movies.IndexModel
@{
    ViewData["Title"] = "Index";
}
<h1>Index</h1>
<p>
    <a asp-page="Create">Create New</a>
</p>
<form>
    <p>
        Title: <input type="text" asp-for="SearchString" />
        <input type="submit" value="Filter" />
    </p>
</form>
<table class="table">
    @*Markup removed for brevity.*@

HTML <form> 标记使用以下标记帮助程序：

表单标记帮助程序。提交表单时，筛选器字符串将通过查询字符串发送到 Pages/Movies/Index 页面。
输入标记帮助程序

保存更改并测试筛选器。

按流派搜索Search by genre

使用以下代码更新 OnGetAsync 方法：

public async Task OnGetAsync()
{
    // Use LINQ to get list of genres.
    IQueryable<string> genreQuery = from m in _context.Movie
                                    orderby m.Genre
                                    select m.Genre;
    var movies = from m in _context.Movie
                 select m;
    if (!string.IsNullOrEmpty(SearchString))
    {
        movies = movies.Where(s => s.Title.Contains(SearchString));
    }
    if (!string.IsNullOrEmpty(MovieGenre))
    {
        movies = movies.Where(x => x.Genre == MovieGenre);
    }
    Genres = new SelectList(await genreQuery.Distinct().ToListAsync());
    Movie = await movies.ToListAsync();
}

下面的代码是一种 LINQ 查询，可从数据库中检索所有流派。

// Use LINQ to get list of genres.
IQueryable<string> genreQuery = from m in _context.Movie
                                orderby m.Genre
                                select m.Genre;

流派的 SelectList 是通过投影不包含重复值的流派创建的。

Genres = new SelectList(await genreQuery.Distinct().ToListAsync());

将按流派搜索添加到 Razor 页面Add search by genre to the Razor Page

更新 Index.cshtml，如下所示：

@page
@model RazorPagesMovie.Pages.Movies.IndexModel
@{
    ViewData["Title"] = "Index";
}
<h1>Index</h1>
<p>
    <a asp-page="Create">Create New</a>
</p>
<form>
    <p>
        <select asp-for="MovieGenre" asp-items="Model.Genres">
            <option value="">All</option>
        </select>
        Title: <input type="text" asp-for="SearchString" />
        <input type="submit" value="Filter" />
    </p>
</form>
<table class="table">
    @*Markup removed for brevity.*@

通过按流派或/和电影标题搜索来测试应用。前面的代码使用选择标记帮助程序和选项标记帮助程序。

其他资源Additional resources

本教程的 YouTube 版本

添加搜索

将搜索添加到 ASP.NET Core Razor 页面Add search to ASP.NET Core Razor Pages

本文内容

按流派搜索Search by genre

将按流派搜索添加到 Razor 页面Add search by genre to the Razor Page

其他资源Additional resources

按流派搜索Search by genre

将按流派搜索添加到 Razor 页面Add search by genre to the Razor Page

其他资源Additional resources