Вступление

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

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

Мы будем использовать Visual Studio 2017 и SQL Server 2017 для нашей демонстрации.

Давайте посмотрим на окончательное приложение:

Что такое Blazor Side Side?

Выпуск 0.5.0 Blazor позволяет использовать приложения Blazor на сервере. Это означает, что мы можем запустить собоку серверов Blazor Component на Core .Net. Сигнал соединения по сети будет обрабатывать другие функции, такие как обновления пользовательского интерфейса, обработка событий и звонки в JavaScript.

Для получения дополнительной информации обратитесь к моей предыдущей статье на Понимание Blazor Server Blazor Отказ

Предпосылки

Установите .NET CORE 2.1 или выше SDK из здесь
Установите Visual Studio 2017 V15.7 или выше от здесь
Установите расширение языковых услуг Asp.net Core Blazor от здесь
SQL Server 2012 или выше.

Версии Visual Studio 2017 ниже V15.7 Не поддерживают платформу Blazor.

Исходный код

Получите исходный код для этого приложения из Github Отказ

Важная заметка:

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

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

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

Сотрудник: используется для хранения деталей сотрудников. Он содержит такие поля, как сотрудничество, имя, город, отдел и пол.
Города: это содержит список городов. Используется для заполнения Город поле таблицы работника. Содержит два поля, Cityid и CityName

Выполните следующие команды для создания обеих таблиц:

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  
)    
GO      
      
CREATE TABLE Cities (      
CityID int IDENTITY(1,1) NOT NULL PRIMARY KEY,      
CityName varchar(20) NOT NULL       
)      
GO

Теперь мы поставим некоторые данные в таблицу городов. Мы будем использовать эту таблицу, чтобы связать раскрывающийся список в нашем веб-приложении. Пользователь выберет нужный город из этого выпадающего. Используйте следующие утверждения вставки:

INSERT INTO Cities VALUES('New Delhi');  
INSERT INTO Cities VALUES('Mumbai');  
INSERT INTO Cities VALUES('Hyderabad');  
INSERT INTO Cities VALUES('Chennai');  
INSERT INTO Cities VALUES('Bengaluru');

Теперь наша часть базы данных завершена. Таким образом, мы будем приступить к созданию приложения Server Side, используя Visual Studio 2017.

Создайте сервер бокового блазового приложения

Откройте Visual Studio и выберите Файл >> Новый >> проект.

После выбора проекта откроется диалог «новый проект». Выберите .NET CORE в меню Visual C # с левой панели. Затем выберите «ASP.NET Core Web Application» из доступных типов проектов. Для имени проекта, положить в Серверсидеспа и нажмите ОК.

После нажатия на OK новый диалог откроется просьбой выбрать шаблон проекта. Вы увидите два раскрывающихся меню в левом верхнем углу окна шаблона. Выберите «.NET CORE» и «ASP.NET CORE 2.1» от этих раскрывающихся. Затем выберите «Blazor (Server-Side в ASP.net Core)» и нажмите OK

Это создаст наше решение для Blazor Side Side. Вы можете соблюдать структуру папки в исследовательском исследовании, как показано на изображении ниже:

Раствор имеет два файла проекта:

Serversidespa.app: Это наше приложение для Blazor Side Side. Этот проект имеет все нашу логику компонентов и наши услуги. Мы также создадим наши модели и уровень доступа к данным в этом проекте.
SERVERSIDESPA.SERVER: Это приложение ASP.NET CORE. Вместо того, чтобы бегать на стороне клиента в браузере, приложение Blazor Side Side Blazor будет работать в приложении Core Core Host.

В будущих выпусках Blazor эти два проекта могут быть объединены в один. Но на данный момент разделение требуется из-за различий в модели компиляции Blazor.

Леса модель к приложению

Мы используем основной доступ к базе данных объекта Framework Core для создания наших моделей. Мы создадим наш класс модели в Serversidespa.app проект. Перейдите к инструментам >> Nuget Package Manager >> Manager Package Conso le. Выберите «S E Rve RSIDESPA.APP» из выпадания проекта по умолчанию. Обратитесь к изображению ниже:

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

Install-Package Microsoft.EntityFrameworkCore.SqlServer

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

Install-Package Microsoft.EntityFrameworkCore.Tools

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

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

Не забудьте поставить собственную строку подключения (внутри «»). После того, как эта команда успешно выполняется, она создает папку моделей внутри Serversidespa.app проект. Он содержит три классовых файлов: mytestdbcontext.cs, gize.cs и Сотрудник .cs Отказ Следовательно, мы успешно лежали наши модели с помощью основной базы данных EF Core.

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

Щелкните правой кнопкой мыши на проекте SERVERSIDESPA.APP и выберите Добавить >> Новую папку и назовите F Старые данные Доступ. Мы будем добавлять наш класс для обработки операций, связанных с базой данных в этой папке.

Щелкните правой кнопкой мыши на DataAccess Папка и выберите Добавить >> класс.

Назовите свой класс Someperyeedataaccesslayer.cs. Открыть Someporeeedataaccesslayer.cs и поместите следующий код в него:

using Microsoft.EntityFrameworkCore;
using ServerSideSPA.App.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace ServerSideSPA.App.DataAccess
{
    public class EmployeeDataAccessLayer
    {
        myTestDBContext db = new myTestDBContext();

        //To Get all employees details     
        public List GetAllEmployees()
        {
            try
            {
                return db.Employee.AsNoTracking().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
            {
                var employee = db.Employee.Find(id);
                db.Entry(employee).State = EntityState.Detached;
                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;
            }
        }

        // To get the list of Cities
        public List GetCityData()
        {
            try
            {
                return db.Cities.ToList();
            }
            catch
            {
                throw;
            }
        }
    }
}

Здесь мы определили методы обработки операций базы данных:

GetAlLemploys будет получать все данные сотрудников от таблицы работника.
Дополнение к сектору создаст новую запись сотрудника.
UpdateMployeree обновит запись существующего сотрудника.
Getemployedata будет получать запись работника, соответствующий ID сотрудника, переданному ему.
Deleteemployee Удалит запись сотрудника, соответствующий ID сотрудника, переданному ему.
Getcitydata приведет к списку всех городов из Города Таблица.

Создание класса обслуживания

Щелкните правой кнопкой мыши на Услуги Папка и выберите Добавить >> класс. Дайте ему имя «Shotoreervice.cs» и CLI CK Добавить. Это будет объявление D сотрудники Урок Envice к папке услуг.

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

using ServerSideSPA.App.DataAccess;
using ServerSideSPA.App.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace ServerSideSPA.App.Services
{
    public class EmployeeService
    {
        EmployeeDataAccessLayer objemployee = new EmployeeDataAccessLayer();

        public Task> GetEmployeeList()
        {
            return Task.FromResult(objemployee.GetAllEmployees());
        }

        public void Create(Employee employee)
        {
            objemployee.AddEmployee(employee);
        }
        
        public Task Details(int id)
        {
            return Task.FromResult(objemployee.GetEmployeeData(id));
        }
        
        public void Edit(Employee employee)
        {
            objemployee.UpdateEmployee(employee);
        }
        
        public void Delete(int id)
        {
            objemployee.DeleteEmployee(id);
        }
        
        public Task> GetCities()
        {
            return Task.FromResult(objemployee.GetCityData());
        }
    }
}

Мы вызовем методы СЕРВИСНОСТЬААКСCESSCESSLAYER класс от нашего сервиса. Служба будет введена в наши компоненты. Компоненты будут вызывать методы обслуживания для доступа к базе данных.

На данный момент проект ServerSidespa.app имеет следующую структуру:

Настройка сервиса

Чтобы сделать услугу доступной для компонентов, нам нужно настроить его в приложении Server-Side. Open ServerIdespa.app >> File Startup.cs. Добавьте следующую строку Insid E Конфигурировал Вицы метод стартапов класса.

services.AddSingleton();

Обратитесь к изображению ниже:

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

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

Мы добавим страницу бритвы в Serversidespa.app/страницы папка. По умолчанию у нас есть «Counter» и «Fetch Data», предоставляемые в нашем приложении. Эти страницы по умолчанию не повлияют на наше приложение. Ради этого учебника удалите оба из них из Serversidespa.app/страницы папка.

Щелкните правой кнопкой мыши на сервере SERRSIDESPA.APP /Страницы Папка, а затем выберите Добавить >> новый элемент. Откроется диалоговое окно «Добавить новый элемент». Выберите «ASP.NET CORE» с левой панели. Затем выберите «Razer Page» из панели шаблонов и Na Мне это сотрудничает. CSHTML. Нажмите Добавить.

Это добавит Searmeedata.cshtml Страница к Страницы папка. Эта бритвенная страница будет иметь два файла, Searmeedata.cshtml и SomerationeeTata.cshtml.cs. Теперь мы добавим код на эти страницы.

Searmentateata.cshtml.

Открыть Searmeedata.cshtml Страница и поставить следующий код в него:

@page "/fetchemployee" @inherits EmployeeDataModel

Employee Data

This component demonstrates CRUD operation on Employee data

@if (empList == null) {

Loading...

} else { @foreach (var emp in empList) { }

ID	Name	Gender	Department	City
@emp.EmployeeId	@emp.Name	@emp.Gender	@emp.Department	@emp.City

if (isAdd) { } if (isDelete) { } }

Позвольте мне объяснить этот код. Вверху мы определили маршрут для этой страницы как «/Fetchemployeree». Это означает, что если мы добавим «/fetchemployeree» к корневому URL-адресу приложения, мы будем перенаправлены на эту страницу.

Мы также наследуем СИРУМНИЙСЯМОДАМОДАМОДЕЛЬ Класс, который определяется в SomeperiveEdata.cshtml.cs файл. Это позволит нам использовать методы, определенные в классе сотрудничества.

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

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

Записи сотрудников, возвращенные из базы данных, хранятся в Emplist Переменная. Если переменная не нуль, то мы связываем значения к таблице, чтобы отобразить записи сотрудников в табличной моде. Каждая запись сотрудника также будет иметь два ссылки на действия – Редактировать редактировать запись сотрудника и Удалить удалить запись сотрудника.

Чтобы обрабатывать пользовательские входы, мы используем форму. Мы используем одну форму как для Add Wordere, так и для редактирования функциональности работника. Форма определяется в модальном всплывающем окне. Модальное всплывающее окно отображается на экране на основе значения логического свойства ISADD. Значение этого логического свойства установлено в коде (.CSHTML.cs).

Выпадающий список города внутри формы является обязательным для наших городов в базе данных с помощью CityList Переменная. Citi CityList будет заполнен как накладные нагрузки.

Форма будет иметь Сохранить Кнопка, которая вызовет метод экономии северолики. Этот метод определяется в коде за файлом, чтобы добавить или обновить запись сотрудника.

Похоже на Добавить Модальное всплывающее окно, у нас также есть Удалить Модальное всплывающее окно. Это будет только для чтения модал и попросить подтверждение удалить запись сотрудника. После нажатия «Да» это будет вызывает Deleteemployee Способ удалить запись сотрудника.

SomeperiveEdata.cshtml.cs.

Открыть SomeperiveEdata.cshtml.cs и поместите следующий код в него.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Blazor;
using Microsoft.AspNetCore.Blazor.Components;
using Microsoft.AspNetCore.Blazor.Services;
using ServerSideSPA.App.Models;
using ServerSideSPA.App.Services;

namespace ServerSideSPA.App.Pages
{
    public class EmployeeDataModel : BlazorComponent
    {
        [Inject]
        protected EmployeeService employeeService { get; set; }

        protected List empList;
        protected List cityList = new List();
        protected Employee emp = new Employee();
        protected string modalTitle { get; set; }
        protected Boolean isDelete = false;
        protected Boolean isAdd = false;

        protected string SearchString { get; set; }

        protected override async Task OnInitAsync()
        {
            await GetCities();
            await GetEmployee();
        }

        protected async Task GetCities()
        {
            cityList = await employeeService.GetCities();
        }

        protected async Task GetEmployee()
        {
            empList = await employeeService.GetEmployeeList();
        }

        protected async Task FilterEmp()
        {
            await GetEmployee();
            if (SearchString != "")
            {
                empList = empList.Where(x => x.Name.IndexOf(SearchString, StringComparison.OrdinalIgnoreCase) != -1).ToList();
            }
        }

        protected void AddEmp()
        {
            emp = new Employee();
            this.modalTitle = "Add Employee";
            this.isAdd = true;
        }

        protected async Task EditEmployee(int empID)
        {
            emp = await employeeService.Details(empID);
            this.modalTitle = "Edit Employee";
            this.isAdd = true;
        }

        protected async Task SaveEmployee()
        {
            if (emp.EmployeeId != 0)
            {
                await Task.Run(() =>
                {
                    employeeService.Edit(emp);
                });
            }
            else
            {
                await Task.Run(() =>
                {
                    employeeService.Create(emp);
                });
            }
            this.isAdd = false;
            await GetEmployee();
        }

        protected async Task DeleteConfirm(int empID)
        {
            emp = await employeeService.Details(empID);
            this.isDelete = true;
        }

        protected async Task DeleteEmployee(int empID)
        {
            await Task.Run(() =>
            {
                employeeService.Delete(empID);
            });
            this.isDelete = false;
            await GetEmployee();
        }
        protected void closeModal()
        {
            this.isAdd = false;
            this.isDelete = false;
        }
    }
}

Позвольте мне объяснить этот код. Мы определили класс Сотрудничаетамодель. Это проведет все методы, которые мы будем использовать в Searmeedata.cshtml страница.

Мы впрыскиваем наши Сотрудники к СИРУМНИЙСЯМОДАМОДАМОДЕЛЬ Класс, так что методы клиента могут вызывать наши услуги.

Переменные Emplist и CityList Держите данные от столов сотрудников и городов. Переменные наследуются внутри Oninitasync, чтобы убедиться, что данные доступны нам как нагрузки страницы.

Мы будем использовать Filteremp Метод для фильтрации данных сотрудников на основе свойства имени сотрудника. Это свойство будет игнорировать текстовый случай строки поиска. Он возвращает все записи, которые совпадают либо полностью, либо частично с строкой поиска.

Нажатие кнопки «Добавить работник» вызовет Addemp метод. Он будет инициализировать пустой экземпляр модели работника и установить значение Isadd Логический флаг для правды. Это откроет модальное всплывающее окно с формой, прося пользователя ввести новую запись сотрудника. Точно так же мы определили Editemployeree метод. Это выбирает запись сотрудника на основе идентификатора сотрудника, для которого он вызывается. Это также установит значение Isadd Чтобы верно открыть модальное всплывающее окно для редактирования записи работника.

Экономия заработок Метод проверит, будет ли он добавить новую запись сотрудника или редактировать существующую запись сотрудника. Если свойство SPARTEEEEID установлено, то это «редактирование» запроса, и мы вызовем метод редактирования нашего сервиса. Если WASTOREEID не установлен, то это запрос «Создание», и мы вызовем метод создания нашего сервиса. Затем мы получим обновленную запись сотрудников, позвонив Getemployeree метод и также будет установить значение Isadd к ложе, тем самым закрывая модальное всплывающее окно.

Deleteconfirm Метод вызывается, нажав кнопку Удалить, соответствующую записи сотрудника. Он установит значение isdelete boolean flag to true. Это отобразит модальное всплывающее окно подтверждения удаления. После нажатия да внутри этого всплывающего окна используется метод DELETEEMOLLEEMEEE. Это удалит запись сотрудника и установить isdelete Логический флаг для ложе, чтобы закрыть модальное всплывающее окно.

Добавление ссылки на меню навигации

Последний шаг – добавить ссылку на страницу «Сотрудник данных» в меню навигации. Открыть Serversidespa.app/shared/navmenu.cshtml Страница и поставить следующий код в него:


    ServerSideSPA
    



    
        
            
                 Home
            
        
        
            
                 Fetch employee
            
        
    


@functions {
bool collapseNavMenu = true;

void ToggleNavMenu()
{
    collapseNavMenu = !collapseNavMenu;
}
}

Это завершает нашу приложение для одной страницы с помощью Blazor Side Side.

Исполнение демонстрации

Нажмите F5, чтобы запустить приложение.

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

Нажатие на ссылку «Данные сотрудника» перенаправляются на вид на пользователя. Здесь вы можете увидеть все данные сотрудников на странице. Обратите внимание, что URL-адрес «/Fetchemployee» прилагается к нему.

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

Это создаст новую запись сотрудника и отображать данные в таблице просмотра. Добавьте еще несколько записей, и вид будет похож на тот, который показан ниже:

Нажатие на кнопку редактирования откроет модальное всплывающее окно для редактирования записи работника. Отредактируйте поля ввода и нажмите «Сохранить», чтобы обновить запись сотрудника.

Чтобы отказаться от записей работников, введите имя сотрудника в поле поиска и нажмите кнопку «Фильтр». Текст поиска является независимым в случае. Работа фильтра вернет все записи работников, соответствующие имени, введенному в поле поиска. Обратитесь к изображению ниже:

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

Нажав на да, удалите данные сотрудников и показать обновленный список сотрудников, обновляя таблицу View.

Заключение

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

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

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

Вы можете проверить мои другие статьи на Blazor здесь Отказ

Подготовка к интервью? Прочитайте мою статью о C # Кодирование вопросов для технических интервью

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

Первоначально опубликовано в https://ankitsharmablogs.com/