Как создать приложение с помощью Blazor и Entity Framework Core

kak sozdat prilozhenie s pomoshhyu blazor i entity framework core

Microsoft недавно объявила о выпуске нового веб-фреймворка .NET под названием Blazor. В этой статье мы собираемся создать веб-приложение с помощью Blazor с помощью Entity Framework Core. Мы создадим образец управления записями сотрудников и выполним на ней операции CRUD.

Предпосылки

  • Установите пакет SDK .NET Core 2.1 Preview 2 здесь
  • Установите предварительный просмотр Visual Studio 2017 v15.7
  • Установите расширение ASP.NET Core Blazor Language Services отсюда
  • SQL Server 2012 или более поздней версии

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

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

Исходный код

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

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

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

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

Create table tblEmployee(            EmployeeId int IDENTITY(1,1) NOT NULL,            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 из доступных типов проектов. Введите название проекта как BlazorCrud и нажмите OK.

zGPbNji-3eCLIIOUvtSMtoRsF5zr0zUoajr0

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

YfbWL3ZmlR36U-JVcwWOJuFkW89Lw7Fy09W0

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

vUXe0DvTLL5sdKJTteAZqSWCKnXE67Kp3-q7

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

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

Выполнить приложение. Он откроет браузер, и вы увидите страницу, подобную показанной ниже.

3TiqY1os8SRNJEzJGkejhKBKVYjDDuN2GIzb

Здесь вы можете увидеть навигационное меню с левой стороны, содержащее навигацию к страницам нашей программы. По умолчанию в нашем приложении есть страницы «Счетчик» и «Получить данные». Эти страницы по умолчанию не будут влиять на нашу программу, но ради этого учебника мы удалим файл fetchdata и счетчик страницы с BlazorCrud.Client/Страницы папку.

Добавление модели в программу

Щелкните правой кнопкой мыши на проекте BlazorCrud.Shared, а затем выберите Add >> New Folder и назовите fстарший Модели. Мы добавим наш класс модели только в эту папку.

Щелкните правой кнопкой мыши на папке Models и выберите Add >> Class. Назовите свое класс Emploвыe.cs Этот класс содержит свойства модели Employee. Нетс нашим BlazorCrud.Совместный проект имеет следующую структуру:

82zqiyP54mNDcU7wAnUoodOR35OfmJvdoJGx

ОТКРЫТО Employee.cs и вставьте в него следующий код:

using System;  using System.Collections.Generic;  using System.ComponentModel.DataAnnotations;  using System.Text;    namespace BlazorCrud.Shared.Models  {      public class Employee      {          public int EmployeeId { get; set; }          [Required]          public string Name { get; set; }          [Required]          public string Gender { get; set; }          [Required]          public string Department { get; set; }          [Required]          public string City { get; set; }      }  }

И вот наша модель была сотворена. Теперь мы создадим уровень доступа к данным.

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

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

Щелкните правой кнопкой мыши на Доступ к данным папку и выберите Добавить >> Класс. Назовите свое класс EmployeeContвпрt.cs Это наш контекстный класс Entity Framework DB, позволяющий нам взаимодействовать с базой данных. Откройте EmployeeContext.cs и вставьте в него следующий код:

using BlazorCrud.Shared.Models;  using Microsoft.EntityFrameworkCore;  using System;  using System.Collections.Generic;  using System.Linq;  using System.Threading.Tasks;    namespace BlazorCrud.Server.DataAccess  {      public class EmployeeContext : DbContext      {          public virtual DbSet<Employee> tblEmployee { get; set; }            protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)          {              if (!optionsBuilder.IsConfigured)              {                  optionsBuilder.UseSqlServer(@"Put Your Connection string here");              }          }      }  }

Не забудьте ввести собственную строку подключения.

Добавьте еще один класс к Доступ к данным папку и назовите ее EmployeeDataAccessLayer.cs. Этот класс будет обрабатывать наши операции по БД, связанные с CRUD. ОТКРЫТО EmployeeDataAccessLayer.cs и вставьте в него следующий код:

using BlazorCrud.Shared.Models;  using Microsoft.EntityFrameworkCore;  using System;  using System.Collections.Generic;  using System.Linq;  using System.Threading.Tasks;    namespace BlazorCrud.Server.DataAccess  {      public class EmployeeDataAccessLayer      {          EmployeeContext db = new EmployeeContext();            //To Get all employees details           public IEnumerable<Employee> GetAllEmployees()          {              try              {                  return db.tblEmployee.ToList();              }              catch              {                  throw;              }          }            //To Add new employee record             public void AddEmployee(Employee employee)          {              try              {                  db.tblEmployee.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.tblEmployee.Find(id);                  return employee;              }              catch              {                  throw;              }          }            //To Delete the record of a particular employee            public void DeleteEmployee(int id)          {              try              {                  Employee emp = db.tblEmployee.Find(id);                  db.tblEmployee.Remove(emp);                  db.SaveChanges();              }              catch              {                  throw;              }          }      }  }

Теперь наш уровень доступа к данным завершен. Далее мы перейдем к созданию нашего веб-контроллера API.

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

Щелкните правой кнопкой мыши BlazorCrud.Сервер/контроллеры папку и выберите Добавить >> Новый элемент. Откроется диалоговое окно «Добавить новый элемент». Свыбрать АSP.NET на панели слева, затем выберите «Класс контроллера API» на панели шаблонов и намне это EmployeeController.cs Нажмите OK.

RKROzzhcRCSFVHrkYQcltQmFt7xPha6jCZPM

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

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

Откройте EmployeeController.cs файл и вставьте в него следующий код:

using System;  using System.Collections.Generic;  using System.Linq;  using System.Threading.Tasks;  using BlazorCrud.Server.DataAccess;  using BlazorCrud.Shared.Models;  using Microsoft.AspNetCore.Mvc;    namespace BlazorCrud.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);          }      }  }

На данный момент наша BlazorCrud.Сервер проект имеет следующую структуру:

JtmrDM7QtuDas0bq-OqihzMpn2T0PaakQjLg

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

Добавление Razor View в программу

Щелкните правой кнопкой мыши на BlazorCrud.Client/Страницы папку и выберите Добавить >> Новый элемент. Откроется диалоговое окно «Добавить новый элемент», выберите «Веб» на панели слева, затем выберите «Просмотр бритвы» на панели шаблонов и намне это FetchEmployee.cshtml.

HqQn5jyacZB00aY6c9-e-GK7V7GZpqn77KUg

Это добавит a FetchEmployee.cshtml страницу к нашей BlazorCrud.Client/Страницы папку. Аналогично добавьте еще 3 страницы: AddEmployee.cshtml, EditEmployee.cshtml, и DeleteEmployee.cshtml.

Теперь наши BlazorCrud.Client проект имеет следующую структуру:

DlAVomYnrhDMD1JCP8qExF5wGNTTOUMDlr9z

Давайте добавим код на эти странички.

FetchEmployee.cshtml

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

ОТКРЫТО FetchEmployee.cshtml и вставьте в него следующий код:

@using BlazorCrud.Shared.Models@page "/fetchemployee"@inject HttpClient Http<h1>Employee Data</h1><p>This component demonstrates fetching Employee data from the server.</p><p>    <a href=" New</a></p>@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>}@functions {Employee[] empList;protected override async Task OnInitAsync(){    empList = await Http.GetJsonAsync<Employee[]>    ("/api/Employee/Index");}}

Давайте разберемся в этом коде. В верхней части мы включили BlazorEFApp.Shared.Models пространство имен, чтобы мы могли использовать наш класс модели Employee на этой странице.

Мы определяем маршрут этой страницы с помощью директивы @page. Итак, в этой программе, если мы добавим «/fetchemployee» к базовому URL, мы будем перенаправлены на эту страницу. Мы также вводим службу HttpClient, чтобы включить вызов веб-API.

Затем мы определили часть HTML для отображения всех записей сотрудников в виде таблицы. Мы также добавили две ссылки на действия для Редактировать и Удалить который перейдет к EditEmployee.cshtml и DeleteEmployee.cshtml страниц, соответственно.

Внизу страницы у нас есть раздел @functions, содержащий нашу бизнес-логику. Мы создали переменную массиву empList типа Employee, а мы и заполняем его внутри OnInitAsync метод, вызвав наш веб-API. Это будет связано с нашей таблицей HTML во время загрузки страницы.

AddEmployee.cshtml

Эта страница используется для создания новой записи сотрудника.

ОТКРЫТО AddEmployee.cshtml и вставьте в него следующий код:

@using BlazorCrud.Shared.Models@page " HttpClient Http@inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper<h1>Create</h1><h3>Employee</h3><hr /><div class="row">    <div class="col-md-4">        <form>            <div class="form-group">                <label for="Name" class="control-label">Name</label>                <input for="Name" class="form-control" bind="@emp.Name" />            </div>            <div class="form-group">                <label asp-for="Gender" class="control-label">Gender</label>                <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>            </div>            <div class="form-group">                <label asp-for="Department" class="control-label">Department</label>                <input asp-for="Department" class="form-control" bind="@emp.Department" />            </div>            <div class="form-group">                <label asp-for="City" class="control-label">City</label>                <input asp-for="City" class="form-control" bind="@emp.City" />            </div>            <div class="form-group">                <button type="submit" class="btn btn-default" onclick="@(async () => await CreateEmployee())">Save</button>                <button class="btn" onclick="@cancel">Cancel</button>            </div>        </form>    </div></div>@functions {Employee emp = new Employee();protected async Task CreateEmployee(){    await Http.SendJsonAsync(HttpMethod.Post, "/api/Employee/Create", emp);    UriHelper.NavigateTo("/fetchemployee");}void cancel(){    UriHelper.NavigateTo("/fetchemployee");}}

На этой странице маршрут «/addemployee».

Мы также вводим службу Microsoft.AspNetCore.Blazor.Services.IUriHelper, чтобы включить перенаправление URL. Часть HTML создаст форму для получения вводимых данных от пользователя. Атрибут «bind» используется для привязки значения, введенного в текстовое поле, к свойствам объекта Employee.

В разделе @functions мы определили два способа. Метод CreateEmployee будет вызван после нажатия кнопки «Отправить» и отправит запрос POST к нашему API вместе с объектом Employee emp.

The Отменить метод будет вызван после нажатия кнопки отмены и перенаправит пользователя обратно в FetchEmployee страница.

EditEmployee.cshtml

Эта страница используется для редактирования данных сотрудника.

ОТКРЫТО EditEmployee.cshtml и вставьте в него следующий код:

@using BlazorCrud.Shared.Models@page "/editemployee/{empID}"@inject HttpClient Http@inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper<h2>Edit</h2><h4>Employees</h4><hr /><div class="row">    <div class="col-md-4">        <form>            <div class="form-group">                <label for="Name" class="control-label">Name</label>                <input for="Name" class="form-control" bind="@emp.Name" />            </div>            <div class="form-group">                <label asp-for="Gender" class="control-label">Gender</label>                <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>            </div>            <div class="form-group">                <label asp-for="Department" class="control-label">Department</label>                <input asp-for="Department" class="form-control" bind="@emp.Department" />            </div>            <div class=" form-group">                <label asp-for="City" class="control-label">City</label>                <input asp-for="City" class="form-control" bind="@emp.City" />            </div>            <div class="form-group">                <input type="submit" value="Save" onclick="@(async () => await UpdateEmployee())" class="btn btn-default" />                <input type="submit" value="Cancel" onclick="@cancel" class="btn" />            </div>        </form>    </div></div>@functions {[Parameter]string empID { get; set; }Employee emp = new Employee();protected override async Task OnInitAsync(){    emp = await Http.GetJsonAsync<Employee>("/api/Employee/Details/" + Convert.ToInt32(empID));}protected async Task UpdateEmployee(){    await Http.SendJsonAsync(HttpMethod.Put, "api/Employee/Edit", emp);    UriHelper.NavigateTo("/fetchemployee");}void cancel(){    UriHelper.NavigateTo("/fetchemployee");}}

На этой странице мы определили маршрут как «/editemployee/{empID}». empID – это параметр URL типа string, объявленный в разделе @functions. Мы будем использовать [Parameter] атрибут для обозначения переменной в качестве параметра. Чтобы перейти на эту страницу, нам нужно передать идентификатор сотрудника в URL, который будет записан в empID переменный.

Если мы не обозначим переменную символом [Parameter] атрибута мы получим следующую ошибку: «Объект типа ‘BlazorCrud.Client.Pages.EditEmployee’ имеет свойство, соответствующее имени ’empID’, но он не имеет [ParameterAttribute] применено». Это не позволит empID для привязки к значению идентификатора сотрудника, переданного в параметре.

Часть HTML подобна части AddEmployee.cshtml страница. Атрибут «bind» используется для двустороннего связывания, то есть привязывания значений текстового поля к свойствам объекта сотрудника и наоборот.

Внутри раздела @functions мы получаем записи о сотрудниках в файле OnInitAsync метод на основе EmployeeID, передаваемого в параметре. Это будет привязано к полям в форме при загрузке страницы.

The UpdateEmployee Отправит запрос PUT к нашему API вместе с объектом Employee emp. The Отменить метод будет вызван после нажатия кнопки отмены и перенаправит пользователя обратно в FetchEmployee страница.

DeleteEmployee.cshtml

Эта страница будет использоваться для удаления записи сотрудника.

ОТКРЫТО DeleteEmployee.cshtml и вставьте в него следующий код:

@using BlazorCrud.Shared.Models@page "/delete/{empID}"@inject HttpClient Http@inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper<h2>Delete</h2><h3>Are you sure you want to delete employee with id : @empID</h3><br /><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" value="Delete" onclick="@(async () => await Delete())" class="btn btn-default" />        <input type="submit" value="Cancel" onclick="@cancel" class="btn" />    </div></div>@functions {[Parameter]string empID { get; set; }Employee emp = new Employee();protected override async Task OnInitAsync(){    emp = await Http.GetJsonAsync<Employee>    ("/api/Employee/Details/" + Convert.ToInt32(empID));}protected async Task Delete(){    await Http.DeleteAsync("api/Employee/Delete/" + Convert.ToInt32(empID));    UriHelper.NavigateTo("/fetchemployee");}void cancel(){    UriHelper.NavigateTo("/fetchemployee");}}

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

В HTML-части будут отображаться данные сотрудника и запрашивается у пользователя подтверждение удаления записи о сотруднике.

Внутри раздела @functions мы получаем записи о сотрудниках OnInitAsync метод на основе EmployeeID, передаваемого в параметре. При загрузке страницы отображаются записи сотрудников.

The Удалить метод будет вызван по нажатию кнопки «Удалить», что пришлет запрос на удаление в наш API вместе с идентификатором сотрудника, которого нужно удалить. После успешного удаления пользователь вернется обратно в FetchEmployee страница.

Последним шагом является определение навигационного меню для нашей программы. Откройте BlazorCrud.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> Fetch employee            </NavLink>        </li>    </ul></div>@functions {bool collapseNavMenu = true;void ToggleNavMenu(){    collapseNavMenu = !collapseNavMenu;}}

И все это. Мы создали свой первый ASP.NET Основное приложение с использованием Blazor и Entity Framework Core.

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

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

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

cV9HHW5sPNGbrNhpjj2G44EmN1wM5yJl6hrd

Нажмите на Убрать сотрудника в меню навигации. Он перенаправит на FetchEmployee просматривать и отображать все данные о сотрудниках на странице. Обратите внимание, что в URL-адрес добавлен «/fetchemployee», поскольку мы определили его с помощью директивы @page.

CmRK4F3HHkoZ5sSc3Z24Ql6YqXiyUTAEyRFV

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

Нажмите на Создать новый чтобы перейти к AddEmployee просматривать. Обратите внимание, что к URL-адресу добавлен «/addemployee», поскольку мы определили его с помощью директивы @page. Добавьте новую запись сотрудника, как показано на рисунке ниже:

nuRceVySlBWelVt1sdrknlR219XBQFrEKkyR

После ввода данных во все поля нажмите кнопку «Сохранить». Будет создана новая запись сотрудника, и вы будете перенаправлены на страницу FetchEmployee просмотр, отображающий записи всех сотрудников. Здесь мы также можем увидеть методы действий Редактировать и Удалить соответствующий каждой записи.

GC6B6tuFby6eiofdFQjlNHxyjTeD48NvrDtq

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

RSC3aHrWDT7cg2WdlXpOT9Bh6s0YqbriinOL

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

5Q4wzYh7cML-EqFzrTcKOxQY24f5G73yfdhk

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

GKJoohKLsrb7CNgy6I2t-kDh7K6qnM3VMDfO

После того, как мы нажмем кнопку Удалить, запись о сотруднике будет удалена, и мы будем перенаправлены на FetchEmployee просматривать. Здесь мы видим, что сотрудник по имени Рахул изъят из нашего учета.

XLbblGjSRJsEqyUoo4-ZfFnAPIMhwNUQWHc1

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

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

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

Вывод

Мы создали ASP.NET Core с помощью нового веб-фреймворка Blazor и Entity Framework Core с помощью Visual Studio 2017 и SQL Server 2012. Мы также выполнили операции CRUD для нашей программы.

Вы также можете разделить это приложение на Github. Попробуйте новый фреймворк и дайте мне знать, что вы думаете о нем в разделе комментариев ниже.

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

Вы также можете найти статью на C# Corner.

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

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

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

Ваш адрес email не будет опубликован.