Cum se creează un DropDownList în cascadă în Blazor folosind EF Core

Introducere

În acest articol, vom crea o listă derulantă în cascadă în Blazor folosind prima abordare a bazei de date Entity Framework Core. Vom crea două liste derulante – Țară și Oraș. La selectarea valorii din meniul derulant pentru țară, vom schimba valoarea meniului derulant Oraș.

Vom folosi Visual Studio 2017 și SQL Server 2014.

Să aruncăm o privire asupra produsului final.

Condiții prealabile

• Instalați .NET Core 2.1 Preview 2 SDK de la aici
• Instalați Visual Studio 2017 v15.7 sau mai sus de la aici
• Instalați extensia ASP.NET Core Blazor Language Services de la aici
• SQL Server 2008 sau o versiune ulterioară

Blazor Framework nu este acceptat de versiunile de mai jos Visual Studio 2017 v15.7.

Cod sursa

Înainte de a continua, aș recomanda să obțineți codul sursă de la GitHub.

Crearea tabelelor

Vom folosi două tabele pentru a ne stoca datele.

1. Țară: folosit pentru a stoca numele țării. Conține două câmpuri – CountryId și CountryName.
2. Orașe: conține lista orașelor pentru țările pe care le vom insera în tabelul Țară. Conține trei câmpuri – CityId, CountryId și CityName. Coloana CountryId este o cheie externă care se referă la CountryId din tabelul Țară.

Executați următoarele comenzi pentru a crea ambele tabele:

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

Acum vom pune câteva date în ambele tabele. Deschideți tabelul Țară și executați următoarea instrucțiune de inserare.

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

Apoi executați următoarele instrucțiuni de inserare pentru a insera date în tabelul Orașe.

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')

Creați aplicația web Blazor

Deschideți Visual Studio și selectați Fișier >> Nou >> Proiect.

După selectarea proiectului, se va deschide un dialog „Proiect nou”. Selectați .NET Core din meniul Visual C # din panoul din stânga. Apoi, selectați „ASP.NET Core Web Application” din tipurile de proiecte disponibile. Denumiți proiectul „BlazorDDL” și apăsați OK.

După ce faceți clic pe OK, se va deschide un nou dialog care vă solicită să selectați șablonul de proiect. Puteți vedea două meniuri derulante în partea stângă sus a ferestrei șablon. Selectați „.NET Core” și „ASP.NET Core 2.0” din aceste meniuri derulante. Apoi, selectați șablonul „Blazor (găzduit ASP .NET Core)” și apăsați OK.

Acum, soluția noastră Blazor va fi creată. Puteți vedea structura folderelor în Solution Explorer așa cum se arată în imaginea de mai jos.

Puteți vedea că avem trei fișiere de proiect create în această soluție.

1. BlazorDDL.Client: are codul clientului și conține paginile care vor fi redate în browser.
2. BlazorDDL.Server: are codul lateral al serverului, cum ar fi operațiunile legate de DB și API-ul web.
3. BlazorDDL.Shared: conține codul partajat care poate fi accesat atât de client, cât și de server.

Schelarea modelului către aplicație

Folosim prima abordare a bazei de date Entity Framework pentru a crea modelele noastre. Vom crea clasa noastră de model în proiectul „BlazorDDL.Shared”, astfel încât să poată fi accesat atât proiectului client, cât și al serverului.

Navigați la Instrumente >> NuGet Package Manager >> Package Manager Console. Selectați „BlazorDDL.Shared” din meniul derulant Proiect implicit. Consultați imaginea de mai jos:

Mai întâi vom instala pachetul pentru furnizorul bazei de date pe care îl vizăm, care este SQL Server în acest caz. Rulați următoarea comandă:

Install-Package Microsoft.EntityFrameworkCore.SqlServer

Deoarece folosim Instity Framework Tools pentru a crea un model din baza de date existentă, vom instala și pachetul de instrumente. Rulați următoarea comandă:

Install-Package Microsoft.EntityFrameworkCore.Tools

După ce ați instalat ambele pachete, vom schela modelul nostru din tabelele bazei de date folosind următoarea comandă:

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

Nu uitați să puneți propriul șir de conexiune (în interiorul „”). După ce această comandă este executată cu succes, puteți vedea că a fost creat un folder Models și conține trei fișiere de clasă: „myTestDBContext.cs”, „Cities.cs ”și„ Country.cs ”. Și astfel ne-am schelat cu succes modelele folosind prima abordare a bazei de date EF core.

În acest moment, folderul Modele va avea următoarea structură.

Crearea stratului de acces la date pentru aplicație

Faceți clic dreapta pe proiectul „BlazorDDL.Server” și apoi selectați Adăugați >> Folder nou și denumiți folderul „DataAccess”. Vom adăuga clasa noastră pentru a gestiona operațiunile legate de baza de date numai în acest folder.

Faceți clic dreapta pe folderul „DataAccess” și selectați Adăugați >> Clasa. Denumiți clasa dvs. „DataAccessClcur.cs ”. Această clasă se va ocupa de operațiunile noastre legate de baza de date.

Deschideți „DataAccessLayer.cs” și introduceți următorul cod în el.

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;            }        }    }}

Aici am definit două metode:

1. GetAllCountries: va prelua toate datele de țară din tabelul de țară.
2. GetCityData: va prelua datele orașului corespunzătoare codului de țară furnizat acestuia.

Acum, stratul nostru de acces la date este complet. Vom continua să creăm controlerul nostru API web.

Adăugarea controlerului API web la aplicație

Faceți clic dreapta pe folderul „BlazorDDL.Server / Controllers” și selectați Adăugați >> Element nou. Se va deschide o casetă de dialog „Adăugare element nou”. Selectați „ASP.NET” din panoul din stânga, apoi selectați „API Controller Class” din șablonul panoului și denumiți-l „CountriesController.cs”. Apăsați Adăugare.

Aceasta va crea clasa noastră „CountriesController” API.

Vom apela metodele clasei „DataAccessLayer” pentru a prelua date și a le transmite către partea clientului.

Deschideți „CountriesController.cs” și introduceți următorul cod în el.

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);        }    }}

În acest moment, proiectul nostru BlazorDDL.Server are următoarea structură.

Am terminat cu logica noastră backend. Prin urmare, vom continua să codificăm partea clientului nostru.

Adăugarea Razor View la aplicație

Faceți clic dreapta pe „BlazorDDL.Client / Page”s folder și apoi selectați Adăugare >> Element nou. Se va deschide o casetă de dialog „Adăugare element nou”. Selectați Web din panoul din stânga, apoi selectați „Razor View” din panoul șabloanelor și denumiți-l „CountryData.cshtml ”.

Aceasta va adăuga un „CountryData.cshtml” în dosarul nostru „BlazorDDL.Client / Pages”.

Deschideți „CountryData.cshtml” pagina și introduceți următorul cod în ea.

@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();}}

Să înțelegem acest cod.

În partea de sus, am inclus spațiul de nume BlazorDDL.Shared.Models, astfel încât să putem utiliza clasa noastră de model Țară și Orașe pe această pagină. Definim ruta acestei pagini folosind directiva @page. Deci, în această aplicație, dacă adăugăm „/ country” la adresa URL de bază, atunci vom fi redirecționați către această pagină. De asemenea, injectăm serviciul HttpClient pentru a activa apelul API web.

Apoi am definit secțiunea HTML pentru a afișa două liste derulante pe pagina noastră web. Apelăm la metoda „CountryClicked” la evenimentul „onchange” din meniul derulant Country. Această metodă va apela metoda API-ului web „GetCites” pentru a prelua datele orașului din tabelul Orașe corespunzător countryid-ului țării selectate.

De asemenea, setăm valoarea proprietății „countryName” la țara selectată. Metoda „StateHasChanged” este invocată pentru a reîmprospăta UI. Acest lucru vă va asigura că lista derulantă Oraș va fi reîmprospătată la schimbarea listei derulante de țară.

În mod similar, avem o altă listă derulantă pentru a afișa datele orașelor corespunzătoare fiecărei țări. La evenimentul „onchange” din meniul derulant Orașe, setăm valoarea proprietății „cityName” la orașul selectat.

Afișăm, de asemenea, numele țării și valoarea orașului selectate pe pagina web.

Secțiunea @funcții conține toate proprietățile și metodele noastre. Am definit două variabile: countryList de tip Country și cityList de tip City. Acestea gestionează datele privind țările și respectiv orașele. De asemenea, am declarat trei proprietăți pentru a gestiona datele countryId, countryName și cityName.

În cadrul metodei „OnInitAsync”, apelăm metoda API web GetCountryList pentru a completa countryList. Această variabilă este utilizată pentru a lega datele de lista derulantă Țară la încărcarea paginii.

Adăugarea linkului la meniul de navigare

Ultimul pas este să adăugați linkul la pagina „CountryData” din meniul de navigare. Deschideți pagina „BlazorDDL.Client / Shared / NavMenu.cshtml” și introduceți următorul cod în ea.

<div class="top-row pl-4 navbar navbar-dark">    <a class="navbar-brand" href="https://www.freecodecamp.org/">BlazorDDL</a>    <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="https://www.freecodecamp.org/" 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="http://www.freecodecamp.org/counter">                <span class="oi oi-plus" aria-hidden="true"></span> Counter            </NavLink>        </li>        <li class="nav-item px-3">            <NavLink class="nav-link" href="http://www.freecodecamp.org/fetchdata">                <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="http://www.freecodecamp.org/country">                <span class="oi oi-list-rich" aria-hidden="true"></span> Country            </NavLink>        </li>    </ul></div>@functions {bool collapseNavMenu = true;void ToggleNavMenu(){    collapseNavMenu = !collapseNavMenu;}}

Acum am finalizat aplicația noastră în listă derulantă în cascadă.

Demo de execuție

Lansați aplicația.

Se va deschide o pagină web așa cum se arată în imaginea de mai jos. Meniul de navigare din stânga afișează linkul de navigare pentru pagina CountryData.

Faceți clic pe „țară” în meniul de navigare. Se va redirecționa către vizualizarea CountryData, unde puteți vedea două meniuri derulante – Țară și orașe – pe pagină. Observați că adresa URL are „/țară ”L-am adăugat așa cum am definit-o folosind directiva @page.

Aici puteți vedea ambele liste derulante. Lista derulantă Țară este deja completată cu datele despre țară. Dacă selectăm orice nume de țară din acest meniu derulant, atunci meniul derulant al orașului va fi completat și cu datele orașului corespunzătoare. De asemenea, putem vedea valorile țării și orașelor selectate în etichetele de sub ambele liste derulante.

Găzduirea aplicației

Pentru a afla cum să găzduiți o aplicație Blazor utilizând IIS, consultați Implementarea unei aplicații Blazor pe IIS

Concluzie

Am învățat cum să creăm liste derulante în cascadă în Blazor folosind prima abordare a bazei de date Entity Framework Core cu ajutorul Visual Studio 2017 și SQL Server 2014. Vă rugăm să obțineți codul sursă de la GitHub și jucați-vă pentru a înțelege mai bine.

Ia cartea mea Ghid de pornire rapidă Blazor pentru a afla mai multe despre Blazor.

Puteți verifica celelalte articole despre Blazor aici

Puteți găsi și acest articol la C # Corner.

Vezi si

• ASP.NET Core – Noțiuni introductive despre Blazor
• ASP.NET Core – CRUD folosind Blazor And Entity Framework Core
• Core ASP.NET – CRUD folosind nucleul Angular 5 și Entity Framework
• ASP.NET Core – CRUD cu React.js și Entity Framework Core
• ASP.NET Core – Utilizarea Highcharts cu Angular 5

Publicat inițial la https://ankitsharmablogs.com/