Bagikan melalui


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

Catatan

Ini bukan versi terbaru dari artikel ini. Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.

Peringatan

Versi ASP.NET Core ini tidak lagi didukung. Untuk informasi selengkapnya, lihat Kebijakan Dukungan .NET dan .NET Core. Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.

Penting

Informasi ini berkaitan dengan produk pra-rilis yang mungkin dimodifikasi secara substansial sebelum dirilis secara komersial. Microsoft tidak memberikan jaminan, tersirat maupun tersurat, sehubungan dengan informasi yang diberikan di sini.

Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.

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

Movies/Index Perbarui metode halaman OnGetAsync 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:

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:

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

Tampilan indeks

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.

Tampilan indeks dengan kata hantu ditambahkan ke Url dan daftar film yang dikembalikan dari dua film, Ghostbusters dan Ghostbusters 2

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">
    <thead>

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.

Tampilan indeks dengan kata hantu yang ditik ke dalam kotak teks Filter judul

Cari berdasarkan genre

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

public async Task OnGetAsync()
{
    // <snippet_search_linqQuery>
    IQueryable<string> genreQuery = from m in _context.Movie
                                    orderby m.Genre
                                    select m.Genre;
    // </snippet_search_linqQuery>

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

    // <snippet_search_selectList>
    Genres = new SelectList(await genreQuery.Distinct().ToListAsync());
    // </snippet_search_selectList>
    Movie = await movies.ToListAsync();
}

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

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:

Tampilan indeks selesai dengan pemilih Genre dan filter pencarian kotak teks Judul

Langkah berikutnya

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:

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

Tampilan indeks

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.

Tampilan indeks dengan kata hantu ditambahkan ke Url dan daftar film yang dikembalikan dari dua film, Ghostbusters dan Ghostbusters 2

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.

Tampilan indeks dengan kata hantu yang ditik ke dalam kotak teks Filter judul

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

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:

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

Tampilan indeks

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.

Tampilan indeks dengan kata hantu ditambahkan ke Url dan daftar film yang dikembalikan dari dua film, Ghostbusters dan Ghostbusters 2

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.

Tampilan indeks dengan kata hantu yang ditik ke dalam kotak teks Filter judul

Cari berdasarkan genre

Perbarui metode halaman OnGetAsync Indeks 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

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

Tambahkan kode yang disorot berikut ke Pages/Movies/Index.cshtml.cs:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.EntityFrameworkCore;
using RazorPagesMovie.Models;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace RazorPagesMovie.Pages.Movies
{
    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 pada 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:

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

Tampilan indeks

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.

Tampilan indeks dengan kata hantu ditambahkan ke Url dan daftar film yang dikembalikan dari dua film, Ghostbusters dan Ghostbusters 2

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.

Tampilan indeks dengan kata hantu yang ditik ke dalam kotak teks Filter judul

Cari berdasarkan genre

Perbarui metode halaman OnGetAsync Indeks 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

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

Tambahkan yang disorot berikut menggunakan pernyataan dan properti ke Pages/Movies/Index.cshtml.cs:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.EntityFrameworkCore;
using RazorPagesMovie.Models;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace RazorPagesMovie.Pages.Movies
{

    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; }
        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 pada 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:

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

Tampilan indeks

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.

Tampilan indeks dengan kata hantu ditambahkan ke Url dan daftar film yang dikembalikan dari dua film, Ghostbusters dan Ghostbusters 2

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.

Tampilan indeks dengan kata hantu yang ditik ke dalam kotak teks Filter judul

Cari berdasarkan genre

Perbarui metode halaman OnGetAsync Indeks 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

  1. 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>
    
    <table class="table">
        @*Markup removed for brevity.*@
    
    
  2. Uji aplikasi dengan mencari berdasarkan genre, berdasarkan judul film, dan oleh keduanya.

Langkah berikutnya