Перейти к содержанию

Crud Операции в Blazor Server Side (SSR )

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (2 оценок, среднее: 5,00 из 5)
Загрузка...

[ Полезный рекламный блок ]

Попробуйте свои силы в игре, где ваши навыки программирования на C# станут решающим фактором. Переходите по ссылке 🔰.


В этом уроке, мы рассмотрим как быстро и просто реализовать стандартный набор CRUD операцией в проекте Blazor Server.

Приложение будет управлять базой данных AnimalsDb, а его главная страница в конце будет выглядеть, как показано выше. 

В этом проекте, я покажу альтернативные способы создания компонентов на основе «Scaffolding Tools».

Scaffolding Tools — мощный набор инструментов, который позволяет автоматически создавать базовый код для веб-приложений на основе существующей базы данных или моделей данных. Они упрощают и ускоряют процесс разработки, позволяя генерировать стандартные CRUD (Create, Read, Update, Delete) операции и контроллеры для управления данными.

Создание и настройка проекта

Чтобы создать проект Animals, запустите Visual Studio и выберите в меню File (Файл) — New Project (Создать Проект). Укажите шаблон проекта Blazor Web App

Введите Animals, в поле Name, на следующей странице укажите .Net 8.0, Intractive render mode: Server, отметим checkbox для пункта – Include sample pages. Нажмите кнопку Create:

 Crud Операции в Blazor Server Side

На данный момент у нас есть начальный проект. Давайте запустим проект (Crtl + F5), чтобы убедиться, что все в порядке:

blazor ss

Модель и Репозиторий

Модель для приложения Animals будет основана на списке фильмов. Для этого реализуем класс Animals. Мы будем использовать этот класс с Entity Framework Core (EF Core) для работы с базой данных. EF Core — это фреймворк объектно-реляционного отображения (ORM), который упрощает код доступа к данным. Классы моделей не имеют зависимости от EF Core. Они просто определяют свойства данных, которые будут храниться в базе данных.

Создайте папку Models и добавьте в нее файл класса по имени Animal.cs со следующим содержимым:

Затем добавьте еще один класс под названием AnimalType.cs, как показано ниже:

Пришло время создать все необходимые компоненты, используя scaffolding.  Нажмем правой клавишей по папке Components / Pages и нажмем правой клавишей мышки AddNew Scaffoldet ItemRazor Components using Entity Framework (CRUD):

blazor with ef core crud

В следующем окне, выбираем следующие пункты:

blazor component with crud

Внимание, данная опция доступна только с Visual Studio preview 17.9. Нажимаем кнопку «Add».

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

«install the package microsoft.visualstudio.web.codegeneration.design and try again»

Перейдите в DependenciesManage NuGet PackagesBrowse и укажите в поиске:

Install-Package Microsoft.VisualStudio.Web.CodeGeneration.Design

Установите данную библиотеку. ВАЖНО! Если библиотека уже установлена и ошибка по-прежнему возникает, попробуйте пересобрать проект или же переустановить данную библиотеку вручную.

На этом этапе работает инструмент scaffolding. Автоматическое создание контекста базы данных и методов и представлений CRUD (create, read, update, and delete) действий известно как scaffolding. 

Созданные компоненты Razor добавляются в папку Pages проекта в сгенерированную папку, названную по имени класса модели. Сгенерированный компонент Index использует QuickGrid для отображения данных, о нем поговорим немного позже.

В нашем случае, в папке Pages, появится папка AnimalPages, со следующими компонентами для CRUD операций:

структура проекта blazor

В корне проекта можно увидеть новую папку Data, со сгенерированным классом ApplicationContext:

ApplicationContext координирует функциональность EF Core (Create, Read, Update, Delete и т.д.) для модели Animal.

ASP.NET Core построен с использованием инъекции зависимостей (DI). Службы (например, контекст БД EF Core) регистрируются с помощью DI во время запуска приложения. Компоненты, которым требуются эти службы, получают их через параметры конструктора:

Имя строки подключения передается в контекст путем вызова метода на объекте DbContextOptions. Для локальной разработки система конфигурации ASP.NET Core считывает строку подключения из файла appsettings.json, который уже успешно сгенерирован с необходимым содержимым, перейдем в файл и измени название базы данных на AnimalDb:

Так же, в классе Program, можно увидеть подключение следующего компонента:

Компонент QuickGrid — это компонент Razor для быстрого и эффективного отображения данных в табличной форме. QuickGrid представляет собой простой и удобный компонент сетки данных для распространенных сценариев визуализации сетки и служит эталонной архитектурой и базой производительности для создания компонентов сетки данных. QuickGrid отличается высокой степенью оптимизации и использует передовые методы для достижения оптимальной производительности рендеринга. 

Он используется на страницах, где отображается сводная информация, к примеру, откроем компонент Index.razor:

EF Core’s ApplicationContext предоставляет свойство DbSet<TEntity> для каждой таблицы в базе данных. Указываем нужное свойство в параметре Items.

В следующем примере в качестве источника данных используется DbSet<TEntity> (таблица) Animal:

Вы также можете использовать любой оператор LINQ, поддерживаемый EF, для фильтрации данных перед передачей их в параметр Items.

К примеру, отобразим только подвид рыб:

QuickGrid распознает экземпляры IQueryable, поставляемые EF, и умеет выполнять запросы асинхронно для повышения эффективности.

Учитывайте, что компоненты созданные с помощью скаффолдера, требуют рендеринга на стороне сервера (SSR), поэтому они не поддерживаются при работе с WebAssembly.

На данном этапе, на страницах Create.razor и Edit.razor, будет ошибка, связанная со свойством перечислением AnimalType, исправим ее, заменим элемент InputText:

На элемент InputSelect:

Так же, давайте облегчим пагинацию, указав ссылку на маршрутизируем компонент Index.razor, в компоненте NavMenu.razor:

Создание базы данных

Создадим базу данных с помощью функции EF Core Migrations. Миграции позволяет нам создать базу данных, соответствующую нашей модели данных, и обновлять схему базы данных при изменении модели данных.

Откройте Tools -> NuGet Package Manager > Package Manager Console (PMC) и выполните следующую команду в PMC:

PM> Add-Migration Initial

Команда Add-Migration генерирует код для создания начальной схемы базы данных, которая основана на модели, указанной в классе TvShowsContext. Аргумент Initial — это имя миграции, можно использовать любое имя.

После выполнения команды в папке Migrations будет создан файл миграции:

blazor migrations

В качестве следующего шага выполните следующую команду в Package Manager Console:

PM> Update-Database

Команда Update-Database запускает метод Up в файле Migrations/{time-stamp}_InitialCreate.cs, который создает базу данных.

Первоначальная настройка завершена, запустим приложение и проверим его работу:

blazor add component

Валидация данных

Применение компонента EditForm позволяет легко добавить валидацию к форме. Для валидации данных нам нужен валидатор — объект, который определяет, как проверять корректность данных. По умолчанию фреймворк Blazor предоставляет валидатор аннотаций данных — компонент DataAnnotationsValidator, который прикрепляет к форме поддержку валидации с помощью аннотаций данных. Как и в целом в .NET, аннотации данных в виде атрибутов позволяют установить правила валидации свойств модели.

По умолчанию на страницах Create.razor и Edit.razor, этот компонент уже добавлен:

На страницу, добавлен компонент ValidationSummary, который выводит все сообщения об ошибках. На уровне разметки html генерируется html-элемент <ul> с классом validation-errors:

Так же, добавлен компонент ValidationMessage<T>, который отображает сообщение об ошибке для отдельного свойства модели. Этот компонент генерирует html-элемент <div> с классом validation-message, который содержит сообщение об ошибке.

С помощью свойства For компонент ValidationMessage устанавливает валидируемое свойство модели через передаваемое лямбда-выражение.

Все что нам остается сделать, то использовать атрибуты для нашего класса Animal:

Запустим приложение и проверим его работу:

blazor validation

Создание компонента оповещения

При выполнении, каких либо действий, удобно будет использовать компонент, для оповещения пользователя. 

В папке Components, создадим папку Shared, внутри которой создадим компонент StatusMessage, со следующим содержимым:

Данный компонент построен на использовании Bootstrap. В нашем случае он сгодится для отображения сообщений 2-ух категорий: «Успешная операция» и «Ошибка». Немного позже мы используем его и вы увидите как это просто.

Создание компонента для наполнения тестовыми данными

Нам необходим компонент, который сможет заполнять БД тестовыми данными. Добавьте в папку Components / Pages, новую папку DataPages, а в ней новый компонент Seed.razor, со следующим содержимым:

Для работы с EntityFrameworkCore и компонентом StatusMessage, обязательно подключаем следующие пространства имен:

Для удобства пользователя, добавим ссылку на компонент в основном меню. 

По умолчанию, Blazor применяет несколько иконок от библиотеки Bootstrap Icons. Их добавление можно найти в файле NavMenu.razor.css:

Подобным образом вы можете добавить описание своих иконок. В этом файле уберём подключения старых иконок и изменим класс .bi, следующим образом:

Если вы захотите использовать все их иконки, то в файле App.razor, необходимо подключить их по прямой ссылке или загрузив в проект:

Перейдем в Components / Layout / NavMenu.razor и изменим его следующим образом:

Обратите внимание, я убрал использование класса -nav-menu, для всех ссылок и в качестве иконок, указал нужные мне из подключенной библиотеки.

Запустим приложение и проверим его работу:

server alert message

Пагинация компонента QuickGrid

Используя компонент Seed, заполним таблицу на 10_000 рядков, после чего перейдем в компонент Animals. Обратите внимание на скорость загрузки данных, оно занимает минимум 5 секунд и в этом время пользователь видит пустую таблицу (он может подумать, что данных попросту нет).

Первое что мы можем сделать, то как-то уведомить пользователя о том, что данные загружаются. Для этого, изменим компонент Index.razor, следующим образом: 

Вверху страницы, был добавлен атрибут StreamRendering:

Этот атрибут действует только в рендере, поддерживающем потоковый рендеринг (например, рендеринг HTML на стороне сервера из конечной точки Razor Component).

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

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

Именно за счет использование данного атрибута, при запуске компонента, мы можем видеть процесс загрузки:

blazor loading

Как только коллекций animals будет заполнена, мы отобразим ее в таблице.

Получение и отображение большого количества элементов может быть дорогостоящим. Если объем отображаемых данных может быть большим, следует использовать либо пагинацию, либо виртуализацию.

Чтобы включить пагинацию, необходимо создать экземпляр PaginationState и передать его в качестве свойства Pagination грида. Чтобы обеспечить пользовательский интерфейс для пагинации, мы можем использовать встроенный компонент Paginator или создать собственный пользовательский интерфейс, который считывает и изменяет экземпляр PaginationState.

Изменим компонент Index.razor, следующим образом:

В первую очередь, необходимо указать, что компонент работает с интерактивным рендерингом на сервере:

Запустиd сервер, благодаря соединению SignalR между сервером и клиентом будет происходить взаимодействие. Это позволит в данном случае изменить количество записей на страницу, с помощью выпадающего списка, привязанному к свойству ItemsPerPage, объекта pagination:

Как я уже говорил, чтобы включить пагинацию, необходимо создать экземпляр PaginationState:

И передать его в качестве свойства Pagination грида:

Запустим приложение и проверим его работу:

blazor pagionation

Осталось добавить кнопки пагинации, в компоненте Index.razor, за компонентом QuickGrid, добавим компонент Paginator:

Запустим приложение и проверим его работу:

blazor pagionation buttons

Вы можете настроить внешний вид Paginator, предоставив шаблон SummaryTemplate. Если вам нужна дополнительная настройка, вы можете создать свой собственный альтернативный пользовательский интерфейс, который будет работать с PaginationState. К примеру, отобразим все кнопки пагинации:

Сортировка компонента QuickGrid

Сортировкой управляют столбцы.

Для столбца PropertyColumn сортировка включается, если установить Sortable=«true». Это следует делать только в том случае, если ваш базовый источник данных поддерживает сортировку по выражению свойства этого столбца.

Для столбца TemplateColumn сортировка включается, если вы зададите значение параметра SortBy этого столбца.

Для пользовательского столбца, унаследованного от ColumnBase, сортировка включается, если вы установите Sortable=«true» или переопределите IsSortableByDefault и вернете true.

Давайте применим сортировку для всех столбцов, для этого в компоненте Index, изменим содержимое каждой колонки QuickGrid, добавив атрибут Sortable со значение true:

Как видите, все просто. Запустим приложение и проверим его работу.

Фильтрация компонента QuickGrid

QuickGrid не нуждается во встроенных API для фильтрации, поэтому мы можем легко настроить собственный пользовательский интерфейс для управления критериями включения и затем использовать его с источником данных.

Пользовательский интерфейс для управления критериями фильтрации может быть размещен в любом месте и построен с использованием обычных компонентов Blazor и привязки. Мы можем использовать функцию ColumnOptions в QuickGrid, чтобы поместить пользовательский интерфейс фильтрации во всплывающее окно, связанное с определенным столбцом.

Давайте реализуем возможность поиска по свойству Name, через всплывающее окно элемента QuickGrid, для этого изменим компонент Index.razor, следующим образом:

Вначале мы добавили приватное поле класса, которое содержит фильтр по имени для животных, а также приватное свойство класса, которое возвращает отфильтрованный набор животных. Оно использует LINQ-запрос для фильтрации animals, основываясь на nameFilter.

Метод filteredAnimals() применяет фильтрацию к списку животных на основе значения nameFilter. Если nameFilter не пустое, фильтрация осуществляется по имени животного, игнорируя регистр символов. Фильтрованный результат возвращается из свойства filteredAnimals.

После чего, для атрибута Items, компонента QuickGrid, применяется коллекция filteredAnimals. 

Для колонки animal.Name, добавляется модальное окно с помещенным внутри полем для ввода текста, которое привязано к полю nameFilter. Запустим приложение и проверим его работу:

blazor filtering

По такому же принципу, мы можем добавлять возможности фильтрации для остальных колонок, к примеру, добавим фильтр для колонки Weight:

Давайте создадим выпадающий список для выбора определенного типа животного, для начала изменим перечисление AnimalType, добавив ему константу All:

Теперь изменим компонент Index.razor, следующим образом:

Запустим приложение и проверим его работу:

blazor enum filter

Так как перечисление AnimalType приобрело новую константу All, не забудьте ее скрыть в компонентах Create.razor и Edit.razor:

На этом все, надеюсь, вам все понравилось. Обязательно сохраните этот проект, он нам пригодится для следующей теме проекта.

Я надеюсь, что вам понравилось читать эту статью, и она оказалась легкой для понимания. Пожалуйста, дайте мне знать, если у вас есть какие-либо комментарии или исправления.

Так же вам может быть интересна предыдущая статья — Проект с использованием Razor Pages (CRUD операции).


Вы хотите научится писать код на языке программирования C#?

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

Переходите к нам на страницу Dijix и ознакомьтесь с условиями обучения, мы специализируемся только на индивидуальных занятиях, как для начинающих, так и для более продвинутых программистов. Вы можете взять как одно занятие для проработки интересующего Вас вопроса, так и несколько, для более плотной работы. Благодаря личному кабинету, каждый студент повысит качество своего обучения, в вашем распоряжении:

  • Доступ к пройденному материалу
  • Тематические статьи
  • Библиотека книг
  • Онлайн тестирование
  • Общение в закрытых группах

https://dijix.com.ua

Живи в своем мире, программируй в нашем.


 

Опубликовано в рубрикеAsp.Net CoreBlazor Server
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x