Bölüm 6, ASP.NET Core Razor Sayfalarına arama ekleme

Gönderen Rick Anderson

Aşağıdaki bölümlerde, filmlerde türe veya ada göre arama yapılır.

aşağıdaki vurgulanmış kodu içine Pages/Movies/Index.cshtml.csekleyin:

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

Önceki kodda:

  • SearchString: Kullanıcıların arama metin kutusuna girdiği metni içerir. SearchString özniteliğine [BindProperty] sahiptir. [BindProperty] özelliğiyle aynı ada sahip form değerlerini ve sorgu dizelerini bağlar. [BindProperty(SupportsGet = true)] HTTP GET isteklerinde bağlama için gereklidir.
  • Genres: Türlerin listesini içerir. Genres kullanıcının listeden bir tür seçmesine izin verir. SelectList Gerektirir using Microsoft.AspNetCore.Mvc.Rendering;
  • MovieGenre: Kullanıcının seçtiği türü içerir. Örneğin, "Western".
  • Genres ve MovieGenre bu öğreticinin devamında kullanılır.

Uyarı

Güvenlik nedeniyle, istek verilerini sayfa modeli özelliklerine bağlamayı GET kabul etmeniz gerekir. Özelliklere eşlemeden önce kullanıcı girişini doğrulayın. Bağlamayı kabul etmek GET , sorgu dizesini veya yol değerlerini kullanan senaryoları ele alırken yararlıdır.

İsteklere GET bir özellik bağlamak için özniteliğin [BindProperty]SupportsGet özelliğini olarak trueayarlayın:

[BindProperty(SupportsGet = true)]

Daha fazla bilgi için bkz. Standup: Bind on GET discussion (YouTube) ASP.NET Core Community.

Index Sayfanın OnGetAsync yöntemini aşağıdaki kodla güncelleştirin:

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

Yöntemin OnGetAsync ilk satırı filmleri seçmek için bir LINQ sorgusu oluşturur:

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

Sorgu yalnızca bu noktada tanımlanır , veritabanında çalıştırılmaz .

SearchString Özellik null veya boş değilse, filmler sorgusu arama dizesine filtre uygulamak için değiştirilir:

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

Kod s => s.Title.Contains() bir Lambda İfadesi'dir. Lambdalar yöntem tabanlı LINQ sorgularında Where yöntemi veya Containsgibi standart sorgu işleci yöntemlerine bağımsız değişken olarak kullanılır. LINQ sorguları tanımlandığında veya , Containsveya OrderBygibi Wherebir yöntem çağrılarak değiştirildiğinde yürütülmez. Bunun yerine, sorgu yürütme ertelenmiş. Bir ifadenin değerlendirmesi, gerçekleştirilen değeri yineleninceye veya yöntemi çağrılana ToListAsync kadar geciktirilir. Daha fazla bilgi için bkz. Sorgu Yürütme .

Not

Contains yöntemi, C# kodunda değil veritabanında çalıştırılır. Sorgudaki büyük/küçük harf duyarlılığı veritabanına ve harmanlama işlemine bağlıdır. SQL Server'da, Contains büyük/küçük harfe duyarlı olmayan SQL LIKE ile eşler. Varsayılan harmanlama ile SQLite, sorguya bağlı olarak büyük/küçük harfe duyarlı ve büyük/küçük harfe duyarsız bir karışımdır. Büyük/küçük harfe duyarsız SQLite sorguları yapma hakkında bilgi için aşağıdakilere bakın:

Filmler sayfasına gidin ve URL'ye gibi ?searchString=Ghost bir sorgu dizesi ekleyin. Örneğin, https://localhost:5001/Movies?searchString=Ghost. Filtrelenen filmler görüntülenir.

Index view

Sayfaya Index aşağıdaki yol şablonu eklenirse, arama dizesi URL kesimi olarak geçirilebilir. Örneğin, https://localhost:5001/Movies/Ghost.

@page "{searchString?}"

Yukarıdaki yol kısıtlaması, başlığın sorgu dizesi değeri yerine rota verileri (URL kesimi) olarak aranmasına olanak tanır. in"{searchString?}", ? bunun isteğe bağlı bir yol parametresi olduğu anlamına gelir.

Index view with the word ghost added to the Url and a returned movie list of two movies, Ghostbusters and Ghostbusters 2

ASP.NET Core çalışma zamanı, sorgu dizesinden () veya yol verisindenhttps://localhost:5001/Movies/Ghost (?searchString=Ghost) özelliğin SearchString değerini ayarlamak için model bağlamayı kullanır. Model bağlama büyük/küçük harfe duyarlı değildir .

Ancak, kullanıcıların film aramak için URL'yi değiştirmesi beklenemez. Bu adımda, filmleri filtrelemek için kullanıcı arabirimi eklenir. Yol kısıtlamasını "{searchString?}"eklediyseniz kaldırın.

Pages/Movies/Index.cshtml Dosyayı açın ve aşağıdaki kodda vurgulanan işaretlemeyi ekleyin:

@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> etiketi aşağıdaki Etiket Yardımcılarını kullanır:

Değişiklikleri kaydedin ve filtreyi test edin.

Index view with the word ghost typed into the Title filter textbox

Türe göre arama

Index Sayfanın OnGetAsync yöntemini aşağıdaki kodla güncelleştirin:

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

Aşağıdaki kod, veritabanından tüm türleri alan bir LINQ sorgusudur.

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

Türlerin SelectList türü, farklı türlerin yansıtılmasıyla oluşturulur.

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

Sayfaya tarza Razor göre arama ekleme

Index.cshtml<form> öğesini aşağıdaki işaretlemede vurgulandığı gibi güncelleştirin:

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

Türe, film başlığına ve her ikisine göre arama yaparak uygulamayı test edin.

Aşağıdaki bölümlerde, filmlerde türe veya ada göre arama yapılır.

deyimini ve özelliklerini kullanarak vurgulanan aşağıdakini içine Pages/Movies/Index.cshtml.csekleyin:

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

Önceki kodda:

  • SearchString: Kullanıcıların arama metin kutusuna girdiği metni içerir. SearchString özniteliğine [BindProperty] sahiptir. [BindProperty] özelliğiyle aynı ada sahip form değerlerini ve sorgu dizelerini bağlar. [BindProperty(SupportsGet = true)] HTTP GET isteklerinde bağlama için gereklidir.
  • Genres: Türlerin listesini içerir. Genres kullanıcının listeden bir tür seçmesine izin verir. SelectList Gerektirir using Microsoft.AspNetCore.Mvc.Rendering;
  • MovieGenre: Kullanıcının seçtiği türü içerir. Örneğin, "Western".
  • Genres ve MovieGenre bu öğreticinin devamında kullanılır.

Uyarı

Güvenlik nedeniyle, istek verilerini sayfa modeli özelliklerine bağlamayı GET kabul etmeniz gerekir. Özelliklere eşlemeden önce kullanıcı girişini doğrulayın. Bağlamayı kabul etmek GET , sorgu dizesini veya yol değerlerini kullanan senaryoları ele alırken yararlıdır.

İsteklere GET bir özellik bağlamak için özniteliğin [BindProperty]SupportsGet özelliğini olarak trueayarlayın:

[BindProperty(SupportsGet = true)]

Daha fazla bilgi için bkz. Standup: Bind on GET discussion (YouTube) ASP.NET Core Community.

Index Sayfanın OnGetAsync yöntemini aşağıdaki kodla güncelleştirin:

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

Yöntemin OnGetAsync ilk satırı filmleri seçmek için bir LINQ sorgusu oluşturur:

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

Sorgu yalnızca bu noktada tanımlanır , veritabanında çalıştırılmaz .

SearchString Özellik null veya boş değilse, filmler sorgusu arama dizesine filtre uygulamak için değiştirilir:

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

Kod s => s.Title.Contains() bir Lambda İfadesi'dir. Lambdalar yöntem tabanlı LINQ sorgularında Where yöntemi veya Containsgibi standart sorgu işleci yöntemlerine bağımsız değişken olarak kullanılır. LINQ sorguları tanımlandığında veya , Containsveya OrderBygibi Wherebir yöntem çağrılarak değiştirildiğinde yürütülmez. Bunun yerine, sorgu yürütme ertelenmiş. Bir ifadenin değerlendirmesi, gerçekleştirilen değeri yineleninceye veya yöntemi çağrılana ToListAsync kadar geciktirilir. Daha fazla bilgi için bkz. Sorgu Yürütme .

Not

Contains yöntemi C# kodunda değil veritabanında çalıştırılır. Sorgudaki büyük/küçük harf duyarlılığı veritabanına ve harmanlama durumuna bağlıdır. SQL Server'da, Contains büyük/küçük harfe duyarlı olmayan SQL LIKE ile eşler. Varsayılan harmanlama ile SQLite, sorguya bağlı olarak büyük/küçük harfe duyarlı ve büyük/küçük harfe duyarsız bir karışımdır. Büyük/küçük harfe duyarsız SQLite sorguları yapma hakkında bilgi için aşağıdakilere bakın:

Filmler sayfasına gidin ve URL'ye gibi ?searchString=Ghost bir sorgu dizesi ekleyin. Örneğin, https://localhost:5001/Movies?searchString=Ghost. Filtrelenen filmler görüntülenir.

Index view

Sayfaya Index aşağıdaki yol şablonu eklenirse, arama dizesi url kesimi olarak geçirilebilir. Örneğin, https://localhost:5001/Movies/Ghost.

@page "{searchString?}"

Yukarıdaki yol kısıtlaması, başlıkta sorgu dizesi değeri yerine rota verileri (URL segmenti) olarak arama yapılmasına olanak tanır. in"{searchString?}", ? bunun isteğe bağlı bir yol parametresi olduğu anlamına gelir.

Index view with the word ghost added to the Url and a returned movie list of two movies, Ghostbusters and Ghostbusters 2

ASP.NET Core çalışma zamanı, sorgu dizesinden () veya yol verisindenhttps://localhost:5001/Movies/Ghost (?searchString=Ghost) özelliğin SearchString değerini ayarlamak için model bağlamayı kullanır. Model bağlama büyük/küçük harfe duyarlı değildir .

Ancak, kullanıcıların film aramak için URL'yi değiştirmeleri beklenemez. Bu adımda, filmleri filtrelemek için kullanıcı arabirimi eklenir. Yol kısıtlamasını "{searchString?}"eklediyseniz kaldırın.

Pages/Movies/Index.cshtml Dosyasını açın ve aşağıdaki kodda vurgulanan işaretlemeyi ekleyin:

@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> etiketi aşağıdaki Etiket Yardımcılarını kullanır:

Değişiklikleri kaydedin ve filtreyi test edin.

Index view with the word ghost typed into the Title filter textbox

Türe göre arama

Index Sayfanın OnGetAsync yöntemini aşağıdaki kodla güncelleştirin:

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

Aşağıdaki kod, veritabanından tüm türleri alan bir LINQ sorgusudur.

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

Türlerin SelectList türü, farklı türleri yansıtarak oluşturulur.

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

Sayfaya türe Razor göre arama ekleme

  1. Index.cshtml<form> öğesini aşağıdaki işaretlemede vurgulandığı gibi güncelleştirin:

    @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.*@
    
    
  2. Türe, film başlığına ve her ikisine göre arama yaparak uygulamayı test edin.

Ek kaynaklar