Blazor Создание приложения базы данных фильма (часть 6. Добавление поиска)

Примечание.

Это не последняя версия этой статьи. В текущей версии см. версию .NET 10 этой статьи.

Эта статья является шестой частью Blazor учебника по приложению базы данных фильма, который учит вас основам создания ASP.NET Core Blazor Web App с функциями управления базой данных фильмов.

В этой части серии учебников рассматривается добавление функции поиска в компонент фильмов Index для фильтрации фильмов по названию.

Реализация функции фильтра для QuickGrid компонента

Компонент QuickGrid используется компонентом фильма Index (Components/MoviePages/Index.razor) для отображения фильмов из базы данных:

<QuickGrid Class="table" Items="context.Movie">
    ...
</QuickGrid>

Параметр Items получает IQueryable<TGridItem>тип данных, TGridItem представленных каждой строкой в сетке (Movie). Items назначается коллекция сущностей фильма (DbSet<Movie>), полученных из созданного контекста базы данных (CreateDbContext) фабрики контекста внедренной базы данных (DbFactory).

Чтобы сделать QuickGrid фильтр компонента в заголовке фильма, Index компонент должен:

• Задайте строку фильтра в качестве параметра компонента из строки запроса.
• Если параметр имеет значение, отфильтруйте фильмы, возвращаемые из базы данных.
• Укажите входные данные для пользователя, чтобы предоставить строку фильтра и кнопку для активации перезагрузки с помощью фильтра.

Начните с добавления следующего @code кода в Index блок компонента (MoviePages/Index.razor):

[SupplyParameterFromQuery]
private string? TitleFilter { get; set; }

private IQueryable<Movie> FilteredMovies => 
    context.Movie.Where(m => m.Title!.Contains(TitleFilter ?? string.Empty));

TitleFilter — это строка фильтра. Свойство предоставляется [SupplyParameterFromQuery] атрибутом, который позволяет Blazor знать, что значение TitleFilter должно быть назначено из строки запроса, если строка запроса содержит поле с тем же именем (например, ?titleFilter=road+warrior дает TitleFilter значение road warrior). Обратите внимание, что имена полей строки запроса, например titleFilter, не учитывает регистр.

Свойство FilteredMovies — это IQueryable<Movie>тип назначения параметруQuickGridItems. Свойство фильтрует список фильмов на основе предоставленного TitleFilter. TitleFilter Если значение не назначено из строки запроса (TitleFilterимеет значениеnull), для предложения используется string.Empty пустая строка (Contains). Таким образом, фильмы не фильтруются для отображения.

Измените QuickGrid параметр компонента Items , чтобы использовать коллекцию movies :

- <QuickGrid Class="table" Items="context.Movie">
+ <QuickGrid Class="table" Items="FilteredMovies">

Код movie => movie.Title!.Contains(...) является лямбда-выражением. Лямбда-выражения используются в запросах на основе методов LINQ в качестве аргументов для стандартных методов оператора запросов, таких как Where методы или Contains методы. Запросы LINQ не выполняются, когда они определены или изменяются путем вызова метода, например Where, Containsили OrderBy. Вместо этого выполнение запроса откладывается. Оценка выражения задерживается до итерации его реализованного значения.

Метод Where выполняется в базе данных, а не в коде C#. Конфиденциальность регистра запроса зависит от базы данных и параметров сортировки. Для SQL Server Contains сопоставляется с SQL LIKE, что является нечувствительным. SQLite с параметрами сортировки по умолчанию обеспечивает сочетание регистра и нечувствительной фильтрации регистра в зависимости от запроса.

Запустите приложение и перейдите на страницу фильмовIndex./movies Фильмы в загрузке базы данных:

Добавьте строку запроса к URL-адресу в адресной строке: ?titleFilter=road+warrior Например, полный URL-адрес отображается, https://localhost:7073/movies?titleFilter=road+warriorесли номер порта равен 7073. Отображается отфильтрованный фильм:

Добавьте строку запроса к URL-адресу в адресной строке: ?titleFilter=Road+Warrior Например, полный URL-адрес отображается, https://localhost:7073/movies?titleFilter=Road+Warriorесли номер порта равен 7073. Отображается отфильтрованный фильм:

Добавьте строку запроса к URL-адресу в адресной строке: ?titleFilter=Road+Warrior Например, полный URL-адрес отображается, https://localhost:7073/movies?titleFilter=Road+Warriorесли номер порта равен 7073. Отображается отфильтрованный фильм:

Затем предоставьте пользователям способ предоставить titleFilter строку фильтра через пользовательский интерфейс компонента. Добавьте следующий HTML-код в заголовок H1 (<h1>Index</h1>). Следующий HTML перезагрузит страницу с содержимым текстового поля в виде значения строки запроса:

<div>
    <form action="/movies" data-enhance>
        <input type="search" name="titleFilter" />
        <input type="submit" value="Search" />
    </form>
</div>

Атрибут data-enhance применяет расширенную навигацию к компоненту, где Blazor перехватывает запрос GET и выполняет запрос получения. Blazor затем исправляет содержимое ответа на страницу, что позволяет избежать полной перезагрузки страницы и сохраняет больше состояния страницы. Страница загружается быстрее, как правило, без потери позиции прокрутки пользователя.

Сохраните файл, над которым вы работаете. Примените изменение путем перезапуска приложения или использования Горячая перезагрузка для применения изменения к работающему приложению.

Закройте окно браузера и в VS Code выберите "Запустить>перезагрузку отладки" или нажмите клавиши ++ на клавиатуре. VS Code перекомпилирует и запускает приложение с сохраненными изменениями и создает новое окно браузера для приложения.

Так как приложение в настоящее время работает с dotnet watch, сохраненные изменения обнаруживаются автоматически и отражаются в существующем окне браузера.

Введите "road warrior" в поле поиска и нажмите Search кнопку, чтобы отфильтровать фильмы:

Результат после поиска:road warrior

Обратите внимание, что поле поиска теряет значение поиска ("road warrior") при фильтрации фильмов. Если вы хотите сохранить искомое значение, добавьте data-permanent атрибут:

Введите "Road Warrior" в поле поиска и нажмите Search кнопку, чтобы отфильтровать фильмы:

Результат после поиска:Road Warrior

Обратите внимание, что поле поиска теряет значение поиска ("Road Warrior") при фильтрации фильмов. Если вы хотите сохранить искомое значение, добавьте data-permanent атрибут:

Введите "Road Warrior" в поле поиска и нажмите Search кнопку, чтобы отфильтровать фильмы:

Результат после поиска:Road Warrior

Обратите внимание, что поле поиска теряет значение поиска ("Road Warrior") при фильтрации фильмов. Если вы хотите сохранить искомое значение, добавьте data-permanent атрибут:

- <form action="/movies" data-enhance>
+ <form action="/movies" data-enhance data-permanent>

Остановка приложения

Остановите приложение, закрыв окно браузера.

Остановите приложение, закрыв окно браузера и нажав клавиши SHIFT+F5 на клавиатуре в VS Code.

Остановите приложение, закрыв окно браузера и нажав клавиши CTRL+C в командной оболочке.

Устранение неполадок с завершенным примером

Если возникла проблема при выполнении руководства, которое невозможно устранить из текста, сравните код с завершенным проектом Blazor в репозитории примеров:

Репозиторий GitHub с примерами для Blazor (dotnet/blazor-samples)

Выберите последнюю папку версии. Пример папки для проекта этого руководства называется BlazorWebAppMovies.

Дополнительные ресурсы

• Документация по LINQ
• Написание запросов C# LINQ для запроса данных (документация по C#)
• Лямбда-выражение (документация по C#

Юридические услуги

Mad Max, The Road Warrior, Mad Max: Beyond Thunderdome, Mad Max: Fury Road, и Furiosa: Mad Max Saga являются товарными знаками и авторскими правами Warner Bros. Развлечения.

Следующие шаги

Предыдущий: добавление проверкидалее: добавление нового поля