Bagian 6, tambahkan pencarian ke Halaman Inti Razor ASP.NET

Oleh Rick Anderson

Di bagian berikut, mencari film berdasarkan genre atau nama ditambahkan.

Tambahkan kode yang disorot berikut ke 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; }  = default!;

    [BindProperty(SupportsGet = true)]
    public string? SearchString { get; set; }

    public SelectList? Genres { get; set; }

    [BindProperty(SupportsGet = true)]
    public string? MovieGenre { get; set; }

Dalam kode sebelumnya:

• SearchString: Berisi pengguna teks yang dimasukkan dalam kotak teks pencarian. SearchString[BindProperty] memiliki atribut . [BindProperty] mengikat nilai formulir dan string kueri dengan nama yang sama dengan properti . [BindProperty(SupportsGet = true)] diperlukan untuk mengikat permintaan HTTP GET.
• Genres: Berisi daftar genre. Genres memungkinkan pengguna untuk memilih genre dari daftar. SelectList Memerlukan using Microsoft.AspNetCore.Mvc.Rendering;
• MovieGenre: Berisi genre tertentu yang dipilih pengguna. Misalnya, "Barat".
• Genres dan MovieGenre digunakan nanti dalam tutorial ini.

Peringatan

Karena alasan keamanan, Anda harus memilih untuk mengikat GET data permintaan ke properti model halaman. Verifikasi input pengguna sebelum memetakannya ke properti. Memilih pengikatan GET berguna saat menangani skenario yang mengandalkan string kueri atau nilai rute.

Untuk mengikat properti pada permintaan GET, atur properti SupportsGet atribut [BindProperty] ke true:

[BindProperty(SupportsGet = true)]

Untuk informasi lebih lanjut, lihat ASP.NET Core Community Standup: Bind on GET discussion (YouTube).

Perbarui metode halaman OnGetAsync Indeks dengan kode berikut:

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();
}

Baris OnGetAsync pertama metode membuat kueri LINQ untuk memilih film:

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

Kueri hanya ditentukan pada saat ini, kueri belum dijalankan terhadap database.

SearchString Jika properti tidak null atau kosong, kueri film dimodifikasi untuk memfilter string pencarian:

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

Kodenya s => s.Title.Contains() adalah Ekspresi Lambda. Lambda digunakan dalam kueri LINQ berbasis metode sebagai argumen ke metode operator kueri standar seperti metode Where atau Contains. Kueri LINQ tidak dijalankan saat didefinisikan atau saat dimodifikasi dengan memanggil metode, seperti Where, , Containsatau OrderBy. Sebaliknya, eksekusi kueri ditangguhkan. Evaluasi ekspresi tertunda sampai nilai yang direalisasikan diulang atau ToListAsync metode dipanggil. Lihat Eksekusi Kueri untuk informasi selengkapnya.

Catatan

Metode Contains ini dijalankan pada database, bukan dalam kode C#. Sensitivitas kasus pada kueri bergantung pada database dan kolaterasi. Di SQL Server, Contains peta ke SQL LIKE, yang tidak peka huruf besar/kecil. SQLite dengan kolasasi default adalah campuran peka huruf besar/kecil dan peka huruf besar/kecil,tergantung pada kueri. Untuk informasi tentang membuat kueri SQLite yang tidak peka huruf besar/kecil, lihat yang berikut ini:

• Bagaimana cara menggunakan kueri yang tidak peka huruf besar/kecil dengan penyedia Sqlite? (dotnet/efcore #11414)
• Cara membuat huruf besar/kecil kolom SQLite tidak peka (dotnet/AspNetCore.Docs #22314)
• Kolatasi dan Sensitivitas Kasus

Navigasi ke halaman Film dan tambahkan string kueri seperti ?searchString=Ghost ke URL. Contohnya,https://localhost:5001/Movies?searchString=Ghost. Film yang difilter ditampilkan.

Jika templat rute berikut ditambahkan ke halaman Indeks, string pencarian dapat diteruskan sebagai segmen URL. Contohnya,https://localhost:5001/Movies/Ghost.

@page "{searchString?}"

Batasan rute sebelumnya memungkinkan pencarian judul sebagai data rute (segmen URL) alih-alih sebagai nilai string kueri. "{searchString?}" artinya ? ini adalah parameter rute opsional.

Runtime ASP.NET Core menggunakan pengikatan model untuk mengatur nilai SearchString properti dari string kueri (?searchString=Ghost) atau data rute (https://localhost:5001/Movies/Ghost). Pengikatan model tidak peka huruf besar/kecil.

Namun, pengguna tidak dapat diharapkan untuk mengubah URL untuk mencari film. Dalam langkah ini, UI ditambahkan untuk memfilter film. Jika Anda menambahkan batasan "{searchString?}"rute, hapus.

Pages/Movies/Index.cshtml Buka file, dan tambahkan markup yang disorot dalam kode berikut:

@page
@model RazorPagesMovie.Pages.Movies.IndexModel

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<p>
    <a asp-page="Create">Create New</a>
</p>

<form>
    <p>
        <label>Title: <input type="text" asp-for="SearchString" /></label>
        <input type="submit" value="Filter" />
    </p>
</form>

<table class="table">
    @*Markup removed for brevity.*@

Tag HTML <form> menggunakan Pembantu Tag berikut:

• Pembantu Tag Formulir. Saat formulir dikirimkan, string filter dikirim ke halaman Pages/Movies/Index melalui string kueri.
• Pembantu Tag Input

Simpan perubahan dan uji filter.

Cari berdasarkan genre

Movies/Index.cshtml.cs Perbarui metode halaman OnGetAsync dengan kode berikut:

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();
}

Kode berikut adalah kueri LINQ yang mengambil semua genre dari database.

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

Genre SelectList dibuat dengan memproyeksikan genre yang berbeda.

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

Menambahkan pencarian menurut genre ke Razor Halaman

Perbarui elemen seperti yang<form> Index.cshtml disorot dalam markup berikut:

@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>
        <label>Title: <input type="text" asp-for="SearchString" /></label>
        <input type="submit" value="Filter" />
    </p>
</form>

Uji aplikasi dengan mencari berdasarkan genre, berdasarkan judul film, dan oleh keduanya.

Langkah berikutnya

Sebelumnya: Perbarui halamanBerikutnya: Tambahkan bidang baru