Введение

В моей предыдущей статье я четко объяснил Blazor, привязку данных и предпосылки, необходимые для начала работы с Blazor. В этой статье мы собираемся использовать компонент материала MudBlazor для создания богатых страниц пользовательского интерфейса. Для разработки сырого приложения мы будем использовать Карты, Таблицы, Иконки, Кнопки, Разбивку на страницы, Поиск и другие компоненты для выполнения нашей задачи.

Если вы хотите узнать больше о Blazor, я настоятельно рекомендую посетить наши Статьи Blazor, где вы можете прочитать о Blazor Server Side, разработке веб-сборок Blazor и других темах.



GitHub — JayKrishnareddy/MudBlazor_CRUD: Использование библиотеки компонентов Mudblazor на стороне сервера Blazor для…
Использование библиотеки компонентов Mudblazor на стороне сервера Blazor для выполнения всех операций CRUD с использованием .Net 5.0…github.com



Содержание

  • Представляем MudBlazor.
  • Предпосылки
  • Настройка проекта — .Net 5
  • Установка и настройка MudBlazor
  • Настройка соединения с базой данных SQL с помощью EfCore
  • Операции Blazor CRUD с использованием сервисного слоя и шаблона репозитория
  • Создание пользовательского интерфейса с компонентами MudBlazor
  • Заключение

Представляем MudBlazor

MudBlazor — это «инфраструктура компонентов дизайна материалов» для Blazor, упрощающая структуру веб-разработки без проблем с CSS и javascript. Если вы ищете средства выбора даты, индикаторы выполнения, рейтинги и т. д.

MudBlazor поддержит вас, и почти все компоненты используют только C# (без Javascript, за исключением случаев, когда это строго необходимо). Видение MudBlazor состоит в том, чтобы сделать его чистым, простым и иметь настраиваемый современный дизайн. Никакого Javascript, только Blazor и CSS. Команда задокументировала библиотеку в очень понятной форме. С документацией можно ознакомиться здесь.

Предпосылки

  • SDK — .Net 5.0
  • IDE — Visual Studio 2019

Настройка проекта — .Net 5.0

Откройте Visual Studio и найдите приложение Blazor. Нажмите кнопку Далее,

Определите имя проекта, путь и имя решения. Нажмите на кнопку Создать,

После этого появится новое окно, в котором можно выбрать целевую платформу (.Net 5.0) из раскрывающегося списка. Обязательно выберите серверное приложение Blazor и в разделе «Дополнительно» «Настроить Https» проверено.

Установка и настройка MudBlazor

Откройте консоль диспетчера пакетов и попробуйте запустить следующую команду, чтобы установить MudBlazor в наш проект.

Install-Package MudBlazor

После установки пакета откройте файл startup.cs и попробуйте добавить службы внутри метода ConfigureServices(), чтобы добавить все распространенные службы, которые требуются компонент MudBlazor.

Теперь нам нужно добавить ссылки на файлы CSS и js MudBlazor на страницу Pages /_Host razor,

Здесь нам нужно импортировать пакет MudBlazor в файл _Imports.razor,

После этого нам нужно добавить провайдеров, которые мы используем из пакета MudBlazor. Откройте Shared/MainLayout.razor и добавьте приведенный ниже код в конец файла:

Настройка соединения с базой данных SQL с помощью EfCore

Чтобы здесь установить подключение к базе данных SQL с помощью EFcore, нам потребуются следующие пакеты для установления подключения с использованием подхода Code first. Мы можем установить необходимые пакеты с помощью диспетчера пакетов Nuget или с помощью консоли диспетчера пакетов.

Пакеты NuGet

Команды — Консоль PM

Install-Package Microsoft.EntityFrameworkCore.SqlServer
Install-Package Microsoft.EntityFrameworkCore.Tools

Начнем с определения классов в папке Models. Здесь мы создаем новую папку с именем Models, а внутри нее создадим класс Student с минимальными свойствами, чтобы упростить реализацию.

Student.cs

Ключ —атрибут действует как первичный ключ для нашего свойства Id.

Далее добавим в наше приложение класс DbContext. Это помогает нам получить доступ к таблицам базы данных, которые будут созданы нашими моделями через приложение. Создайте отдельную папку с именем ApplicationDbContext и внутри нее создайте класс AppDbContext для определения нашего DbContext.

AppDbContext.cs

Давайте добавим строку подключения нашей базы данных SQL в файл appsettings.json,

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

Наконец, давайте добавим миграции и обновим нашу базу данных. Запустите приведенные ниже команды одну за другой в консоли диспетчера пакетов.

add-migration 'initial'
update-database

Вот наша база данных и таблица Student, созданная в нашей локальной базе данных.

Операции Blazor Crud с использованием сервисного уровня и шаблона репозитория

ASP.Net Core предназначен для поддержки внедрения зависимостей. Теперь мы создаем общий интерфейс репозитория для операций сущностей, чтобы мы могли видеть слабосвязанное приложение. Создайте папку с именем UnitofWork, внутри которой будет поддерживаться уровень репозитория и его интерфейс.

Ниже приведен фрагмент кода,

Repository.cs

Создайте класс репозитория для выполнения операций с базой данных, которые наследуют интерфейс IRepository.

IRepository.cs

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

StudentServices.cs

IStudentService.cs

Здесь четкое описание всех наших услуг,

  1. GetStudents — для извлечения всех записей о студентах из базы данных.
  2. InsertStudent — чтобы вставить запись учащегося в таблицу и таким же образом обновить ту же запись учащегося, если есть какие-либо изменения, которые поставляются с пользовательским интерфейсом.
  3. DeleteStudent —Жесткоеудаление записи из таблицы.

Теперь, чтобы закончить со слоем обслуживания. мы должны зарегистрировать этот интерфейс и класс в файле Startup.cs. В метод ConfigureServices() добавьте следующий код:

services.AddScoped<IStudentService, StudentService>();

Кроме того, нам нужно зарегистрировать уровень репозитория в той же функции ConfigureServices() внутри класса Startup,

services.AddScoped(typeof(IRepository<>), typeof(Repository<>));

Создание пользовательского интерфейса с компонентами MudBlazor

Чтобы иметь пользовательский интерфейс, мы должны создать страницу Razor в Pages/StudentInfo.razor, где будут операции, а ниже приведен фрагмент кода для вызова операций Crud из уровня службы.

StudentInfo.razor

Вот краткое описание приведенного выше фрагмента кода,

  • OnInitializedAsync() — как только страница загружается, по умолчанию вызывается метод OnInitializedAsync. Внутри этого метода мы вызывали метод GetAllStudents() для извлечения результатов из базы данных и последовательного заполнения ими таблицы Mud Table.
  • GetAllStudents() — выборка данных из базы данных через сервисный уровень.
  • Search() —В загруженной таблице, если мы хотим отфильтровать данные по любому из полей, эта функция поиска поможет.
  • Save() — когда пользователь вводит данные в форму и нажимает кнопку SaveStudent, этот метод срабатывает и сохраняет или обновляет эти значения в базе данных.
  • Edit() — заполняет значения текстовых полей на основе выборки данных из списка с использованием идентификатора.
  • Delete() —эта функция помогает удалять записи из базы данных через сервисный уровень.

Форма MudBlazor

Мы использовали MudCards для разработки страницы с текстовыми полями и кнопкой «Сохранить» и Mutable для отображения записей, извлекаемых из базы данных.

Ниже приведен фрагмент кода,

Строка 1 — маршрутизация страницы с помощью учащегося.

Строки 3, 4, 5 — импорт файлов и служб и использование функции Snackbar, предоставляемой MudBlazor, для работы в качестве тостеров уведомлений.

Строка 8–22: карточка с заголовками, обязательными текстовыми полями и кнопкой для сохранения значений.

Строка 24–52: мы можем связать каждое из доступных свойств клиента с соответствующими столбцами, а также упомянутыми выше, предоставив возможность фильтровать данные на основе функций поиска, также у нас есть кнопки, известные как изменить и удалить. выполнить обновление или удаление.

Добавление маршрутизации страницы на страницу бритвы Shared/NavMenu.

NavMenu.razor

Вот как легко создать Blazor CRUD с помощью Mudblazor и Entity Framework Core.

Окончательный результат

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

Заключение

Я надеюсь, что эта статья поможет вам в понимании реализации операций CRUD с использованием MudBlazar с использованием серверной части Blazor и .Net 5. Исходный код вы можете найти здесь.

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

Продолжай учиться….!