В этой статье мы собираемся создать приложение одной страницы (SPA), используя страницы бритвы в Blazor, с помощью основной базы данных основной базы данных объектов.
Вступление
Одиночная страница Приложение (SPA) – это веб-приложения, которые загружают одну HTML-страницу и динамически обновляют эту страницу, как пользователь взаимодействует с приложением. Мы будем создавать примеры системы управления отделами работниками и выполнять на нее операции CRUD.
Мы будем использовать Visual Studio 2017 и SQL Server 2014.
Посмотрите на окончательное приложение.
Предварительные условия
- Установить .NET. Core 2.1 Предварительный просмотр 2 SDK из здесь
- Установить Visual Studio 2017 V15.7 или выше от здесь
- Установите расширение сервисов Asp.net Core Blazor из здесь
- SQL Server 2008 или выше
Blazor Framework не поддерживается версиями ниже Visual Studio 2017 V15.7.
Исходный код
Получите исходный код из Github Отказ
Создание таблицы
Мы будем использовать таблицу БД для хранения всех записей сотрудников.
Откройте SQL Server и используйте следующий скрипт для создания Сотрудник стол.
CREATE TABLE Employee ( EmployeeID int IDENTITY(1,1) PRIMARY KEY, Name varchar(20) NOT NULL , City varchar(20) NOT NULL , Department varchar(20) NOT NULL , Gender varchar(6) NOT NULL )
Создайте веб-приложение Blazor
Откройте Visual Studio и выберите «Файл»> «Новый»> «Проект».
После выбора проекта откроется диалог «новый проект». На левой панели выберите «.NET Ядро «Внутри Visual C # меню. Затем выберите «ASP.NET Core Web Application» из доступных типов проектов. Поместите название проекта как «Blazorspa» и нажмите «ОК».
После нажатия на «ОК», новый диалог откроется просьбой выбрать шаблон проекта. Вы можете наблюдать двух раскрывающихся меню в левом верхнем углу окна шаблона. Выберите “.net. CORE “и” ASP.NET CORE 2.0 “от этих раскрывающихся. Затем выберите шаблон «Blazor (ASP.NET CORE CORE) и нажмите« ОК ».
Теперь наше решение Blazor будет создано. Вы можете наблюдать структуру папки в исследователе решений, как показано на изображении ниже.
Вы можете наблюдать, что у нас есть три файла проекта, созданные внутри этого решения.
- Blazorspa.client – имеет бокомый код клиента и содержит страницы, которые будут отображаться на браузере.
- BLAZORSPA.SERVER – имеет самые боковые коды серверов, такие как операции, связанные с БД и веб-API.
- Blazorspa.shared – содержит общий код, который может быть доступен как клиент, так и сервер. Содержит наши модели классов.
Леса модели к приложению
Мы используем первый подход основной базы данных Framework Framework для создания наших моделей. Мы создадим наш класс модели в проекте «Blazorspa.shared», чтобы он мог быть доступен как к клиенту, так и на сервере проекта.
Перейдите в «Инструменты»> «Nuget Package Manager»> «Консоль менеджера пакетов». Выберите «Blazorspa.Shared» из раскрывающегося списка «Проект по умолчанию». Обратитесь к изображению ниже:
Во-первых, мы установим пакет для провайдера баз данных, который мы ориентируемся, который является SQL Server в этом случае. Запустите следующую команду:
Install-Package Microsoft.EntityFrameworkCore.SqlServer
Поскольку мы используем инструменты Entity Framework для создания модели из существующей базы данных, мы также установим пакет инструментов. Запустите следующую команду:
Install-Package Microsoft.EntityFrameworkCore.Tools
После того, как вы установили как пакеты, мы рассмотрим нашу модель из таблиц базы данных, используя следующую команду:
Scaffold-DbContext "Your connection string here" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models -Tables Employee
Не забудьте Чтобы поставить свою собственную соединительную строку (внутри "" ). После успешного выполнения этой команды вы можете соблюдать папку «Модели». Он содержит два класса «MyTestdbcontext.cs» и «работоспособность». Следовательно, мы успешно лежали наши модели с помощью основной базы данных основной базы данных объектов.
На данный момент папка моделей будет иметь следующую структуру:
Создание слоя доступа к данным для приложения
Щелкните правой кнопкой мыши на проекте «Blazorspa.server», а затем выберите «Добавить»> «Новую папку» и назовите папку как «DataAccess». Мы будем добавлять наш класс для обработки операций, связанных с базой данных, только в этой папке.
Щелкните правой кнопкой мыши на папке «ДатаКесс» и выберите «Добавить»> «Класс». Назовите ваш класс «SENDOWEEDATACCESSLAYER.CS».
Открыть “servateeeputataaccesslayer.cs” и поместите следующий код в него:
using BlazorSPA.Shared.Models;using Microsoft.EntityFrameworkCore;using System;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;namespace BlazorSPA.Server.DataAccess{ public class EmployeeDataAccessLayer { myTestDBContext db = new myTestDBContext(); //To Get all employees details public IEnumerable GetAllEmployees() { try { return db.Employee.ToList(); } catch { throw; } } //To Add new employee record public void AddEmployee(Employee employee) { try { db.Employee.Add(employee); db.SaveChanges(); } catch { throw; } } //To Update the records of a particluar employee public void UpdateEmployee(Employee employee) { try { db.Entry(employee).State = EntityState.Modified; db.SaveChanges(); } catch { throw; } } //Get the details of a particular employee public Employee GetEmployeeData(int id) { try { Employee employee = db.Employee.Find(id); return employee; } catch { throw; } } //To Delete the record of a particular employee public void DeleteEmployee(int id) { try { Employee emp = db.Employee.Find(id); db.Employee.Remove(emp); db.SaveChanges(); } catch { throw; } } }} Здесь мы определили методы для обработки операций с базой данных. GetAlLemploys будет получать все данные сотрудников с таблицы работников. Точно так же Дополнение к сектору создаст новую запись сотрудника, а UpdateMployeree обновит запись существующего сотрудника. Getemployedata будет получать запись работника, соответствующий идентификатору работника, переданному ему, и Deleteemployeree Удалит запись сотрудника, соответствующий ID сотрудника, переданному ему.
Добавление контроллера веб-API в приложение
Щелкните правой кнопкой мыши на папке «Blazorspa.Server/Controllers» и выберите «Добавить»> «Новый элемент». Откроется диалоговое окно «Добавить новый элемент». Выберите «ASP.NET» с левой панели, затем выберите «Класс контроллера API» с панели шаблонов и поместите название «SMARTEECONTROLLER.CS». Нажмите «Добавить».
Это создаст наше API Сотрудникэконтроллер класс.
Мы позвоним методам СИРОВАННЫЙТАКТАКСCESSLAYER Класс, чтобы получить данные и передавать данные на стороне клиента.
Открыть “smartyeecontroller.cs” файл и поместите следующий код в него:
using System;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;using BlazorSPA.Server.DataAccess;using BlazorSPA.Shared.Models;using Microsoft.AspNetCore.Mvc;namespace BlazorSPA.Server.Controllers{ public class EmployeeController : Controller { EmployeeDataAccessLayer objemployee = new EmployeeDataAccessLayer(); [HttpGet] [Route("api/Employee/Index")] public IEnumerable Index() { return objemployee.GetAllEmployees(); } [HttpPost] [Route("api/Employee/Create")] public void Create([FromBody] Employee employee) { if (ModelState.IsValid) objemployee.AddEmployee(employee); } [HttpGet] [Route("api/Employee/Details/{id}")] public Employee Details(int id) { return objemployee.GetEmployeeData(id); } [HttpPut] [Route("api/Employee/Edit")] public void Edit([FromBody]Employee employee) { if (ModelState.IsValid) objemployee.UpdateEmployee(employee); } [HttpDelete] [Route("api/Employee/Delete/{id}")] public void Delete(int id) { objemployee.DeleteEmployee(id); } }} На данный момент наша проекта «Blazorspa.server» имеет следующую структуру.
Мы сделаем с нашей логикой Backenn. Поэтому теперь мы перейдем к коду нашей клиентской стороне.
Добавление страницы бритвы в приложение
Мы добавим страницу бритвы в папку «Blazorspa.client/Pages». По умолчанию у нас есть страницы «Counter» и «Petch Data», предоставленные в нашем приложении. Эти страницы по умолчанию не повлияют на наше приложение, но, ради этого учебника, мы удалите «FetchData» и страницы «счетчики» из папки «Blazorspa.client/Pages».
Щелкните правой кнопкой мыши на папке «Blazorspa.client/Pages», а затем выберите «Добавить»> «Новый элемент». Откроется диалоговое окно «Добавить новый элемент». Выберите «ASP.NET CORE» с левой панели, затем выберите «Razer Page» с панели шаблонов и назовите его «SerformEedata.cshtml». Нажмите «Добавить».
Это добавит страницу «Сотрудник data.chtml» на папку «Blazor Spa.client/Pages». Эта бритвенная страница будет иметь два файла, «SearmentAredata.cshtml» и “ someporeeedata.cshtml.cs” Отказ
Теперь мы добавим код на эти страницы.
Somerementate.cshtml.cs.
Открыть “serforteedata.cshtml.cs” и поместите следующий код в него:
using System;using System.Collections.Generic;using System.Linq;using System.Net.Http;using System.Threading.Tasks;using BlazorSPA.Shared.Models;using Microsoft.AspNetCore.Blazor;using Microsoft.AspNetCore.Blazor.Components;using Microsoft.AspNetCore.Blazor.Services;namespace BlazorSPA.Client.Pages{ public class EmployeeDataModel : BlazorComponent { [Inject] protected HttpClient Http { get; set; } [Inject] protected IUriHelper UriHelper { get; set; } [Parameter] protected string paramEmpID { get; set; } = "0"; [Parameter] protected string action { get; set; } protected List empList = new List(); protected Employee emp = new Employee(); protected string title { get; set; } protected override async Task OnParametersSetAsync() { if (action == "fetch") { await FetchEmployee(); this.StateHasChanged(); } else if (action == "create") { title = "Add Employee"; emp = new Employee(); } else if (paramEmpID != "0") { if (action == "edit") { title = "Edit Employee"; } else if (action == "delete") { title = "Delete Employee"; } emp = await Http.GetJsonAsync("/api/Employee/Details/" + Convert.ToInt32(paramEmpID)); } } protected async Task FetchEmployee() { title = "Employee Data"; empList = await Http.GetJsonAsync>("api/Employee/Index"); } protected async Task CreateEmployee() { if (emp.EmployeeId != 0) { await Http.SendJsonAsync(HttpMethod.Put, "api/Employee/Edit", emp); } else { await Http.SendJsonAsync(HttpMethod.Post, "/api/Employee/Create", emp); } UriHelper.NavigateTo("/employee/fetch"); } protected async Task DeleteEmployee() { await Http.DeleteAsync("api/Employee/Delete/" + Convert.ToInt32(paramEmpID)); UriHelper.NavigateTo("/employee/fetch"); } protected void Cancel() { title = "Employee Data"; UriHelper.NavigateTo("/employee/fetch"); } }} Давайте понять этот код. Мы определили класс Сниматель Это будет держать все наши методы, которые мы будем использовать в «rempeedata.cshtml» страница.
Мы впрыскиваем Httpclient Сервис для включения вызова веб-API и Юрихлпер Служба для включения перенаправления URL. После этого мы определили наши параметры атрибуты – Paramempid и действие . Эти параметры используются в «intripeedata.cshtml», чтобы определить маршруты для нашей страницы. Мы также объявили о собственности Название Чтобы отобразить заголовок, чтобы указать текущее действие, которое выполняется на странице.
OnParameterSetasync Метод вызывается каждый раз, когда параметры URL установлены для страницы. Мы проверим значение параметра Действие Чтобы определить текущую операцию на странице.
Если действие установлено на принести тогда мы вызовем Fetchemployeree Метод для получения обновленного списка сотрудников из базы данных и обновить UI, используя UndhasChanged метод.
Мы проверим, установлен ли атрибут действий параметра Parameter на Создайте Затем мы установим название страницы «добавить сотрудника» и создать новый объект типа Сотрудник Отказ Если paramempid не «0», то это либо редактировать действие или Удалить действие. Соответственно установим свойство заголовка соответственно, а затем вызвать метод нашего веб-API для получения данных для идентификатора работника, как установлено в Paramempid имущество.
Метод Fetchemployeree Установит название «Данные сотрудников» и извлеките все данные сотрудников, вызывая метод нашего веб-API.
CreateMollyee Метод проверит, будет ли он добавить новую запись сотрудника или редактировать существующую запись сотрудника. Если Сотрудника Собственность устанавливается, то это редактировать Запрос, и мы отправим запрос на веб-API. Если Сотрудника не установлен, то это Создать Запрос, и мы отправим сообщение запроса на веб-API. Мы установим Название Имущество в соответствии с соответствующей стоимостью действия, а затем вызывает метод нашего веб-API для получения данных для идентификатора сотрудника, как установлено в Paramempid имущество.
Deleteemployeree Метод удалит запись сотрудника для идентификатора работника, как установлено в Paramempid имущество. После удаления пользователь перенаправлен на страницу «/Shareee/Fetch».
В Отмена Метод, мы установим свойство заголовка на «данные сотрудника» и перенаправить пользователя на страницу «/сотрудника/Fetch» Отказ
Searmentateata.cshtml.
Откройте страницу «SENDOWEEDEATES.CSHTML» и поместите следующий код в него:
@page "/employee/{action}/{paramEmpID}"@page "/employee/{action}"@inherits EmployeeDataModel@title
@if (action == "fetch"){ }@if (action == "create" || action == "edit"){ }else if (action == "delete"){ | Name | @emp.Name |
| Gender | @emp.Gender |
| Department | @emp.Department |
| City | @emp.City |
Loading...
}else{| ID | Name | Gender | Department | City | |
|---|---|---|---|---|---|
| @emp.EmployeeId | @emp.Name | @emp.Gender | @emp.Department | @emp.City | Edit | Delete |
В верхней части мы определили маршруты для нашей страницы. Есть две маршруты:
/Сотрудник/{действие}/{paramempid}: Это примет имя действия наряду с ID сотрудника. Этот маршрут вызывается, когда мы выполняем редактирование или удаление эксплуатация . Когда мы называемредактироватьилиУдалитьДействие по конкретному данным сотрудника, идентификатор работника также передается в виде параметра URL./Сотрудник/{действие}: Это только примет имя действия. Этот маршрут вызывается, когда мы создаем данные нового сотрудника, или мы принесем записи всех сотрудников.
Мы также наследуем Сниматель Класс, который определяется в файле «rempeedata.cshtml.cs». Это позволит нам использовать методы, определенные в Сниматель класс.
После этого мы устанавливаем заголовок, который будет отображаться на нашей странице. Название динамически и изменяется в соответствии с действием, который выполняется в настоящее время на странице.
Мы покажем ссылку «Создать новую» только в том случае, если действие принести . Если действие является Создать или редактировать Затем ссылка «Создать новую» будет скрыто, и мы будем отображать форму, чтобы получить пользовательский ввод. Внутри формы мы также определили две кнопки «Сохранить» и «Отмена». Нажав на «Сохранить», вызовут CreateMollyee Метод, в то время как щелкнув на «Отмена», вызывает Отмена метод.
Если действие является Удалить Затем таблица будет отображаться с данными сотрудника, на которой Удалить действие вызывается. Мы также отображаем две кнопки – «Удалить» и «Отмена». Нажатие на кнопку «Удалить» призвать Deleteemployeree Метод, и нажав на «Отмена», вызывает Отмена метод.
В конце у нас есть таблица для отображения всех данных сотрудников из базы данных. Каждая запись сотрудника также будет иметь два ссылки на действия: «Редактировать» для редактирования записи работника и «Удалить», чтобы удалить запись сотрудника. Эта таблица всегда отображается на странице, и мы обновим ее после выполнения каждого действия.
Добавление ссылки на меню навигации
Последний шаг – добавить ссылку на страницу «Сотрудник данных» в меню навигации. Откройте страницу «Blazorspa.client/Shared/Navmenu.cshtml» и поместите в него следующий код:
@functions { bool collapseNavMenu = true; void ToggleNavMenu() { collapseNavMenu = !collapseNavMenu; }}
Следовательно, мы успешно создали SPA с помощью Blazor, с помощью основной базы данных основной базы данных объекта Framework.
Демонстрация демонстрация
Запустите приложение.
Веб-страница откроется, как показано на рисунке ниже. Меню навигации слева показывает навигационную ссылку для страницы данных сотрудников.
Нажатие на ссылку «Данные сотрудника» перенаправляются на представление «Данные сотрудника». Здесь вы можете увидеть все данные сотрудников на странице. Обратите внимание, что URL имеет «сотрудник/FETCH», прилагаемый к нему.
Мы не добавили никаких данных, следовательно, это пусто. Нажмите на «CreateNew», чтобы открыть форму «Add Otheree», чтобы добавить новые данные сотрудников. Обратите внимание, что URL имеет «сотрудника/создание», добавленным к нему:
После вставки данных во всех полях нажмите кнопку «Сохранить». Будет создана новая запись сотрудника, и таблица данных сотрудников будет обновляться.
Если мы хотим редактировать существующую запись сотрудника, затем нажмите на ссылку действия «Изменить». Он откроется редактирование представления, как показано ниже. Здесь мы можем изменить данные сотрудников. Обратите внимание, что мы пропустили идентификатор сотрудника в параметре URL.
Здесь мы изменили город Сотрудник Свати из Мумбаи в Колката. Нажмите «Сохранить», чтобы обновить таблицу данных сотрудников, чтобы просмотреть обновленные изменения, как выделено на изображении ниже:
Теперь мы будем выполнять операцию удаления на сотруднике по имени Dhiraj. Нажмите на ссылку «Удалить», которая откроет представление удаления, задающее подтверждение для удаления. Обратите внимание, что мы пропустили идентификатор сотрудника в параметре URL.
Как только мы нажимаем на кнопку «Удалить», она будет удалять запись сотрудника и таблицу данных сотрудников будет обновлена. Здесь мы видим, что сотрудник с именем Dhiraj был удален из нашей записи.
Развертывание приложения
Чтобы узнать, как развернуть приложение Blazor, используя IIS, обратитесь к Развертывание приложения Blazor на IIS Отказ
Заключение
Мы создали приложение одной страницы с помощью страниц бритвы в Blazor, используя основной доступ к базе данных Framework Entity Framework с помощью Visual Studio 2017 и SQL Server 2014. Мы также выполнили операции CRUD в нашем приложении.
Пожалуйста, получите исходный код от Github и играть вокруг, чтобы получить лучшее понимание.
Получить мою книгу Blazor Quick Start Guide Чтобы узнать больше о Blazor.
Вы также можете прочитать эту статью на C # угол
Вы можете проверить мои другие статьи на Blazor здесь Отказ
Смотрите также
- CORE ASP.NET – Начало работы с Blazor
- ASP.NET CORE – CRUD Использование Blazor и Antity Framework Core
- Каскадный выпадающий список в Blazor с использованием EF Core
- Bazor Page Веб-приложение с ядром ASP.NET с использованием ADO.NET
- ASP.NET CORE – CRUD с использованием угловой 5 и основной ядра объекта
- ASP.NET CORE – CRUD с React.js и основной структурой сущности
Первоначально опубликовано в https://ankitsharmablogs.com/
Оригинал: “https://www.freecodecamp.org/news/how-to-create-a-single-page-application-using-razor-pages-with-blazor-9d010fd6be45/”