Как создать каскадный DropDownList в Blazor с помощью EF Core

kak sozdat kaskadnyj dropdownlist v blazor s pomoshhyu ef core

Введение

В этой статье мы собираемся создать каскадный нисходящий список в Blazor, используя первый подход к базе данных Entity Framework Core. Мы создадим два нисходящих списка. Страна и Город. Выбрав значение из раскрывающегося меню страны, мы изменим значение раскрывающегося списка Город.

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

Давайте посмотрим на конечный продукт.

R6rX0AxiRQV668mITyMfa7Zl6bUW8SE53IJj

Предпосылки

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

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

Исходный код

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

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

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

  1. Страна: используется для сохранения имени страны. Он содержит два поля – CountryId и CountryName.
  2. Города: здесь находится список городов для стран, которые мы вставим в таблицу стран. Он содержит три поля – CityId, CountryId и CityName. Столбец CountryId представляет собой внешний ключ, который ссылается на CountryId в таблице Country.

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

CREATE TABLE Country(CountryId VARCHAR(5) PRIMARY KEY,CountryName VARCHAR(20) NOT NULL)GOCREATE TABLE Cities(CityId VARCHAR(5) PRIMARY KEY,CountryId VARCHAR(5) FOREIGN KEY REFERENCES Country(CountryId),CityName VARCHAR(20) NOT NULL)GO

Теперь мы поместим некоторые данные в обе таблицы. Откройте таблицу Country и выполните следующий оператор вставки.

INSERT INTO Country VALUES ('C1', 'India')INSERT INTO Country VALUES ('C2', 'China')INSERT INTO Country VALUES ('C3', 'USA')

Затем выполните следующие операторы вставки, чтобы вставить данные в таблицу Cities.

INSERT INTO Cities VALUES ('P1','C1','New Delhi')INSERT INTO Cities VALUES ('P2','C1','Mumbai')INSERT INTO Cities VALUES ('P3','C1','Chennai')INSERT INTO Cities VALUES ('P4','C1','Hyderabad')INSERT INTO Cities VALUES ('P5','C1','Bengaluru')INSERT INTO Cities VALUES ('P6','C2','Beijing')INSERT INTO Cities VALUES ('P7','C2','Shanghai')INSERT INTO Cities VALUES ('P8','C2','Hong Kong')INSERT INTO Cities VALUES ('P9','C2','Macau')INSERT INTO Cities VALUES ('P10','C3','New York')INSERT INTO Cities VALUES ('P11','C3','Chicago')INSERT INTO Cities VALUES ('P12','C3','Las Vegas')

Создайте веб-приложение Blazor

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

После выбора проекта откроется диалоговое окно Новый проект. Выберите .NET Core в меню Visual C# на левой панели. Затем выберите ASP.NET Core Web Application из доступных типов проектов. Назовите проект «BlazorDDL» и нажмите OK.

aA8aVK7FJ9e7thD2fBpNscpiI0ttTX-tLCdU

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

DK6ivh2qgXWJpzHbnuPegwrxXeOAVEQjGpRn

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

lfVaeOOv4QxaWlf9lU8BzEOvajxIIZb-RoT0

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

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

Подключение модели к программе

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

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

5pv33HzsBpS5pQ8O8CmSw-O2jsyhBaN8LO4W

Сначала мы установим пакет для поставщика базы данных, на который мы ориентируемся, а это 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 Country, Cities

Не забудьте ввести собственную строку соединения (внутри “ ”). После успешного выполнения этой команды вы можете увидеть, что папка Models была создана и содержит три файла классов: myTestDBContext.cs,Cities.cs и Country.cs. Для этого мы успешно создали наши модели, используя первый подход к базовой базе данных EF.

Сейчас папка Models будет иметь такую ​​структуру.

ZyxM9Q56JAl9a7NLVwOwAhoJBFz1f7aQxd6L

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

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

Щелкните правой кнопкой мыши папку «DataAccess» и выберите «Добавить >> Класс». Назовите свой класс DataAccessClзад.cs”. Этот класс будет обрабатывать наши операции, связанные с базой данных.

Откройте «DataAccessLayer.cs» и вставьте в него следующий код.

using BlazorDDL.Shared.Models;using System;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;namespace BlazorDDL.Server.DataAcces{    public class DataAccessLayer    {        myTestDBContext db = new myTestDBContext();        public IEnumerable<Country> GetAllCountries()        {            try            {                return db.Country.ToList();            }            catch            {                throw;            }        }        public IEnumerable<Cities> GetCityData(string id)        {            try            {                List<Cities> lstCity = new List<Cities>();                lstCity = (from CityName in db.Cities where CityName.CountryId == id select CityName).ToList();                return lstCity;            }            catch            {                throw;            }        }    }}

Здесь мы определили два метода:

  1. GetAllCountries: он получит все данные страны из таблицы стран.
  2. GetCityData: он получит данные города, соответствующие предоставленному ему идентификатору страны.

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

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

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

0U0myNn7E3ix92ez7eJ23-1mFPV9WQd3Y5E9

Это создаст наш класс API «CountriesController».

Мы будем вызывать методы класса DataAccessLayer, чтобы получить данные и передать данные клиенту.

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

using System;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;using BlazorDDL.Server.DataAcces;using BlazorDDL.Shared.Models;using Microsoft.AspNetCore.Mvc;using Microsoft.AspNetCore.Http;namespace BlazorDDL.Server.Controllers{    public class CountriesController : Controller    {        DataAccessLayer objCountry= new DataAccessLayer();        [HttpGet]        [Route("api/Countries/GetCountryList")]        public IEnumerable<Country> GetCountryList()        {            return objCountry.GetAllCountries();        }        [HttpGet]        [Route("api/Countries/GetCities/{id}")]        public IEnumerable<Cities> GetCities(string id)        {            return objCountry.GetCityData(id);        }    }}

В настоящее время наш проект BlazorDDL.Server имеет такую ​​структуру.

CZyT1rhgPUQJDkNFnFSOru1uZhBIKGY8Gq9O

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

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

Щелкните правой кнопкой мыши на «BlazorDDL.Client/Page»с папку и выберите Добавить >> Новый элемент. Откроется диалоговое окно «Добавить новый элемент». Выберите «Веб» на панели слева, затем выберите «Razor View» на панели шаблонов и назовите его «CountryData.cсhtml”.

j8cycgQmG0qdEo2ix46ZdPdR0UmGqyn2mZiD

Это добавит «CountryData.cshtml» страницу нашей папки «BlazorDDL.Client/Pages».

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

@using BlazorDDL.Shared.Models@page "/country"@inject HttpClient Http<h1>Country Data</h1><p>This component demonstrates cascading dropdownlist using EntityFrameWork Core</p><hr />@if (countryList == null){    <p><em>Loading...</em></p>}else{    <div class="row">        <div class="col-md-4">            <label for="Country" class="control-label">Country</label>        </div>        <div class="col-md-4">            <label asp-for="Cities" class="control-label">Cities</label>        </div>    </div>    <div class="row" style="padding-top:10px">        <div class="col-md-4">            <select class="form-control" onchange="@CountryClicked">                <option value="">-- Select Country --</option>                @foreach (var country in countryList)                {                    <option value="@country.CountryId">@country.CountryName</option>                }            </select>        </div>        <div class="col-md-4">            <select class="form-control" onchange="@CityClicked">                <option value="">-- Select City --</option>                @if (cityList != null)                {                    @foreach (var city in cityList)                    {                        <option value="@city.CityName">@city.CityName</option>                    }                }            </select>        </div>    </div>    <div class="row" style="padding-top:50px">        <div class="col-md-4">            <label class="control-label">Country Name: @countryName</label>        </div>        <div class="col-md-4">            <label class="control-label">City Name: @cityName</label>        </div>    </div>}@functions {List<Country> countryList = new List<Country>();List<Cities> cityList = new List<Cities>();string countryId { get; set; }string countryName { get; set; }string cityName { get; set; }protected override async Task OnInitAsync(){    countryList = await Http.GetJsonAsync<List<Country>>("api/Countries/GetCountryList");}protected async void CountryClicked(UIChangeEventArgs countryEvent){    cityList.Clear();    cityName = string.Empty;    countryId = countryEvent.Value.ToString();    countryName = countryList.FirstOrDefault(s => s.CountryId == countryId).CountryName;    cityList = await Http.GetJsonAsync<List<Cities>>("api/Countries/GetCities/" + countryId);    this.StateHasChanged();}void CityClicked(UIChangeEventArgs cityEvent){    cityName = cityEvent.Value.ToString();    this.StateHasChanged();}}

Давайте разберемся в этом коде.

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

Затем мы определили раздел HTML для отображения двух нисходящих списков на нашей веб-странице. Мы вызываем метод CountryClicked для события onchange в раскрывающемся меню Country. Этот метод вызовет метод веб-API GetCites, чтобы получить данные города из таблицы Cities, соответствующей идентификатору страны выбранной страны.

Мы также устанавливаем значение свойства countryName для выбранной страны. Метод «StateHasChanged» вызывается для обновления пользовательского интерфейса. Это гарантирует, что нисходящий список Город будет обновлен при изменении нисходящего списка страны.

Аналогично, у нас есть еще один нисходящий список для отображения данных городов, соответствующих каждой стране. В событии onchange в раскрывающемся меню Города мы устанавливаем значение свойства cityName для выбранного города.

Мы также отображаем на странице значения выбранного названия страны и города.

Раздел @functions содержит все наши свойства и методы. Мы определили две переменные: countryList типа Country и cityList типа City. Они обрабатывают данные о странах и городах соответственно. Мы также объявили три свойства обработки данных countryId, countryName и cityName.

Внутри метода OnInitAsync мы вызываем метод веб-API GetCountryList для заполнения countryList. Эта переменная используется для привязки данных к выпадающему списку Страна при загрузке страницы.

Последним шагом является добавление ссылки на нашу страницу «CountryData» в меню навигации. Откройте страницу «BlazorDDL.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-plus" aria-hidden="true"></span> Counter            </NavLink>        </li>        <li class="nav-item px-3">            <NavLink class="nav-link" href="                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data            </NavLink>        </li>        <li class="nav-item px-3">            <NavLink class="nav-link" href="                <span class="oi oi-list-rich" aria-hidden="true"></span> Country            </NavLink>        </li>    </ul></div>@functions {bool collapseNavMenu = true;void ToggleNavMenu(){    collapseNavMenu = !collapseNavMenu;}}

Теперь мы завершили нашу программу каскадного раскрывающегося списка.

Демонстрация выполнения

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

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

r6L1EKqQvVQYBNuPYvZqLndvhr1y9LoqPpga

Нажмите страна в навигационном меню. Он перенаправит к просмотру CountryData, где на странице вы увидите два нисходящих меню – Страна и Города. Обратите внимание, что URL имеет «/страна ” прилагается к нему, как мы определили его с помощью директивы @page.

Fq5uDHelWT5tLTm5viD8CeSTfuO6oQtrOx88

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

kKA-ZvMJYGII82wAiK8QiKz8zsDdCcxoMN-K

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

Дополнительные сведения о размещении программы Blazor с помощью IIS см. в разделе Развертывание программы Blazor в IIS

Вывод

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

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

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

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

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

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

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

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