如何使用EF Core在Blazor中創建級聯的DropDownList

介紹 (Introduction)

In this article, we are going to create a cascading dropdown list in Blazor using Entity Framework Core database first approach. We will create two dropdown lists — Country and City. Upon selecting the value from the country dropdown, we will change the value of the City dropdown.

在本文中，我們將使用Entity Framework Core數據庫優先方法在Blazor中創建級聯下拉列表。我們將創建兩個下拉列表-Country和City 。從國家下拉列表中選擇值后，我們將更改城市下拉列表的值。

We will be using Visual Studio 2017 and SQL Server 2014.

我們將使用Visual Studio 2017和SQL Server 2014。

Let’s take a look at the final product.

讓我們看一下最終產品。

先決條件 (Prerequisites)

Install .NET Core 2.1 Preview 2 SDK from here
從此處安裝.NET Core 2.1 Preview 2 SDK
Install Visual Studio 2017 v15.7 or above from here
從此處安裝Visual Studio 2017 v15.7或更高版本
Install ASP.NET Core Blazor Language Services extension from here
從此處安裝ASP.NET Core Blazor語言服務擴展
SQL Server 2008 or above
SQL Server 2008或以上

Blazor framework is not supported by versions below Visual Studio 2017 v15.7.

Visual Studio 2017 v15.7以下的版本不支持Blazor框架。

源代碼 (Source Code)

Before proceeding, I would recommend that you get the source code from GitHub.

在繼續之前，我建議您從GitHub獲取源代碼。

建立表格 (Creating Tables)

We will be using two tables to store our data.

我們將使用兩個表來存儲我們的數據。

Country: used to store the name of the Country. It contains two fields — CountryId and CountryName.
國家/地區：用于存儲國家/地區的名稱。它包含兩個字段-CountryId和CountryName。
Cities: This contains the list of cities for the Countries we will insert in the Country table. It contains three fields — CityId, CountryId, and CityName. The CountryId column is a foreign key referring to CountryId in the Country table.
城市：這包含我們要在“國家/地區”表中插入的國家/地區的城市列表。它包含三個字段-CityId，CountryId和CityName。 CountryId列是一個外鍵，表示Country表中的CountryId。

Execute the following commands to create both tables:

執行以下命令來創建兩個表：

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

Now we will put some data in both of the tables. Open the Country table and execute the following insert statement.

現在，我們將一些數據放入兩個表中。打開國家表并執行以下插入語句。

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

Then execute the following insert statements to insert data into the Cities table.

然后執行以下插入語句，將數據插入到“城市”表中。

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 Web應用程序 (Create Blazor Web Application)

Open Visual Studio and select File >> New >> Project.

打開Visual Studio，然后選擇“文件>>新建>>項目”。

After selecting the project, a “New Project” dialog will open. Select .NET Core inside the Visual C# menu from the left panel. Then, select “ASP.NET Core Web Application” from the available project types. Name the project “BlazorDDL” and press OK.

選擇項目后，將打開“新建項目”對話框。從左側面板的Visual C＃菜單中選擇.NET Core。然后，從可用的項目類型中選擇“ ASP.NET Core Web應用程序”。將項目命名為“ BlazorDDL” 然后按確定。

After clicking on OK, a new dialog will open asking you to select the project template. You can see two drop-down menus at the top left of the template window. Select “.NET Core” and “ASP.NET Core 2.0” from these dropdowns. Then, select the “Blazor (ASP .NET Core hosted)” template and press OK.

單擊確定后，將打開一個新對話框，要求您選擇項目模板。您可以在模板窗口的左上方看到兩個下拉菜單。從這些下拉列表中選擇“ .NET Core”和“ ASP.NET Core 2.0”。然后，選擇“ Blazor(ASP.NET Core托管)”模板，然后按OK。

Now, our Blazor solution will be created. You can see the folder structure in Solution Explorer as shown in the below image.

現在，將創建我們的Blazor解決方案。您可以在解決方案資源管理器中看到文件夾結構，如下圖所示。

You can see that we have three project files created inside this solution.

您可以看到我們在此解決方案內部創建了三個項目文件。

BlazorDDL.Client: it has the client side code and contains the pages that will be rendered on the browser.
BlazorDDL.Client：它具有客戶端代碼，并包含將在瀏覽器中呈現的頁面。
BlazorDDL.Server: it has the server side code, such as DB related operations and web API.
BlazorDDL.Server：它具有服務器端代碼，例如與DB相關的操作和Web API。
BlazorDDL.Shared: it contains the shared code that can be accessed by both client and server.
BlazorDDL.Shared：它包含可以由客戶端和服務器訪問的共享代碼。

搭建應用模型 (Scaffolding the Model to the Application)

We are using Entity Framework core database first approach to create our models. We will create our model class in the “BlazorDDL.Shared” project so that it can be accessible to both the client and server project.

我們正在使用Entity Framework核心數據庫優先方法來創建模型。我們將在“ BlazorDDL.Shared”項目中創建模型類，以便客戶端和服務器項目都可以訪問它。

Navigate to Tools >> NuGet Package Manager >> Package Manager Console. Select “BlazorDDL.Shared” from the Default project dropdown. Refer to the image below:

導航到工具>> NuGet軟件包管理器>>軟件包管理器控制臺。從默認項目下拉菜單中選擇“ BlazorDDL.Shared”。請參考下圖：

First we will install the package for the database provider that we are targeting, which is SQL Server in this case. Run the following command:

首先，我們將為目標數據庫安裝程序安裝軟件包，在本例中為SQL Server。運行以下命令：

Install-Package Microsoft.EntityFrameworkCore.SqlServer

Since we are using Entity Framework Tools to create a model from the existing database, we will install the tools package as well. Run the following command:

由于我們使用實體框架工具從現有數據庫創建模型，因此我們還將安裝工具包。運行以下命令：

Install-Package Microsoft.EntityFrameworkCore.Tools

After you have installed both packages, we will scaffold our model from the database tables using the following command:

安裝完兩個軟件包之后，我們將使用以下命令從數據庫表中構建模型：

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

Do not forget to put your own connection string (inside “ ”). After this command gets executed successfully, you can see that a Models folder has been created and contains three class files: “myTestDBContext.cs”, “Cities.cs”, and “Country.cs”. And so we have successfully scaffolded our Models using EF core database first approach.

不要忘記在“”中放入自己的連接字符串。成功執行此命令后，可以看到已經創建了一個Models文件夾，其中包含三個類文件：“ myTestDBContext.cs”， “ Cities.cs”和“ Country.cs”。因此，我們已經成功使用EF核心數據庫優先方法建立了模型。

At this point in time, the Models folder will have the following structure.

此時，“模型”文件夾將具有以下結構。

為應用程序創建數據訪問層 (Creating the Data Access Layer for the Application)

Right click on “BlazorDDL.Server” project and then select Add >> New Folder and name the folder “DataAccess”. We will be adding our class to handle database-related operations inside this folder only.

右鍵單擊“ BlazorDDL.Server”項目，然后選擇“添加>>新建文件夾”，并將文件夾命名為“ DataAccess”。我們將添加我們的類，以僅在此文件夾內處理與數據庫相關的操作。

Right click on the “DataAccess” folder and select Add >> Class. Name your class “DataAccessClass.cs”. This class will handle our database-related operations.

右鍵單擊“ DataAccess”文件夾，然后選擇“添加>>類”。將您的類命名為“ DataAccessCl ass .cs”。此類將處理與數據庫有關的操作。

Open “DataAccessLayer.cs” and put the following code into it.

打開“ 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;            }        }    }}

Here we have defined two methods:

這里我們定義了兩種方法：

GetAllCountries: it will fetch all the country data from the country table.
GetAllCountries：它將從國家表中獲取所有國家數據。
GetCityData: it will fetch the city data corresponding to the country id provided to it.
GetCityData：它將獲取與提供給它的國家/地區ID相對應的城市數據。

Now our data access layer is complete. We will proceed to create our web API Controller.

現在我們的數據訪問層已經完成。我們將繼續創建Web API控制器。

將Web API控制器添加到應用程序 (Adding the web API Controller to the Application)

Right click on the “BlazorDDL.Server/Controllers” folder and select Add >> New Item. An “Add New Item” dialog box will open. Select “ASP.NET” from the left panel, then select “API Controller Class” from templates panel and name it “CountriesController.cs”. Press Add.

右鍵單擊“ BlazorDDL.Server / Controllers”文件夾，然后選擇添加>>新建項。 “添加新項”對話框將打開。從左側面板中選擇“ ASP.NET”，然后從模板面板中選擇“ API Controller Class”，并將其命名為“ CountriesController.cs”。按添加。

This will create our API “CountriesController” class.

這將創建我們的API“ CountriesController”類。

We will call the methods of the “DataAccessLayer” class to fetch data and pass on the data to the client side.

我們將調用“ DataAccessLayer”類的方法來獲取數據并將數據傳遞給客戶端。

Open the “CountriesController.cs” file and put the following code into it.

打開“ 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);        }    }}

At this point in time, our BlazorDDL.Server project has the following structure.

此時，我們的BlazorDDL.Server項目具有以下結構。

We are done with our backend logic. Therefore, we will now proceed to code our client side.

我們已經完成了后端邏輯。因此，我們現在開始對客戶端進行編碼。

將Razor視圖添加到應用程序 (Adding Razor View to the Application)

Right click on the “BlazorDDL.Client/Page”s folder and then select Add >> New Item. An “Add New Item” dialog box will open. Select Web from the left panel, then select “Razor View” from the templates panel and name it “CountryData.cshtml”.

右鍵單擊“ BlazorDDL.Client / Page” 的文件夾，然后選擇添加>>新建項目。 “添加新項”對話框將打開。從左側面板中選擇Web，然后從模板面板中選擇“ Razor View”，并將其命名為“ CountryData.c s html”。

This will add a “CountryData.cshtml” page to our “BlazorDDL.Client/Pages” folder.

這將添加一個“ CountryData.cshtml” 頁面到“ BlazorDDL.Client / Pages”文件夾。

Open the “CountryData.cshtml” page and put the following code into it.

打開“ 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();}}

Let’s understand this code.

讓我們了解這段代碼。

At the top, we have included BlazorDDL.Shared.Models namespace so that we can use our Country and Cities model class on this page. We define the route of this page using the @page directive. So, in this application, if we append “/country” to the base URL, then we will be redirected to this page. We are also injecting HttpClient service to enable the web API call.

在頂部，我們包括BlazorDDL.Shared.Models命名空間，以便我們可以在此頁面上使用Country和Cities模型類。我們使用@page指令定義此頁面的路由。因此，在此應用程序中，如果我們在基本URL后面附加“ / country”，那么我們將被重定向到此頁面。我們還將注入HttpClient服務以啟用Web API調用。

Then we have defined the HTML section to display two Dropdown lists on our web page. We are calling the “CountryClicked” method on the “onchange” event of the Country dropdown. This method will call the “GetCites” web API method to fetch the city data from the Cities table corresponding to the countryid of the selected country.

然后，我們定義了HTML部分，以在我們的網頁上顯示兩個下拉列表。我們在“國家/地區”下拉列表的“ onchange”事件中調用“ CountryClicked”方法。此方法將調用“ GetCites” Web API方法，以從“城市”表中獲取與所選國家/地區的國家/地區對應的城市數據。

We are also setting the value of the “countryName” property to the selected country. The “StateHasChanged” method is invoked to refresh the UI. This will ensure that the City dropdown list will get refreshed on changing the country dropdown.

我們還將“ countryName”屬性的值設置為所選國家。調用“ StateHasChanged”方法以刷新UI。這將確保在更改國家/地區下拉列表時刷新城市下拉列表。

Similarly, we have another dropdown list to display cities data corresponding to each country. On the “onchange” event of the Cities dropdown, we are setting the value of the “cityName” property to the selected city.

同樣，我們還有另一個下拉列表來顯示每個國家/地區對應的城市數據。在“城市”下拉列表的“ onchange”事件中，我們將“ cityName”屬性的值設置為所選城市。

We are also displaying the selected country name and city name value on the webpage.

我們還在網頁上顯示所選的國家名稱和城市名稱值。

The @functions section contains all our properties and methods. We have defined two variables: countryList of type Country, and cityList of type City. These handle the countries and cities data, respectively. We have also declared three properties to handle the countryId, countryName, and cityName data.

@functions部分包含我們所有的屬性和方法。我們定義了兩個變量：Country類型的countryList和City類型的cityList。這些分別處理國家和城市數據。我們還聲明了三個屬性來處理countryId，countryName和cityName數據。

Inside the “OnInitAsync” method, we are calling the GetCountryList web API method to populate countryList. This variable is used to bind the data to the Country dropdown list on page load.

在“ OnInitAsync”方法內部，我們正在調用GetCountryList Web API方法來填充countryList。此變量用于在頁面加載時將數據綁定到“國家/地區”下拉列表。

The last step is to add the link to our “CountryData” page in the navigation menu. Open the “BlazorDDL.Client/Shared/NavMenu.cshtml” page and put the following code into it.

最后一步是將鏈接添加到導航菜單中的“ CountryData”頁面。打開“ BlazorDDL.Client / Shared / NavMenu.cshtml”頁面，并將以下代碼放入其中。

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

Now we have completed our cascading dropdown list application.

現在，我們已經完成了級聯下拉列表應用程序。

執行演示 (Execution Demo)

Launch the application.

啟動應用程序。

A web page will open as shown in the image below. The navigation menu on the left shows the navigation link for the CountryData page.

如下圖所示，將打開一個網頁。左側的導航菜單顯示CountryData頁面的導航鏈接。

Click on “country” in the navigation menu. It will redirect to the CountryData view where you can see two dropdown s— Country and Cities — on the page. Notice the URL has “/country ” appended to it as we have defined it using the @page directive.

在導航菜單中單擊“國家”。它將重定向到CountryData視圖，您可以在頁面上看到兩個下拉列表-Country和Cities。注意，正如我們使用@page指令定義的那樣，URL后面附加了“ / country ”。

Here you can see both the dropdown lists. The Country dropdown list is already populated with the country data. If we select any country name from this dropdown, then the city dropdown will also get populated with the corresponding city data. We can also see the selected country and city values in the labels below both drop down lists.

在這里您可以看到兩個下拉列表。國家/地區下拉列表已使用國家/地區數據填充。如果我們從此下拉列表中選擇任何國家/地區名稱，則城市下拉列表還將填充相應的城市數據。我們還可以在兩個下拉列表下方的標簽中看到所選的國家和城市值。

托管應用 (Hosting the application)

To learn how to host a Blazor application using IIS , refer to Deploying a Blazor Application on IIS

要了解如何使用IIS托管Blazor應用程序，請參閱在IIS上部署Blazor應用程序

結論 (Conclusion)

We have learned how to create cascading dropdown lists in Blazor using Entity Framework Core database first approach with the help of Visual Studio 2017 and SQL Server 2014. Please get the source code from GitHub and play around to get a better understanding.

我們已經了解了如何在Visual Studio 2017和SQL Server 2014的幫助下使用Entity Framework Core數據庫優先方法在Blazor中創建級聯下拉列表。請從GitHub獲取源代碼，并進行嘗試以獲得更好的理解。

Get my book Blazor Quick Start Guide to learn more about Blazor.

獲取我的書《 Blazor快速入門指南》，以了解有關Blazor的更多信息。

You can check my other articles on Blazor here

您可以在此處查看有關Blazor的其他文章

You can also find this article at C# Corner.

您也可以在C＃Corner上找到此文章。

也可以看看 (See Also)

ASP.NET Core — Getting Started With Blazor
ASP.NET Core — Blazor入門
ASP.NET Core — CRUD Using Blazor And Entity Framework Core
ASP.NET Core —使用Blazor和Entity Framework Core的CRUD
ASP.NET Core — CRUD Using Angular 5 And Entity Framework Core
ASP.NET Core —使用Angular 5和實體框架Core的CRUD
ASP.NET Core — CRUD With React.js And Entity Framework Core
ASP.NET Core —使用React.js和實體框架Core的CRUD
ASP.NET Core — Using Highcharts With Angular 5
ASP.NET Core —在Angular 5中使用Highcharts

Originally published at https://ankitsharmablogs.com/

最初發布在 https://ankitsharmablogs.com/