Автор оригинала: Ankit Sharma.
Вступление
В этой статье мы создадим приложение Blazor, используя MongoDB в качестве поставщика базы данных. Мы создадим приложение одной страницы (SPA) и выполняем на нем операции CRUD. Модальное всплывающее окно отобразит форму для обработки пользовательских входов. В форме также есть раскрывающий список, который будет связываться с коллекцией БД.
Мы будем использовать Visual Studio 2017 и MongoDB 4.0.
Посмотрите на окончательное приложение.
Предпосылки
- Установите .NET. Core 2.1 или выше SDK из здесь
- Установить Visual Studio 2017 V15,7 или выше здесь
- Установите расширение языковых услуг Asp.net Core Blazor от здесь
- Загрузите и установите Mongodb Community Edition. Вы можете найти руководство по установке здесь Отказ
Версии Visual Studio 2017 ниже V15.7 не поддерживают Blazor Framework.
Исходный код
Получить исходный код от Github Отказ
Настройка MongoDB.
После установки Mongodb нам необходимо добавить путь двоичных файлов MongoDB в переменную системного пути. Путь установки по умолчанию в машине Windows – C: \ Файлы программы \ mongodb . Следовательно, вам нужно включить C: \ Файлы программы \ mongodb \ server \ 4.0 \ bin в системной траектории переменной. Если вы не используете Windows, то вы можете найти процесс настройки двоичных файлов MongoDB на ссылке руководства по установке, представленной в разделе «Предпосылки» выше.
Работа с MongoDB.
Нам нужно настроить путь, в котором данные будут храниться на нашей машине. Откройте командную строку в качестве администратора и запустите следующую команду, чтобы установить путь хранения данных в вашем компьютере.
mongod --dbpath C:\MongoData
Вы можете предоставить путь любой папки, в которую вы хотите хранить данные. Эта команда подключится к MongoDB на порту 27017 (порт по умолчанию для подключения MongoDB). Обратитесь к изображению ниже:
Важная заметка:
Откройте новое окно командной строки и выполните команду Монго запустить Mongo Server. Обратитесь к изображению ниже.
Запустите следующую команду, чтобы создать базу данных:
use EmployeeDB
Это создаст нашу базу данных На сотрудничествеb Отказ Выполните следующую команду, чтобы создать новую коллекцию внутри базы данных:
db.createCollection('EmployeeRecord')Это создаст коллекцию Сотрудничество в нашей базе данных. Монгодб хранит данные в JSON-подобных документам. Давайте введем образец документа в нашем Сотрудничество коллекция. Запустите следующую команду.
db.EmployeeRecord.insert({'Name':'Ankit','Gender':'Male','Department':'HR','City':'Mumbai'})Вы можете наблюдать, что мы предоставили данные в формате JSON в качестве пары ключа. Запустите следующую команду, чтобы переписать все документы из коллекции WARDEREERECORD.
db.EmployeeRecord.find({})Схема базы данных добавит свойство _ID для каждого документа в коллекции. Это свойство имеет тип ObjectID, и он будет сгенерирован автоматически. Мы будем использовать это свойство _ID, чтобы уникально идентифицировать документ в коллекции. Обратитесь к изображению ниже:
Если вы хотите удалить все документы из коллекции CommareErecord, вам необходимо запустить следующую команду:
db.EmployeeRecord.remove({})Мы создадим другую коллекцию для хранения списка городов, которые используются для заполнения городской области Сотрудничество коллекция. Мы также связываем эту коллекцию в раскрывающемся списке в нашем веб-приложении, с которого пользователь выберет нужный город.
Запустите следующую команду, чтобы создать Города коллекция.
db.createCollection('Cities')Мы вставим пять образцов имен города в этой коллекции. Чтобы вставить документы оптом в Города Сборник, запустите следующую команду:
db.Cities.insertMany([ { CityName : "New Delhi" }, { CityName : "Mumbai"}, { CityName : "Hyderabad"}, { CityName : "Chennai"}, { CityName : "Bengaluru" }])Обратитесь к изображению ниже:
Создать Blazor Web Application
Откройте Visual Studio и выберите Файл >> Новый >> проект.
После выбора проекта откроется диалог «новый проект». Выберите .NET. Ядро внутри Visual C # меню с левой панели. Затем выберите «ASP.NET Core Web Application» из доступных типов проектов. Поместите название проекта как BlazorwithMongo и нажмите ОК.
После нажатия на OK новый диалог откроется просьбой выбрать шаблон проекта. Вы можете наблюдать два раскрывающихся меню в левом верхнем углу окна шаблона. Выберите «.NET. CORE “и” ASP.NET CORE 2.0 “от этих раскрывающихся. Затем выберите «Blazor» (ASP .NET Core Hosted) «Шаблон и нажмите ОК.
Теперь наше решение Blazor будет создано. Вы можете наблюдать, что у нас есть три файла проекта, созданные в этом решении
- BlazorwithMongo. Клиент – у него есть код клиента и содержит страницы, которые будут отображаться на браузере.
- BlazorwithMongo. Сервер – у него есть боковые коды сервера, такие как уровень доступа к данным и веб-API.
- BlazorwithMongo. Shared – он содержит общий код, который может быть доступен как клиент, так и сервер. Он содержит наш класс модели и контекста DB.
Установка драйвера MongoDB
Чтобы получить доступ к Mongodb из нашего приложения, нам нужно установить драйвер MongoDB, используя консоль менеджера пакетов. Мы установим его в BlazorwithMongo. Общий проект, так что его также можно добраться до сервера.
Перемещаться по инструментам >> Nuget Package Manager >> Менеджер пакетов Минусы ов. Выберите Blazorwith Mongo. Общий от выпадания проекта по умолчанию и запустите следующую команду:
Install-Package MongoDB.Driver
Обратитесь к изображению ниже:
Создание модели
Мы создадим наш класс модели в BlazorwithMongo. Общий проект. Щелкните правой кнопкой мыши на BlazorwithMongo. Общий и выберите Добавить >> новую папку. Назовите папку как модели. Снова щелкните правой кнопкой мыши в папке «Модели» и выберите «Добавить» >> Класс, чтобы добавить новый класс файл. Поместите название вашего класса в качестве Workeee.CS и нажмите Добавить.
Откройте класс Othereee.CS и вставьте в него следующий код.
using System;using System.Collections.Generic;using System.Text;using MongoDB.Bson;using MongoDB.Bson.Serialization.Attributes;namespace BlazorWithMongo.Shared.Models{ public class Employee { [BsonId] [BsonRepresentation(BsonType.ObjectId)] public string Id { get; set; } public string Name { get; set; } public string City { get; set; } public string Department { get; set; } public string Gender { get; set; } }}Мы включили ID Свойство типа ObjectID в определении нашего класса и оформлено на него [BSONID] атрибут. Это свойство требуется для сопоставления объектов модели к коллекции MongoDB.
Точно так же создайте другой файл классов Города и поместите следующий код в него.
using System;using System.Collections.Generic;using System.Text;using MongoDB.Bson;using MongoDB.Bson.Serialization.Attributes;namespace BlazorWithMongo.Shared.Models{ public class Cities { [BsonId] [BsonRepresentation(BsonType.ObjectId)] public string Id { get; set; } public string CityName { get; set; } }}Создание класса контекста БД
Добавьте новый файл класса в папку моделей и назовите его Somateedbcontext.cs Отказ Поместите следующий код в него:
using MongoDB.Driver;using System;using System.Collections.Generic;using System.Text;namespace BlazorWithMongo.Shared.Models{ public class EmployeeDBContext { private readonly IMongoDatabase _mongoDatabase; public EmployeeDBContext() { var client = new MongoClient("mongodb://localhost:27017"); _mongoDatabase = client.GetDatabase("EmployeeDB"); } public IMongoCollection EmployeeRecord { get { return _mongoDatabase.GetCollection("EmployeeRecord"); } } public IMongoCollection CityRecord { get { return _mongoDatabase.GetCollection("Cities"); } } }} Здесь мы определили Mongoclient который будет подключаться к экземпляру MongoDB Server с использованием строки подключения по умолчанию для MongoDB. Мы используем метод GetDatabase для получения экземпляра базы данных. Метод Сотрудничество используется для получения Сотрудничество Сборник из нашей базы данных и сопоставьте ее в класс модели сотрудников. Точно так же метод CityRecord Принесет сбор городов из базы данных и сопоставьте ее в класс модели городов.
Создание слоя доступа к данным для приложения
Щелкните правой кнопкой мыши BlazorwithMongo. Сервер Проект, а затем выберите Добавить >> Новая папка и назовите складку эр как данные Доступ. Мы будем добавлять наш класс для обработки операций, связанных с базой данных в этой папке.
Щелкните правой кнопкой мыши на DataAccess Папка и выберите Добавить >> класс. Назовите свой Учебный класс WaphyeDataaccessla ye R.CS. Откройте сотрудникутаасcessla yer.cs и поместите следующий код в него:
using BlazorWithMongo.Shared.Models;using MongoDB.Driver;using System;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;namespace BlazorWithMongo.Server.DataAccess{ public class EmployeeDataAccessLayer { EmployeeDBContext db = new EmployeeDBContext(); //To Get all employees details public List GetAllEmployees() { try { return db.EmployeeRecord.Find(_ => true).ToList(); } catch { throw; } } //To Add new employee record public void AddEmployee(Employee employee) { try { db.EmployeeRecord.InsertOne(employee); } catch { throw; } } //Get the details of a particular employee public Employee GetEmployeeData(string id) { try { FilterDefinition filterEmployeeData = Builders.Filter.Eq("Id", id); return db.EmployeeRecord.Find(filterEmployeeData).FirstOrDefault(); } catch { throw; } } //To Update the records of a particular employee public void UpdateEmployee(Employee employee) { try { db.EmployeeRecord.ReplaceOne(filter: g => g.Id == employee.Id, replacement: employee); } catch { throw; } } //To Delete the record of a particular employee public void DeleteEmployee(string id) { try { FilterDefinition employeeData = Builders.Filter.Eq("Id", id); db.EmployeeRecord.DeleteOne(employeeData); } catch { throw; } } // To get the list of Cities public List GetCityData() { try { return db.CityRecord.Find(_ => true).ToList(); } catch { throw; } } }} Здесь мы определили методы для выполнения операций CRUD на базе данных SPARTEEDEDB.
Добавление контроллера веб-API в приложение
Щелкните правой кнопкой мыши BlazorwithMongo. Сервер/Контроллеры Папка и выберите Добавить >> новый элемент. Откроется диалоговое окно «Добавить новый элемент». S эль CT Web с левой панели, затем выберите «Класс контроллера API» с панели шаблонов и поставьте Na я как работникэконтрол ler.c.CS. Нажмите Добавить.
Это создаст нашу API Сотрудникэконтроллер класс. Мы позвоним методам СЕРВИСНОСТЬААКСCESSCESSLAYER класс, чтобы получить данные и передавать данные на стороне клиента
Открыть SharmeEcontroller.cs Файл и поместите следующий код в него:
using System;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;using BlazorWithMongo.Server.DataAccess;using BlazorWithMongo.Shared.Models;using Microsoft.AspNetCore.Mvc;namespace BlazorWithMongo.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) { objemployee.AddEmployee(employee); } [HttpGet] [Route("api/Employee/Details/{id}")] public Employee Details(string id) { return objemployee.GetEmployeeData(id); } [HttpPut] [Route("api/Employee/Edit")] public void Edit([FromBody]Employee employee) { objemployee.UpdateEmployee(employee); } [HttpDelete] [Route("api/Employee/Delete/{id}")] public void Delete(string id) { objemployee.DeleteEmployee(id); } [HttpGet] [Route("api/Employee/GetCities")] public List GetCities() { return objemployee.GetCityData(); } }} Теперь мы закончили кодирование для нашей логики BackeND. Поэтому теперь мы будем приступить к коду нашей клиентской стороне.
Создание компонента просмотра
Мы добавим страницу просмотра в BlazorwithMongo. Клиент/Страницы папка. По умолчанию у нас есть «Counter» и «Fetch Data», предоставляемые в нашем приложении. Эти страницы по умолчанию не повлияют на наше приложение. Ради этого учебника мы будем удалять Fetchdata и счетчик Страницы из этой папки.
Щелкните правой кнопкой мыши BlazorwithMongo. Клиент/Страницы Папка, а затем выберите Добавить >> новый элемент. Откроется диалоговое окно «Добавить новый элемент». Выберите «ASP.NET CORE» с левой панели. Затем выберите «Razer Page» из панели шаблонов и Na Мне это сотрудничает. CSHTML. Нажмите Добавить. Обратитесь к изображению ниже:
Это добавит Searmeedata.cshtml Страница к нашему Blazorspa.client/страницы папка. Эта бритва будет иметь два файла – Searmentateata.cshtml. и SomerationeeTata.cshtml.cs.
Теперь мы добавим код на эти страницы.
Searmentateata.cshtml.
Открыть Searmeedata.cshtml Страница и поставить следующий код в него:
@page "/fetchemployee"@inherits EmployeeDataModelEmployee Data
CRUD operation with Blazor using MongoDB
@if (empList == null){Loading...
}else{
| Name | Gender | Department | City | |
|---|---|---|---|---|
| @emp.Name | @emp.Gender | @emp.Department | @emp.City |
Давайте понять этот код. На вершине мы определили маршрут этой страницы как «/Fetchemployeree». Это означает, что если мы добавим «/fetchemployeree» к корневому URL-адресу приложения, мы будем перенаправлены на эту страницу.
Мы также наследуем СИРУМНИЙСЯМОДАМОДАМОДЕЛЬ Класс, который определяется в SomeperiveEdata.cshtml.cs файл. Это позволит нам использовать методы, определенные в СИРУМНИЙСЯМОДАМОДАМОДЕЛЬ класс.
После этого мы определили кнопку, чтобы добавить новую запись сотрудника. При нажатии, эта кнопка откроет модальное всплывающее окно для обработки пользовательских входов.
Список документов сотрудников, возвращаемых из базы данных, хранятся в Emplist Переменная. Если переменная не является NULL, то мы связываем значения к таблице, чтобы отобразить документы сотрудников в табличной моде. Каждая строка в таблице имеет два ссылки на действия. Редактировать редактировать документ сотрудника. Удалить Удалить документ сотрудника.
Для обработки пользовательских входов мы используем форму. Мы используем одну форму как для 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 System.Net.Http;using Microsoft.AspNetCore.Blazor;using Microsoft.AspNetCore.Blazor.Components;using BlazorWithMongo.Shared.Models;namespace BlazorWithMongo.Client.Pages{ public class EmployeeDataModel : BlazorComponent { [Inject] protected HttpClient Http { 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 GetEmployee(); await GetCities(); } protected async Task GetEmployee() { empList = await Http.GetJsonAsync>("api/Employee/Index"); } protected async Task GetCities() { cityList = await Http.GetJsonAsync>("api/Employee/GetCities"); } protected void AddEmp() { emp = new Employee(); this.modalTitle = "Add Employee"; this.isAdd = true; } protected async Task EditEmployee(string ID) { emp = await Http.GetJsonAsync("/api/Employee/Details/" + ID); this.modalTitle = "Edit Employee"; this.isAdd = true; } protected async Task SaveEmployee() { if (emp.Id != null) { await Http.SendJsonAsync(HttpMethod.Put, "api/Employee/Edit", emp); } else { await Http.SendJsonAsync(HttpMethod.Post, "/api/Employee/Create", emp); } this.isAdd = false; await GetEmployee(); } protected async Task DeleteConfirm(string ID) { emp = await Http.GetJsonAsync("/api/Employee/Details/" + ID); this.isDelete = true; } protected async Task DeleteEmployee(string ID) { await Http.DeleteAsync("api/Employee/Delete/" + ID); this.isDelete = false; await GetEmployee(); } protected void closeModal() { this.isAdd = false; this.isDelete = false; } }} В этом файле мы определили класс СЕРВИСАЕТСЯМОДАМОДЕЛЬ это будет держать все методы, которые мы будем использовать в Searmeedata.cshtml страница. Мы также вводим Httpclient Служба для включения вызовов веб-API.
Переменные emplist и CityList определены для хранения данных от таблицы сотрудников и таблицы городов соответственно. Переменные наследуются внутри Oninitasync, чтобы убедиться, что данные доступны нам как нагрузки страницы.
Нажав на кнопку «Добавить работник», вызовут Addemp метод. Он будет инициализировать пустой экземпляр модели работника и установить значение Isadd Логический флаг для правды. Это откроет модальное всплывающее окно с формой, прося пользователя ввести значение для нового документа сотрудника. Точно так же мы определили Editemployeree Метод, который приведет к записи работника на основе идентификатора, для которого он вызывается. Это также установит значение Isadd Чтобы верно открыть модальное всплывающее окно для редактирования документа сотрудника.
Экономия заработок Метод проверит, будет ли он добавить новую запись сотрудника или редактировать существующую запись сотрудника. Если идентификатор не является NULL, то он представляет собой запрос «редактировать», и мы отправим запрос на веб-API для обновления существующего документа сотрудника.
Если идентификатор равен нулю, то он представляет собой запрос «Создать», и мы отправим сообщение запроса на веб-API для создания нового документа сотрудников.
Затем мы принесем обновленный список документов сотрудников, позвонив Getemployeree метод. Мы также устанавливаем значение Isadd к ложе, тем самым закрывая модальное всплывающее окно.
Deleteconfirm Метод вызывается, нажав кнопку Удалить, соответствующую записи сотрудника. Он установит значение isdelete Boolean flag to true, что отобразит модальное всплывающее окно удаления подтверждения. После нажатия да внутри этого всплывающего окна Deleteemployee метод вызывается. Он отправляет вызов Webi Web API для удаления документа сотрудника. Это также устанавливает isdelete Логический флаг для ложного закрытия модального всплывающего окна.
Добавление ссылки на меню навигации
Последний шаг – добавить ссылку на страницу «Сотрудник данных» в меню навигации. Открыть BlazorwithMongo/Shared/Navmenu.cshtml Страница и поместите следующий код в него.
@functions {bool collapseNavMenu = true;void ToggleNavMenu(){ collapseNavMenu = !collapseNavMenu;}}
Следовательно, мы успешно создали приложение одной страницы (SPA), используя Blazor с помощью MongoDB в качестве провайдера баз данных.
Исполнение демонстрации
Нажмите F5, чтобы запустить приложение.
Веб-страница откроется, как показано на рисунке ниже. Меню навигации слева показывает навигационную ссылку для страницы данных сотрудников.
Нажмите на ссылку «Данные сотрудника», она будет перенаправляться на вид на пользователя. Здесь вы можете увидеть все данные сотрудников в табличной моде. Обратите внимание, что URL-адрес «/Fetchemployee» прилагается к нему.
Нажмите на Добавить сотрудника Кнопка для открытия модального всплывающего окна «Добавить работник». Введите данные во всех полях и нажмите «Сохранить», чтобы создать новый документ «Сотрудник».
Это создаст новый документ для сотрудников и отображает данные в таблице представления. Нажмите на кнопку «Редактировать», соответствующую любой строке в таблице, она снова откроет модальное всплывающее окно для редактирования записи работника. Отредактируйте поля ввода и нажмите «Сохранить», чтобы обновить документ «Сотрудник».
Если вы нажмете на кнопку «Удалить», соответствующую записи сотрудника, он откроет всплывающее окно подтверждения удаления, задающее подтверждение, чтобы удалить запись сотрудника.
Нажав на да, удалите данные сотрудников и показать обновленный список сотрудников, обновляя таблицу View.
Заключение
Мы создали одностраничное приложение (SPA), используя Blazor с помощью MongoDB в качестве провайдера баз данных. Мы создали образцу систему управления записями работниками и выполнили операции CRUD на нем. Для обработки пользовательского ввода мы использовали форму в модальном всплывающем окне. Мы использовали Visual Studio 2017 и MongoDB 4.0 для нашей демонстрации.
Пожалуйста, получите исходный код из Github и играть вокруг, чтобы получить лучшее понимание.
Получить мою книгу Blazor Quick Start Guide узнать больше о Blazor.
Вы можете проверить мои другие статьи здесь Отказ
Подготовка к интервью? Прочитайте мою статью о C # Кодирование вопросов для технических интервью Отказ
Смотрите также
- Понимание Blazor Server-Side Blazor
- Приложение для одной страницы с использованием Blazor Side Side
- Создание спа с использованием страниц бритвы с Blazor
- ASP.NET CORE – CRUD Использование Blazor и Entity Framework Core
- Развертывание приложения Blazor на IIS
- JavaScript Interop в Blazor
Первоначально опубликовано в https://ankitsharmablogs.com/
Оригинал: “https://www.freecodecamp.org/news/how-to-perform-crud-operations-using-blazor-with-mongodb-8ee216ad513e/”