将搜索添加到 ASP.NET Core Razor 页面

2019-04-17 08:57 更新

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

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

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

C#

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 请求数据以对模型属性进行分页。 请在将用户输入映射到属性前对其进行验证。 当处理依赖查询字符串或路由值的方案时,选择加入 GET 绑定非常有用。

要将属性绑定在 GET 请求上,请将 [BindProperty] 特性的 SupportsGet 属性设置为 true: [BindProperty(SupportsGet = true)]

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

C#

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 查询用于选择电影:

C#

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

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

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

C#

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)。

CSHTML

@page "{searchString?}"

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

索引视图,显示添加到 URL 的“ghost”一词以及返回的两部电影(Ghostbusters 和 Ghostbusters 2)的电影列表

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

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

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

CSHTML

@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> 标记使用以下标记帮助程序

保存更改并测试筛选器。

显示标题筛选器文本框中键入了 ghost 一词的索引视图

按流派搜索

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

C#

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 查询,可从数据库中检索所有流派。

C#

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

流派的 SelectList 是通过投影截然不同的流派创建的。

C#

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

将按流派搜索添加到 Razor 页面

更新 Index.cshtml,如下所示:

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.*@

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


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号