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

Примечание.

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

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

До этого момента в руководстве весь приложение было включено для интерактивности, но приложениеприняло только интерактивность в своем Counter примере компонента. В этой части серии учебников объясняется, как внедрить интерактивность в компоненте фильма Index .

Внимание

Убедитесь, что приложение не запущено для следующих шагов.

Внедрение интерактивности

Интерактивность означает, что компонент имеет емкость для обработки событий пользовательского интерфейса с помощью кода C#, например нажатия кнопки. События обрабатываются на сервере средой выполнения ASP.NET Core или в браузере на клиенте средой выполнения на основе Blazor WebAssembly. В этом руководстве используется интерактивная отрисовка на стороне сервера (интерактивная среда SSR), также известная как отрисовка интерактивного сервера.InteractiveServer Рендеринг на стороне клиента (CSR), который по сути является интерактивным, рассматривается в справочной Blazor документации.

Интерактивная служба SSR обеспечивает широкий пользовательский интерфейс, например от клиентского приложения, но без необходимости создавать конечные точки API для доступа к ресурсам сервера. Взаимодействие пользовательского интерфейса обрабатывается сервером через подключение в режиме реального времени SignalR с браузером. Содержимое страниц для интерактивных страниц предварительно отображается, где содержимое на сервере изначально создается и отправляется клиенту без включения обработчиков событий для отрисованных элементов управления. При предварительной подготовке сервер выводит HTML-интерфейс страницы как можно скорее в ответ на первоначальный запрос, что делает приложение более адаптивным к пользователям.

Просмотрите API в Program файле (Program.cs), который включает интерактивный SSR. Razor Службы компонентов добавляются в приложение, чтобы компоненты Razor отображались статически с сервера (AddRazorComponents) и выполнялись с помощью интерактивного SSR (AddInteractiveServerComponents):

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

MapRazorComponents сопоставляет компоненты, определенные в корневом App компоненте, с заданной сборкой .NET и отрисовывает маршрутизируемые компоненты и AddInteractiveServerRenderMode настраивает центр приложения SignalR для поддержки интерактивного SSR:

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

До этого момента в серии учебников вызовы AddInteractiveServerComponents и AddInteractiveServerRenderMode не требуются для страниц фильма, так как приложение приняло только статические функции SSR для компонентов фильма. В этой статье объясняется, как внедрить интерактивные функции в компоненте фильма Index .

При Blazor установке типа отрисовки для компонента отрисовка называется режимом отрисовки компонента. В следующей таблице показаны доступные режимы отрисовки компонентов отрисовки Razor в .Blazor Web App

Имя Описание Расположение отрисовки Интерактивный
Статический сервер Статическое отрисовка на стороне сервера (статический SSR) Сервер
Интерактивный сервер Интерактивная отрисовка на стороне сервера (интерактивная среда SSR) с помощью Blazor Server. Сервер
Интерактивный webAssembly Использование Blazor WebAssemblyклиентской отрисовки (CSR). Клиент
Интерактивное авто Интерактивная служба SSR, используемая Blazor Server изначально, а затем CSR при последующих посещениях после Blazor скачивания пакета. Сервер, а затем клиент

Чтобы применить режим отрисовки к компоненту, разработчик использует @rendermode директиву или атрибут директивы для экземпляра компонента или определения компонента:

  • В следующем примере показано, как задать режим отрисовки для экземпляра компонента с помощью атрибута @rendermode директивы. В следующем примере используется гипотетический компонент диалогового окна (Dialog) в компоненте родительского чата (Chat).

    Components/Pages/Chat.razor В файле:

    <Dialog @rendermode="InteractiveServer" />

  • В следующем примере показано, как задать режим отрисовки для определения компонента с помощью директивы @rendermode . В следующем примере показана настройка режима отрисовки в файле определения компонентов (SalesForecast) гипотетического прогноза продаж (.razor).

    В верхней части Components/Pages/SalesForecast.razor файла:

    @page "/sales-forecast"
@rendermode InteractiveServer

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

Примечание.

Дополнительные сведения о режимах отрисовки и глобальной интерактивности предоставляются Blazorсправочной документацией. В целях этого руководства приложение принимает только интерактивный SSR на каждой странице или компоненте. После руководства вы можете использовать это приложение для изучения других режимов отрисовки компонентов и глобального расположения интерактивности.

Откройте файл компонента фильма Index (Components/Pages/MoviePages/Index.razor) и добавьте следующую @rendermode директиву сразу после директивы @page , чтобы сделать компонент интерактивным:

@rendermode InteractiveServer

Чтобы узнать, как интерактивный компонент улучшает взаимодействие с пользователем, давайте предоставим три улучшения приложению в следующих разделах:

  • Добавьте разбивку на страницы в компонент фильма QuickGrid .
  • QuickGrid Сделайте компонент сортируемым.
  • Замените HTML-форму для фильтрации фильмов по заголовку кодом C#, который:
    • Выполняется на сервере.
    • Отрисовывает содержимое в интерактивном режиме по базовому SignalR подключению.

Добавление разбиения на страницы в QuickGrid

Компонент QuickGrid может просматривать данные из базы данных.

Index Откройте компонент (Components/Pages/Movies/Index.razor). PaginationState Добавьте экземпляр в @code блок. Так как в этом руководстве для демонстрации используются только пять записей фильмов, задайте элементы ItemsPerPage2 для демонстрации разбиения на страницы. Как правило, число отображаемых элементов должно быть установлено на более высокое значение или динамически задано через раскрывающийся список.

private PaginationState pagination = new PaginationState { ItemsPerPage = 2 };

QuickGrid Задайте для свойства Paginationкомпонента pagination значение :

- <QuickGrid Class="table" Items="FilteredMovies">
+ <QuickGrid Class="table" Items="FilteredMovies" Pagination="pagination">

Чтобы предоставить пользовательский интерфейс для разбиения на страницы под QuickGrid компонентом, добавьте Paginator компонент под компонентом QuickGrid . Задайте для Paginator.Statepagination:

<Paginator State="pagination" />

Запустите приложение и перейдите на страницу фильмов Index . Вы можете просматривать элементы фильма по двум фильмам на страницу:

Список фильмов со второй страницей двух элементов

Компонент является интерактивным. Страница не перезагрузит страницы для выполнения разбиения по страницам. Разбиение по страницам выполняется в режиме реального времени между SignalR браузером и сервером, где операция разбиения на страницы выполняется на сервере с отрисованным результатом, отправляемым клиенту для отображения браузера.

Измените ItemsPerPage на более разумное значение, например пять элементов на страницу:

- private PaginationState pagination = new PaginationState { ItemsPerPage = 2 };
+ private PaginationState pagination = new PaginationState { ItemsPerPage = 5 };

Сортировки QuickGrid

Index Откройте компонент (Components/Pages/Movies/Index.razor).

Добавьте Sortable="true" (Sortable) в заголовок PropertyColumn<TGridItem,TProp>:

- <PropertyColumn Property="movie => movie.Title" />
+ <PropertyColumn Property="movie => movie.Title" Sortable="true" />

Вы можете отсортировать по названию QuickGrid фильма, выбрав Title столбец. Страница не перезагрузит для сортировки. Сортировка выполняется в режиме реального времени через SignalR подключение, где операция сортировки выполняется на сервере с отрисованным результатом, отправленным клиенту:

Список фильмов, отсортированный по столбцу Title

Использование кода C# и интерактивности для поиска по заголовку

В более ранней части серии учебников компонент был изменен, Index чтобы разрешить пользователю фильтровать фильмы по названию. Это было сделано следующим образом:

  • Добавление HTML-формы, которая выдает запрос GET на сервер с строкой поиска заголовка пользователя в виде пары "поле-значение" строки запроса (например, ?titleFilter=road+warrior если пользователь ищет "road warrior").
  • Добавление кода в компонент, который получает строку поиска заголовка из строки запроса и использует ее для фильтрации записей базы данных.

Предыдущий подход эффективен для компонента, который принимает статический SSR, где единственное взаимодействие между клиентом и сервером осуществляется через HTTP-запросы. Между клиентом и сервером не было динамического SignalR подключения, и приложению на сервере не было интерактивного обработки кода C# на основе действий пользователя в пользовательском интерфейсе компонента и возврата содержимого.

Теперь, когда компонент является интерактивным, он может обеспечить улучшенный пользовательский интерфейс с Blazor функциями для обработки привязок и событий.

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

Удалите следующие строки из @code блока:

- [SupplyParameterFromQuery]
- private string? TitleFilter { get; set; }
    
- private IQueryable<Movie> FilteredMovies =>
-     context.Movie.Where(m => m.Title!.Contains(TitleFilter ?? string.Empty));

Замените удаленный код следующим кодом:

private string titleFilter = string.Empty;

private IQueryable<Movie> FilteredMovies => 
    context.Movie.Where(m => m.Title!.Contains(titleFilter));

Затем компонент должен привязать titleFilter поле к <input> элементу, поэтому входные данные пользователя хранятся в переменной titleFilter . Привязка достигается Blazor с помощью атрибута @bind директивы.

Удалите HTML-форму из компонента:

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

На его месте добавьте следующую Razor разметку:

<input type="search" @bind="titleFilter" @bind:event="oninput" />

@bind:event="oninput" выполняет привязку для события HTML oninput , которое запускается при <input> изменении значения элемента в виде прямого результата ввода пользователя в поле поиска. Привязка QuickGrid к FilteredMovies. Как titleFilter изменяется со значением поля поиска, rerendering привязанный QuickGrid к FilteredMovies методу сущности фильма отфильтровывается на основе обновленного titleFilterзначения.

Запустите приложение, введите "road warrior" в поле поиска и обратите внимание на то, как QuickGrid фильтруется каждый символ, введенный до тех пор, пока поле поиска не достигнет "road " ("road, за которым следует пробел).

Список фильмов отфильтрован до фильма

Запустите приложение, введите "Road Warrior" в поле поиска и обратите внимание на то, как QuickGrid фильтруется каждый символ, введенный до тех пор, пока поле поиска не достигнет "Road " ("Road, за которым следует пробел).

Список фильмов отфильтрован до фильма

Запустите приложение, введите "Road Warrior" в поле поиска и обратите внимание на то, как QuickGrid фильтруется каждый символ, введенный до тех пор, пока поле поиска не достигнет "Road " ("Road, за которым следует пробел).

Список фильмов отфильтрован до фильма

Фильтрация записей базы данных выполняется на сервере, и сервер интерактивно отправляет HTML-код для отображения по одному SignalR подключению. Страница не перезагрузит. Пользователь чувствует, что взаимодействие со страницей выполняет код на клиенте. Фактически, код выполняется сервером.

Вместо HTML-формы, отправляя запрос GET в этом сценарии, можно также использовать JavaScript для отправки запроса на сервер с помощью API извлечения или API XMLHttpRequest. В большинстве случаев JavaScript можно заменить с помощью Blazor C# в интерактивном компоненте.

Стилизуйте компонент QuickGrid

Стили можно применить к отрисованному компоненту QuickGrid с помощью таблицы стилей, изолированной для компонента Index через изоляцию CSS .

Изоляция CSS применяется путем добавления файла таблицы стилей с использованием формата имени файла {COMPONENT NAME}.razor.css, где заполнитель {COMPONENT NAME} является именем компонента.

Чтобы применить стили к дочернему компоненту, например компоненту QuickGrid компонента Index, используйте ::deep псевдоэлемент.

В папке MoviePages добавьте следующую таблицу стилей для компонента Index. Используйте псевдоэлементы ::deep, чтобы установить высоту строки 3em и вертикально выровнять содержимое ячеек таблицы.

Components/Pages/MoviePages/Index.razor.css:

::deep tr {
    height: 3em;
}

    ::deep tr > td {
        vertical-align: middle;
    }

::deep псевдоэлемент работает только с элементами-потомками, поэтому компонент QuickGrid должен быть обернут в <div> или другой элемент блочного уровня, чтобы на него можно было применить стили.

В Components/Pages/MoviePages/Index.razorпоместите теги <div> вокруг компонента QuickGrid:

+ <div>
    <QuickGrid ...>
        ...
    </QuickGrid>
+ </div>

Blazor перезаписывает селекторы CSS для сопоставления разметки, отображаемой компонентом. Переписанные стили CSS объединяются и создаются как статический ресурс, поэтому вам не нужно предпринимать дальнейших действий для применения стилей к отрисованному компоненту QuickGrid.

список фильмов с высотой строк в 3em с вертикальным центром содержимого

Очистка

После завершения работы с руководством и удаления примера приложения из локальной системы можно также удалить BlazorWebAppMovies базу данных в sql Server Visual Studio обозреватель объектов (SSOX):

  1. Доступ к SSOX, выбрав представление>SQL Server обозреватель объектов в строке меню.
  2. Отображение списка баз данных путем выбора треугольников рядом SQL Server>(localdb)\MSSQLLocalDB>Databasesс ним.
  3. Щелкните правой BlazorWebAppMovies кнопкой мыши базу данных в списке и выберите "Удалить".
  4. Установите флажок, чтобы закрыть существующие подключения перед нажатием кнопки "ОК".

При удалении базы данных в SSOX физические файлы базы данных удаляются из папки пользователя Windows.

После завершения работы с руководством и удаления примера приложения из локальной системы можно также вручную удалить BlazorWebAppMovies базу данных. Расположение базы данных зависит от платформы и операционной системы, но его можно найти по имени файла, указанному в базе данных строка подключения файла параметров приложения (appsettings.json).

После завершения работы с руководством и удаления примера приложения из локальной системы можно также вручную удалить BlazorWebAppMovies базу данных. Расположение базы данных зависит от платформы и операционной системы, но его можно найти по имени файла, указанному в базе данных строка подключения файла параметров приложения (appsettings.json).

Поздравляем!

Поздравляем с завершением серии учебников! Мы надеемся, что вы наслаждались этим руководством Blazor. Blazor предлагает множество дополнительных функций, чем мы смогли охватить в этой серии, и мы предлагаем вам ознакомиться Blazor с документацией, примерами и примерами приложений, чтобы узнать больше. Счастливый код с Blazor!

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

Если вы не знакомы Blazor, рекомендуем ознакомиться со следующими Blazor статьями, которые охватывают важные общие сведения для Blazor разработки:

Рекомендации по добавлению функции отправки эскизов в пример приложения этого руководства см. в разделе ASP.NET Core Blazor отправки файлов.

В боковой панели веб-сайта документации статьи организованы по теме и представлены примерно в общем или базовом порядке. Лучший подход при начале изучения Blazor заключается в том, чтобы прочитать оглавление сверху вниз.

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

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

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

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

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

  • Last updated on