Как создать одностраничное приложение с помощью страниц Razor с помощью Blazor

kak sozdat odnostranichnoe prilozhenie s pomoshhyu stranicz razor s pomoshhyu

В этой статье мы собираемся создать одностраничное приложение (SPA) с помощью страниц Razor в Blazor с помощью первого подхода Entity Framework Core базы данных.

Введение

Одностраничные программы (SPA) — это веб-приложения, которые загружают одну страницу HTML и динамически обновляют эту страницу, когда пользователь взаимодействует с программой. Мы создадим образец управления записями сотрудников и выполним на ней операции CRUD.

Мы будем использовать Visual Studio 2017 и SQL Server 2014 года.

Посмотрите на окончательную заявку.

pA8DDQa-ek6BJEKFbMN8ukjS2nv8fFxMJ9In

Предпосылки

  • инсталлируйте .NET Core 2.1 Preview 2 SDK отсюда
  • установите Visual Studio 2017 версии 15.7 или более новой отсюда
  • инсталлируйте расширение ASP.NET Core Blazor Language Services отсюда
  • SQL Server 2008 или более поздней версии

Платформа Blazor не поддерживается версиями ниже Visual Studio 2017 v15.7.

Исходный код

Получите исходный код из GitHub.

Создание таблицы

Мы будем использовать таблицу БД для хранения всех записей сотрудников.

Откройте SQL Server и используйте следующий сценарий для создания файлаEmployee стол.

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 Core» в меню Visual C#. Затем выберите ASP.NET Core Web Application из доступных типов проектов. Назовите проект «BlazorSPA» и нажмите кнопку «ОК».

Mzs4TvnFTePBJQ5wDxkyXwI7VFBjDHUAVZ4e

После нажатия ОК откроется новое диалоговое окно с просьбой выбрать шаблон проекта. Вы можете увидеть два нижних меню в верхнем левом углу окна шаблона. Выберите «.NET Core» и «ASP.NET Core 2.0» в раскрывающемся меню. Затем выберите шаблон Blazor (ASP.NET Core) и нажмите ОК.

GyYuYmaGwKBRknv04cVsMhZzS65vVbH7qRm3

Теперь будет создано наше решение Blazor. Вы можете наблюдать структуру папок в Solution Explorer, как показано на рисунке ниже.

n69NyMxPfNGl7qLqWWrx8YmQOiQeXJy6qUyN

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

  1. BlazorSPA.Client – ​​имеет код на стороне клиента и содержит страницы, которые будут воспроизводиться в браузере.
  2. BlazorSPA.Server – имеет коды на стороне сервера, такие как операции, связанные с БД, и веб-API.
  3. BlazorSPA.Shared – содержит общий код, к которому могут получить доступ как клиент, так и сервер. Она содержит наши классы моделей.

Составление модели в программу

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

Выделите «Инструменты» > «Диспетчер пакетов NuGet» > «Консоль диспетчера пакетов». Выберите «BlazorSPA.Shared» из раскрывающегося меню «Проект по умолчанию». Обратитесь к картинке ниже:

SjjP3ntvRWEycZ-3dX20CSBzezpMxs645EGF

Сначала мы установим пакет для поставщика базы данных, на который мы ориентируемся, а это SQL Server в данном случае. Выполните следующую команду:

Install-Package Microsoft.EntityFrameworkCore.SqlServer

Поскольку мы используем Entity Framework Tools для создания модели из существующей базы данных, мы также установим пакет инструментов. Выполните следующую команду:

Install-Package Microsoft.EntityFrameworkCore.Tools

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

Scaffold-DbContext "Your connection string here" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models -Tables Employee

Не забудь чтобы поместить собственную строку подключения (внутри “”). После успешного выполнения этой команды можно заметить, что папка «Models» создана. Он содержит два файла классов, myTestDBContext.cs и «Employee.cs». Таким образом мы успешно создали наши модели, используя первый подход базовой базы данных Entity Framework.

На данный момент папка Models будет иметь следующую структуру:

gY0lV5KolvXUTFdFkN-gnXvzb0aObcOmAXZz

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

Щелкните правой кнопкой мыши проект «BlazorSPA.Server», затем выберите «Добавить» > «Новая папка» и назовите папку «DataAccess». Мы добавим наш класс для обработки операций, связанных с базой данных только в этой папке.

Щелкните правой кнопкой мыши папку «DataAccess» и выберите «Добавить» > «Класс». Назовите свой класс EmployeeDataAccessLayer.cs.

Откройте «EmployeeDataAccessLayer.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<Employee> 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;            }        }    }}

Здесь мы определили методы обработки операций с базой данных. GetAllEmployees получит все данные о сотрудниках из таблицы Employee Table. так же, AddEmployee создаст новую запись сотрудника, и UpdateEmployee обновит учет имеющегося работника. GetEmployeeData получит запись работника, соответствующую переданному ему идентификатору работника, и DeleteEmployee удалит запись сотрудника, соответствующую переданному ему идентификатору сотрудника.

Добавление контроллера веб-API в программу

Щелкните правой кнопкой мыши на папке «BlazorSPA.Server/Controllers» и выберите «Добавить» > «Новый элемент». Откроется диалоговое окно «Добавить новый элемент». Выберите «ASP.NET» на панели слева, затем выберите «Класс контроллера API» на панели шаблонов и введите название «EmployeeController.cs». Щелкните «Добавить».

OZjyShEwULZNifr-ZNzRWY0bjYkAaQKHMNeI

Это создаст наш API EmployeeController класс.

Мы назовем методыEmployeeDataAccessLayer класса для получения данных и передачи данных клиенту

Откройте «EmployeeController.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<Employee> 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 имеет такую ​​структуру.

DnpONEsQobR0N3YDjCyWRteruR0P-8CvxFug

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

Добавление страницы Razor в программу

Мы добавим страницу Razor в папку «BlazorSPA.Client/Pages». По умолчанию в нашем приложении есть страницы «Счетчик» и «Получить данные». Эти страницы по умолчанию не повлияют на нашу программу, но ради этого учебника мы удалим «fetchdata» и страницы «счетчик» из папки «BlazorSPA.Client/Pages».

Щелкните правой кнопкой мыши папку «BlazorSPA.Client/Pages» и выберите «Добавить» > «Новый элемент». Откроется диалоговое окно «Добавить новый элемент». Выберите «ASP.NET Core» на левой панели, затем выберите «Razor Page» на панели шаблонов и назовите ее «EmployeeData.cshtml». Щелкните «Добавить».

tR2ue0vJJqAb0HROVGJxob8ZJy13WgbFUav7

Это добавит страницу «EmployeeData.cshtml» в нашу папку «BlazorSPA.Client/Pages». Эта страница Razor будет иметь два файла «EmployeeData.cshtml» иEmployeeData.cshtml.cs”.

Теперь мы добавим код на эти страницы.

EmployeeData.cshtml.cs

Откройте «EmployeeData.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<Employee> empList = new List<Employee>();        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<Employee>("/api/Employee/Details/" + Convert.ToInt32(paramEmpID));            }        }        protected async Task FetchEmployee()        {            title = "Employee Data";            empList = await Http.GetJsonAsync<List<Employee>>("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");        }    }}

Давайте разберемся в этом коде. Мы определили класс EmployeeDataModel содержащий все наши методы, которые мы будем использовать в «EmployeeData.cshtml» страница.

Мы вводим инъекции HttpClient службы, чтобы включить вызов веб-API и IUriHelper сервис, чтобы включить перенаправление URL-адресов. После этого мы определили атрибуты наших параметров. paramEmpID и action. Эти параметры используются в “EmployeeData.cshtml” для определения маршрутов для нашей страницы. Мы также задекларировали имущество title чтобы отобразить заголовок, чтобы указать текущее действие на странице.

The OnParametersSetAsync метод вызывается всякий раз, когда параметры URL-адреса устанавливаются для страницы. Мы проверим значение параметра action для определения текущей операции на странице.

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

Мы проверим, установлен ли атрибут действия параметра createтогда мы установим заголовок страницы на «Добавить сотрудника» и создадим новый объект типа Employee. Если paramEmpID не есть «0», то это или an edit действие или а delete действия. Мы установим соответствующим образом свойство title, а затем вызовем наш метод веб-API, чтобы получить данные для идентификатора сотрудника, установленного в paramEmpID собственность.

Метод FetchEmployee установит в заголовке Данные сотрудников и получит все данные о сотрудниках, воспользовавшись методом веб-API.

The CreateEmployee метод проверит, вызывают ли его для добавления новой записи о сотруднике или для редактирования существующей записи о сотруднике. Если EmployeeId свойство установлено, то это an edit запроса, и мы отправим запрос PUT к веб-API. Если EmployeeId не установлено, то это a create запроса, и мы отправим запрос POST к веб-API. Мы установим title свойство в соответствии с соответствующим значением действия, а затем вызовите наш метод веб-API, чтобы получить данные для идентификатора сотрудника, установленного в paramEmpID собственность.

The DeleteEmployee метод удалит запись сотрудника для идентификатора сотрудника, как установлено в paramEmpID собственность. После удаления пользователь перенаправляется на страницу /employee/fetch.

В Cancel метод, мы установим для свойства title значение «Employee Data» и перенаправим пользователя на страницу «/employee/fetch».

EmployeeData.cshtml

Откройте страницу «EmployeeData.cshtml» и вставьте на нее следующий код:

@page "/employee/{action}/{paramEmpID}"@page "/employee/{action}"@inherits EmployeeDataModel<h1>@title</h1>@if (action == "fetch"){    <p>        <a href=" New</a>    </p>}@if (action == "create" || action == "edit"){    <form>        <table class="form-group">            <tr>                <td>                    <label for="Name" class="control-label">Name</label>                </td>                <td>                    <input type="text" class="form-control" bind="@emp.Name" />                </td>                <td width="20"> </td>                <td>                    <label for="Department" class="control-label">Department</label>                </td>                <td>                    <input type="text" class="form-control" bind="@emp.Department" />                </td>            </tr>            <tr>                <td>                    <label for="Gender" class="control-label">Gender</label>                </td>                <td>                    <select asp-for="Gender" class="form-control" bind="@emp.Gender">                        <option value="">-- Select Gender --</option>                        <option value="Male">Male</option>                        <option value="Female">Female</option>                    </select>                </td>                <td width="20"> </td>                <td>                    <label for="City" class="control-label">City</label>                </td>                <td>                    <input type="text" class="form-control" bind="@emp.City" />                </td>            </tr>            <tr>                <td></td>                <td>                    <input type="submit" class="btn btn-success" onclick="@(async () => await CreateEmployee())" style="width:220px;" value="Save" />                </td>                <td></td>                <td width="20"> </td>                <td>                    <input type="submit" class="btn btn-danger" onclick="@Cancel" style="width:220px;" value="Cancel" />                </td>            </tr>        </table>    </form>}else if (action == "delete"){    <div class="col-md-4">        <table class="table">            <tr>                <td>Name</td>                <td>@emp.Name</td>            </tr>            <tr>                <td>Gender</td>                <td>@emp.Gender</td>            </tr>            <tr>                <td>Department</td>                <td>@emp.Department</td>            </tr>            <tr>                <td>City</td>                <td>@emp.City</td>            </tr>        </table>        <div class="form-group">            <input type="submit" class="btn btn-danger" onclick="@(async () => await DeleteEmployee())" value="Delete" />            <input type="submit" value="Cancel" onclick="@Cancel" class="btn" />        </div>    </div>}@if (empList == null){    <p><em>Loading...</em></p>}else{    <table class="table">        <thead>            <tr>                <th>ID</th>                <th>Name</th>                <th>Gender</th>                <th>Department</th>                <th>City</th>            </tr>        </thead>        <tbody>            @foreach (var emp in empList)            {                <tr>                    <td>@emp.EmployeeId</td>                    <td>@emp.Name</td>                    <td>@emp.Gender</td>                    <td>@emp.Department</td>                    <td>@emp.City</td>                    <td>                        <a href="  |                        <a href="                    </td>                </tr>            }        </tbody>    </table>}

Вверху мы определили маршруты для нашей страницы. Определены два маршрута:

  1. /employee/{action}/{paramEmpID} : это позволит принять название действия вместе с идентификатором сотрудника. Этот маршрут вызывается, когда мы выполняем редактирование или удаление операция. Когда мы называем an edit или delete действия с данными конкретного сотрудника, идентификатор сотрудника также передается в качестве параметра URL.
  2. /employee/{action} : это позволит принять только название действия. Этот маршрут вызывается когда мы создаем данные нового сотрудника или получаем записи всех сотрудников.

Мы также наследуемEmployeeDataModel класс, указанный в файле «EmployeeData.cshtml.cs». Это позволит нам использовать методы, определенные в EmployeeDataModel класс.

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

Ссылка «Создать новое» будет показана, только если это действие есть fetch. Если действие есть create или edit тогда ссылка «Создать новое» будет скрыта, и мы отразим форму, чтобы получить ввод пользователя. Внутри формы мы также определили две кнопки Сохранить и Отменить. Нажатие кнопки «Сохранить» приведет к вызову CreateEmployee метод, тогда как нажатие «Отменить» вызовет метод Cancel метод.

Если действие есть delete затем отобразится таблица с данными работника, на котором delete вызывается действие. Мы также отображаем две кнопки – «Удалить» и «Отменить». Нажатие кнопки «Удалить» приведет к вызову DeleteEmployee метод, а нажатие кнопки «Отменить» вызовет Cancel метод.

Напоследок у нас есть таблица для отображения всех данных о сотрудниках из базы данных. Каждая запись сотрудника также будет иметь две ссылки на действия: «Редактировать», чтобы редактировать запись о сотруднике, и «Удалить», чтобы удалить запись сотрудника. Эта таблица всегда отображается на странице, и мы будем обновлять ее после выполнения каждого действия.

Последним шагом является добавление ссылки на нашу страницу «EmployeeData» в меню навигации. Откройте страницу «BlazorSPA.Client/Shared/NavMenu.cshtml» и вставьте на нее следующий код:

<div class="top-row pl-4 navbar navbar-dark">    <a class="navbar-brand" href="    <button class="navbar-toggler" onclick=@ToggleNavMenu>        <span class="navbar-toggler-icon"></span>    </button></div><div class=@(collapseNavMenu ? "collapse" : null) onclick=@ToggleNavMenu>    <ul class="nav flex-column">        <li class="nav-item px-3">            <NavLink class="nav-link" href=" Match=NavLinkMatch.All>                <span class="oi oi-home" aria-hidden="true"></span> Home            </NavLink>        </li>        <li class="nav-item px-3">            <NavLink class="nav-link" href="                <span class="oi oi-list-rich" aria-hidden="true"></span> Employee data            </NavLink>        </li>    </ul></div>@functions {    bool collapseNavMenu = true;    void ToggleNavMenu()    {        collapseNavMenu = !collapseNavMenu;    }}

Таким образом мы успешно создали SPA с помощью Blazor, с помощью первого подхода Entity Framework Core базы данных.

Демо исполнение

Запустите приложение.

Откроется веб-страница, как показано ниже. В навигационном меню слева отображается навигационная ссылка для страницы данных о сотрудниках.

5aytCUZiGENxmbG8UmH3Kkn93L6QlmU3o90I

При нажатии на ссылку «Данные работника» будет перенаправлено к пересмотру «Данные работника». Здесь вы можете увидеть все сведения о сотрудниках на странице. Обратите внимание, что URL-адрес добавлен «employee/fetch».

e1LB246vIs1UwwYqU4hb7kgEqktwtXg6QxIW

Мы не добавили никаких данных, потому они пусты. Нажмите кнопку «Создать новый», чтобы открыть форму «Добавить сотрудника», чтобы добавить новые данные сотрудника. Обратите внимание, что к URL-адресу добавлен «сотрудник/создать»:

GhLUT-gjoQoOLHv8ldQElEqINjpFE-YoCyd4

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

VkPKhxGiT5Pg9aEjgZtsSiSqFdaT3fUnosFe

Если мы хотим отредактировать существующую запись сотрудника, нажмите на ссылку «Редактировать». Откроется режим редактирования, как показано ниже. Здесь мы можем изменить данные сотрудника. Обратите внимание на то, что мы передали идентификатор сотрудника в параметре URL.

a83joAzqvLOvLkrBphgo1X1iNMCJZX4h3hW1

Здесь мы сменили город сотрудника Свати из Мумбаи на Колкатту. Нажмите «Сохранить», чтобы обновить таблицу данных сотрудников, чтобы просмотреть обновленные изменения, как показано на рисунке ниже:

YTVLVrodvmccRgROnCHeUoYjJDc4gCYo9ma0

Теперь мы выполним операцию удаления для сотрудника по имени Dhiraj. Нажмите на ссылку «Удалить», которая откроет окно удаления с запросом на подтверждение удаления. Обратите внимание на то, что мы передали идентификатор сотрудника в параметре URL.

vh9OcLX0TZBjpK4FZZRgNdULvxM45sPSZfBq

После нажатия кнопки «Удалить» запись о сотруднике будет удалена, а таблица данных о сотруднике будет обновлена. Здесь мы видим, что сотрудник по имени Dhiraj был изъят из нашей записи.

6GYVO2fxT7YUq9pkt5taPVC9dCtTQOlnPnMj

Развертывание программы

Информацию о том, как развернуть программу Blazor с помощью IIS, обратитесь к Развертыванию программы Blazor на IIS.

Вывод

Мы создали одностраничное приложение со страницами Razor в Blazor, используя первый подход к базе данных Entity Framework Core с помощью Visual Studio 2017 и SQL Server 2014. Мы также выполнили операции CRUD для нашего приложения.

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

Получите мою книгу Blazor Quick Start Guide, чтобы узнать больше о Blazor.

Вы также можете прочитать эту статью на C# Corner

Вы можете просмотреть мои другие статьи о Blazor здесь.

Смотрите также

Первоначально опубликовано на

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *