jsp 構建單頁應用_如何使用服務器端Blazor構建單頁應用程序

jsp 構建單頁應用

介紹 (Introduction)

In this article, we will create a Single Page Application (SPA) using server-side Blazor. We will use an Entity Framework Core database. Single-Page Applications are web applications that load a single HTML page. They dynamically update that page as the user interacts with the app.

在本文中，我們將使用服務器端Blazor創建一個單頁應用程序(SPA)。我們將使用實體框架核心數據庫。單頁應用程序是加載單個HTML頁面的Web應用程序。當用戶與應用交互時，他們會動態更新該頁面。

We will be creating a sample Employee Record Management System. We will perform CRUD operations on it. A modal popup will display the form to handle user inputs. The form will also have a dropdown list which will bind to a database table. We will also provide a filter option to the user to filter the employee records based on employee name.

我們將創建一個示例員工記錄管理系統。我們將對其執行CRUD操作。模態彈出窗口將顯示該表單以處理用戶輸入。該表單還將具有一個下拉列表，該列表將綁定到數據庫表。我們還將為用戶提供一個過濾選項，以根據員工姓名過濾員工記錄。

We will be using Visual Studio 2017 and SQL Server 2017 for our demo.

我們將在演示中使用Visual Studio 2017和SQL Server 2017。

Let us look at the final application:

讓我們看一下最終的應用程序：

什么是服務器端Blazor？ (What is Server-Side Blazor?)

The release 0.5.0 of Blazor allows us to run Blazor applications on the server. This means that we can run the Blazor component server-side on .NET Core. A SignalR connection over the network will handle other functionalities such as UI updates, event handling, and JavaScript interop calls.

Blazor的0.5.0版本允許我們在服務器上運行Blazor應用程序。這意味著我們可以在.NET Core的服務器端運行Blazor組件。通過網絡的SignalR連接將處理其他功能，例如UI更新，事件處理和JavaScript互操作調用。

For more information, refer to my previous article on Understanding Server-Side Blazor.

有關更多信息，請參閱我之前的有關理解服務器端Blazor的文章。

先決條件 (Prerequisites)

Install the .NET Core 2.1 or above SDK from here
從此處安裝.NET Core 2.1或更高版本的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 2012 or above.
SQL Server 2012或更高版本。

Visual Studio 2017 versions below v15.7 do not support the Blazor framework.

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

源代碼 (Source Code)

Get the source code for this application from GitHub.

從GitHub獲取此應用程序的源代碼。

Important Note :

重要的提示：

This article is valid for Blazor 0.5.0 release. The server-side Blazor might undergo breaking changes in future releases of Blazor.

本文適用于Blazor 0.5.0版本。 服務器端Blazor可能會在Blazor的將來版本中發生重大更改。

建立表格 (Creating a Table)

We will be using two tables to store our data.

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

Employee: Used to store employee details. It contains fields such as EmployeeID, Name, City, Department, and Gender.
員工：用于存儲員工詳細信息。它包含諸如EmployeeID，姓名，城市，部門和性別之類的字段。
Cities: This contains the list of cities. It is used to populate the City field of the Employee table. It contains two fields, CityID and CityName
城市：包含城市列表。它用于填充Employee表的City字段。它包含兩個字段，CityID和CityName

Execute the following commands to create both tables:

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

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

Now, we will put some data into the Cities table. We will be using this table to bind a dropdown list in our web application. The user will select the desired city from this dropdown. Use the following insert statements:

現在，我們將一些數據放入Cities表中。我們將使用此表來綁定Web應用程序中的下拉列表。用戶將從該下拉列表中選擇所需的城市。使用以下插入語句：

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

Now, our Database part is complete. So we will proceed to create the server side application using Visual Studio 2017.

現在，我們的數據庫部分已經完成。因此，我們將繼續使用Visual Studio 2017創建服務器端應用程序。

創建服務器端Blazor應用程序 (Create The Server Side Blazor 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. For project name, put in ServerSideSPA and press OK.

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

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

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

This will create our server-side Blazor solution. You can observe the folder structure in solution explorer, as shown in the below image:

這將創建我們的服務器端Blazor解決方案。您可以在解決方案資源管理器中觀察文件夾結構，如下圖所示：

The solution has two project files:

該解決方案有兩個項目文件：

ServerSideSPA.App: This is our server-side Blazor app. This project has all our component logic and our services. We will also create our models and data access layer in this project.
ServerSideSPA.App：這是我們的服務器端Blazor應用程序。該項目具有我們所有的組件邏輯和服務。我們還將在此項目中創建模型和數據訪問層。
ServerSideSPA.Server: This is the ASP.NET Core hosted application. Instead of running client-side in the browser, the server-side Blazor app will run in the ASP.NET Core host application.
ServerSideSPA.Server：這是ASP.NET Core托管的應用程序。服務器端Blazor應用程序將在ASP.NET Core主機應用程序中運行，而不是在瀏覽器中運行客戶端。

In future releases of Blazor, these two projects might be merged into one. But for now, the separation is required due to the differences in the Blazor compilation model.

在Blazor的將來版本中，這兩個項目可能會合并為一個。但是目前，由于Blazor編譯模型的差異，需要進行分隔。

搭建應用模型 (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 ServerSideSPA.App project.Navigate to Tools >> NuGet Package Manager >> Package Manager Console. Select “ServerSideSPA.App” from the Default project drop-down. Refer to the image below:

我們正在使用Entity Framework核心數據庫優先方法來創建模型。我們將在ServerSideSPA.App項目中創建模型類。轉到工具>> NuGet軟件包管理器>>軟件包管理器控制臺。從默認的項目下拉列表中選擇“發 E RVE rSideSPA.App”。請參考下圖：

First, we will install the package for the database provider that we are targeting which is SQL Server in this case. Hence, 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. Hence, 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 Employee, Cities

Do not forget to put your own connection string (inside “ ”). After this command executes successfully, it creates a models folder inside ServerSideSPA.App project. It contains three class files: myTestDBContext.cs, Cities.cs and Employee.cs. Hence, we have successfully scaffolded our Models using EF core database first approach.

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

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

Right-click on ServerSideSPA.App 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.

右鍵單擊ServerSideSPA.App項目，然后選擇添加>>新建文件夾，并將其命名為較舊的數據訪問。我們將添加我們的類以僅處理此文件夾內的數據庫相關操作。

Right click on the DataAccess folder and select Add >> Class.

右鍵單擊DataAccess文件夾，然后選擇添加>>類。

Name your class EmployeeDataAccessLayer.cs. Open EmployeeDataAccessLayer.cs and put the following code into it:

將您的類命名為EmployeeDataAccessLayer.cs。 打開EmployeeDataAccessLayer.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<Employee> 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 Citiespublic List<Cities> GetCityData(){try{return db.Cities.ToList();}catch{throw;}}}
}

Here, we have defined the methods to handle database operations:

在這里，我們定義了處理數據庫操作的方法：

GetAllEmployees will fetch all the employee data from the Employee table.
GetAllEmployees將從Employee表中獲取所有雇員數據。
AddEmployee will create a new employee record.
AddEmployee將創建一個新的員工記錄。
UpdateEmployee will update the record of an existing employee.
UpdateEmployee將更新現有員工的記錄。
GetEmployeeData will fetch the record of the employee corresponding to the employee ID passed to it.
GetEmployeeData將獲取與傳遞給它的員工ID對應的員工記錄。
DeleteEmployee will delete the employee record corresponding to the employee id passed to it.
DeleteEmployee將刪除與傳遞給它的員工ID對應的員工記錄。
GetCityData will fetch the list of all the cities from Cities table.
GetCityData將從“城市”表中獲取所有城市的列表。

創建服務類 (Creating the Service class)

Right click on the Services folder and select Add >> Class. Give it a name of “EmployeeService.cs” and click Add. This will add the EmployeeService class to the Services folder.

右鍵單擊Services文件夾，然后選擇Add >> Class。給它“EmployeeService.cs”和CLI CK添加的一個名字。這會將EmployeeS服務類添加到Services文件夾中。

Open EmployeeService.cs and put the following code into it:

打開EmployeeService.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<List<Employee>> GetEmployeeList(){return Task.FromResult(objemployee.GetAllEmployees());}public void Create(Employee employee){objemployee.AddEmployee(employee);}public Task<Employee> 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<List<Cities>> GetCities(){return Task.FromResult(objemployee.GetCityData());}}
}

We will invoke the methods of EmployeeDataAccessLayer class from our service. The service will be injected into our components. The components will call the service methods to access the database.

我們將從服務中調用EmployeeDataAccessLayer類的方法。該服務將注入到我們的組件中。這些組件將調用服務方法來訪問數據庫。

At this point in time, the ServerSideSPA.App project has the following structure:

此時，ServerSideSPA.App項目具有以下結構：

配置服務 (Configuring the Service)

To make the service available to the components, we need to configure it on the server-side app. Open ServerSideSPA.App >> Startup.cs file. Add the following line inside the ConfigureServices method of the Startup class.

為了使該服務可用于組件，我們需要在服務器端應用程序上對其進行配置。打開ServerSideSPA.App >> Startup.cs文件。在Startup類的ConfigureSer Vices方法中添加以下行。

services.AddSingleton<EmployeeService>();

Refer to the image below:

請參考下圖：

Now we will proceed to create our view component.

現在，我們將繼續創建視圖組件。

創建視圖組件 (Creating The View Component)

We will add the Razor page in the ServerSideSPA.App /Pages folder. By default, we have “Counter” and “Fetch Data” pages provided in our application. These default pages will not affect our application. For the sake of this tutorial, delete both of them from the ServerSideSPA.App /Pages folder.

我們將在ServerSideSPA.App / Pages文件夾中添加Razor頁面。默認情況下，我們的應用程序中提供了“計數器”和“獲取數據”頁面。這些默認頁面不會影響我們的應用程序。為了本教程的緣故，請從ServerSideSPA.App / Pages文件夾中將它們都刪除。

Right-click on ServerSideSPA.App /Pages folder and then select Add >> New Item. An “Add New Item” dialog box will open. Select “ASP.NET Core” from the left panel. Then select “Razor Page” from the templates panel and name it EmployeeData.cshtml. Click Add.

右鍵單擊ServerSideSPA.App / Pages文件夾，然后選擇添加>>新建項。 “添加新項”對話框將打開。從左側面板中選擇“ ASP.NET Core”。然后從模板面板中選擇“ Razor Page”，并將其命名為EmployeeData。 cshtml。單擊添加。

This will add an EmployeeData.cshtml page to the Pages folder. This razor page will have two files, EmployeeData.cshtml and EmployeeData.cshtml.cs.Now, we will add code to these pages.

這會將EmployeeData.cshtml頁面添加到Pages文件夾。該剃刀頁面將包含兩個文件EmployeeData.cshtml和EmployeeData.cshtml.cs。 現在，我們將代碼添加到這些頁面。

EmployeeData.cshtml (EmployeeData.cshtml)

Open the EmployeeData.cshtml page and put the following code into it:

打開EmployeeData.cshtml頁面，并將以下代碼放入其中：

@page "/fetchemployee"
@inherits EmployeeDataModel<h1>Employee Data</h1>
<p>This component demonstrates CRUD operation on Employee data</p><div><div style="float:left"><button class="btn btn-primary" onclick="@AddEmp">Add Employee</button></div><div style="float:right; width:40%;"><div class="col-sm-6" style="float:left"><input class="form-control" type="text" placeholder="Search" bind="@SearchString" /></div><div><button type="submit" class="btn btn-default btn-info" onclick="@FilterEmp">Filter</button></div></div>
</div>@if (empList == null)
{<p><em>Loading...</em></p>
}
else
{<table class='table'><thead><tr><th>ID</th><th>Name</th><th>Gender</th><th>Department</th><th>City</th></tr></thead><tbody>@foreach (var emp in empList){<tr><td>@emp.EmployeeId</td><td>@emp.Name</td><td>@emp.Gender</td><td>@emp.Department</td><td>@emp.City</td><td><button class="btn btn-default" onclick="@(async () => await EditEmployee(@emp.EmployeeId))">Edit</button><button class="btn btn-danger" onclick="@(async () => await DeleteConfirm(@emp.EmployeeId))">Delete</button></td></tr>}</tbody></table>if (isAdd){<div class="modal" tabindex="-1" style="display:block" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h3 class="modal-title">@modalTitle</h3><button type="button" class="close" onclick="@closeModal"><span aria-hidden="true">X</span></button></div><div class="modal-body"><form><div class="form-group"><label for="Name" class="control-label">Name</label><input for="Name" class="form-control" bind="@emp.Name" /></div><div class="form-group"><label asp-for="Gender" class="control-label">Gender</label><select asp-for="Gender" class="form-control" bind="@emp.Gender"><option value="">-- Select Gender --</option><option value="Male">Male</option><option value="Female">Female</option></select></div><div class="form-group"><label asp-for="Department" class="control-label">Department</label><input asp-for="Department" class="form-control" bind="@emp.Department" /></div><div class="form-group"><label asp-for="City" class="control-label">City</label><select asp-for="City" class="form-control" bind="@emp.City"><option value="">-- Select City --</option>@foreach (var city in cityList){<option value="@city.CityName">@city.CityName</option>}</select></div></form></div><div class="modal-footer"><button class="btn btn-block btn-info" onclick="@(async () => await SaveEmployee())" data-dismiss="modal">Save</button></div></div></div></div>}if (isDelete){<div class="modal" tabindex="-1" style="display:block" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h3 class="modal-title">Delete Employee</h3></div><div class="modal-body"><h4>Do you want to delete this employee ??</h4><table class="table"><tr><td>Name</td><td>@emp.Name</td></tr><tr><td>Gender</td><td>@emp.Gender</td></tr><tr><td>Department</td><td>@emp.Department</td></tr><tr><td>City</td><td>@emp.City</td></tr></table></div><div class="modal-footer"><button class="btn btn-danger" onclick="@(async () => await DeleteEmployee(emp.EmployeeId))" data-dismiss="modal">YES</button><button class="btn btn-warning" onclick="@closeModal">NO</button></div></div></div></div>}
}

Let me explain this code. At the top, we have defined the route for this page as “/fetchemployee”. This means if we append “/fetchemployee” to the root URL of the app, we will be redirected to this page.

讓我解釋一下這段代碼。在頂部，我們已將此頁面的路由定義為“ / fetchemployee”。這意味著，如果將“ / fetchemployee”附加到應用程序的根URL，我們將被重定向到此頁面。

We are also inheriting EmployeeDataModel class which is defined in EmployeeData.cshtml.cs file. This will allow us to use the methods defined in EmployeeDataModel class.

我們還將繼承EmployeeData.cshtml.cs文件中定義的EmployeeDataModel類。這將使我們能夠使用EmployeeDataModel類中定義的方法。

After this, we have defined a button to add a new employee record. When clicked, this button will open a modal popup to handle the user inputs.

此后，我們定義了一個添加新員工記錄的按鈕。單擊時，此按鈕將打開一個模式彈出窗口以處理用戶輸入。

We have also defined a searchbox and a corresponding button to filter the employee records based on employee name. If you enter an employee name and click on the filter button, it will show all matching employee records. If we click on the filter button without entering any value in the search box, it will return all the employee records.

我們還定義了一個搜索框和一個相應的按鈕，用于根據員工姓名過濾員工記錄。如果輸入員工名稱并單擊過濾器按鈕，它將顯示所有匹配的員工記錄。如果單擊過濾器按鈕但未在搜索框中輸入任何值，它將返回所有員工記錄。

The employee records returned from the database are stored in the empList variable. If the variable is not null, then we will bind the values to a table to display the employee records in a tabular fashion. Each employee record will also have two action links — Edit to edit the employee record, and Delete to delete the employee record.

從數據庫返回的員工記錄存儲在empList變量中。如果變量不為null，則我們將這些值綁定到表上以表格形式顯示員工記錄。每個員工記錄還將具有兩個操作鏈接-“ 編輯”以編輯員工記錄，以及“ 刪除”以刪除員工記錄。

To handle the user inputs, we are using a form. We are using a single form for both Add Employee and Edit Employee functionality. The form is defined in a modal popup. The modal popup is displayed on the screen based on the value of the Boolean property isAdd. The value of this Boolean property is set in the code behind (.cshtml.cs) page.

為了處理用戶輸入，我們使用了一個表格。我們正在為“添加員工”和“編輯員工”功能使用單一表格。該表單在模式彈出窗口中定義。基于布爾屬性isAdd的值，模式彈出窗口顯示在屏幕上。在(.cshtml.cs)頁面后面的代碼中設置此布爾屬性的值。

The City dropdown list inside the form is binding to our Cities table in the database with the help of the cityList variable. The cityList will be populated as the application boots up.

表單內的City下拉列表借助cityList變量綁定到數據庫中的Cities表。當應用程序啟動時，將填充cityList。

The form will have a Save button which will invoke the SaveEmployee method. This method is defined in the code behind file to Add or update an employee record.

該窗體將具有一個保存按鈕，它將調用SaveEmployee方法。該方法在文件后面的代碼中定義，用于添加或更新員工記錄。

Similar to Add modal popup, we also have a Delete modal popup. It will be a read-only modal and ask for a confirmation to delete an employee record. Upon clicking “Yes”, it will invoke the DeleteEmployee method to delete the employee record.

與添加模式彈出窗口類似，我們還有一個刪除模式彈出窗口。這將是只讀模式，并要求確認以刪除員工記錄。單擊“是”后，它將調用DeleteEmployee方法以刪除員工記錄。

EmployeeData.cshtml.cs (EmployeeData.cshtml.cs)

Open EmployeeData.cshtml.cs and put the following code into it.

打開EmployeeData.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<Employee> empList;protected List<Cities> cityList = new List<Cities>();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;}}
}

Let me explain this code. We have defined a class EmployeeDataModel. It will hold all the methods that we will be using in EmployeeData.cshtml page.

讓我解釋一下這段代碼。我們定義了一個類EmployeeDataModel。 它將保存我們將在EmployeeData.cshtml頁面中使用的所有方法。

We are injecting our EmployeeService to the EmployeeDataModel class so that the client-side methods can invoke our services.

我們正在將EmployeeService注入EmployeeDataModel類，以便客戶端方法可以調用我們的服務。

The variables empList and cityList hold the data from the Employee and Cities tables. The variables are getting populated inside the OnInitAsync to make sure that the data is available to us as the page loads.

變量empList和cityList保存Employee和Cities表中的數據。這些變量將填充到OnInitAsync內部，以確保在頁面加載時數據可供我們使用。

We will use the FilterEmp method to filter the employee data based on the employee name property. This property will ignore the text case of the search string. It returns all the records that match either fully or partially with the search string.

我們將使用FilterEmp方法根據員工姓名屬性過濾員工數據。此屬性將忽略搜索字符串的文本大小寫。它返回與搜索字符串完全或部分匹配的所有記錄。

Clicking the “Add Employee” button will invoke the AddEmp method. It will initialize an empty instance of Employee model and set the value of the isAdd Boolean flag to true. This will open a modal popup with a form, asking the user to enter a new employee record. Similarly, we have defined an EditEmployee method. It fetches the record of the employee based on the employee id for which it is invoked. It will also set the value of isAdd to true to open the modal popup to edit the employee record.

單擊“添加員工”按鈕將調用AddEmp方法。它將初始化Employee模型的空實例，并將isAdd布爾標志的值設置為true。這將打開帶有表單的模式彈出窗口，要求用戶輸入新的員工記錄。同樣，我們定義了一個EditEmployee方法。它根據為其調用的員工ID提取員工的記錄。還將isAdd的值設置為true，以打開模式彈出窗口以編輯員工記錄。

The SaveEmployee method will check if it is invoked to add a new employee record or to edit an existing employee record. If the EmployeeId property is set, then it is an “edit” request, and we will invoke the Edit method of our service. If EmployeeId is not set, then it is a “create” request, and we will invoke the Create method of our service. We will then fetch the updated employee record by calling the GetEmployee method and will also set the value of isAdd to false, thus closing the modal popup.

SaveEmployee方法將檢查是否調用了該方法以添加新的員工記錄或編輯現有的員工記錄。如果設置了EmployeeId屬性，則它是一個“編輯”請求，我們將調用服務的Edit方法。如果未設置EmployeeId，則它是一個“創建”請求，我們將調用服務的Create方法。然后，我們將通過調用getEmployee的方法取得更新的員工記錄，也將設置isAdd的假值，從而關閉模式彈出。

The DeleteConfirm method is invoked by clicking the Delete button corresponding to an employee record. It will set the value of the isDelete Boolean flag to true. This will display a Delete confirmation modal popup. Upon clicking YES inside this popup, DeleteEmployee method is invoked. This will delete the employee record and set the isDelete Boolean flag to false to close the modal popup.

通過單擊與員工記錄對應的Delete按鈕來調用DeleteConfirm方法。它將isDelete布爾值標志的值設置為true。這將顯示一個刪除確認模式彈出窗口。在此彈出窗口中單擊“是”后，將調用DeleteEmployee方法。這將刪除員工記錄，并將isDelete布爾值標志設置為false以關閉模式彈出窗口。

The last step is to add the link to our “EmployeeData” page in the navigation menu. Open ServerSideSPA.App/Shared/NavMenu.cshtml page and put the following code into it:

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

<div class="top-row pl-4 navbar navbar-dark"><a class="navbar-brand" href="">ServerSideSPA</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="fetchemployee"><span class="oi oi-list-rich" aria-hidden="true"></span> Fetch employee</NavLink></li></ul>
</div>@functions {
bool collapseNavMenu = true;void ToggleNavMenu()
{collapseNavMenu = !collapseNavMenu;
}
}

This completes our Single Page Application using server-side Blazor.

這將使用服務器端Blazor完成我們的單頁應用程序。

執行演示 (Execution Demo)

Press F5 to launch the application.

按F5啟動應用程序。

A web page will open as shown in the image below. The navigation menu on the left is showing a navigation link for the Employee data page.

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

Clicking on the “Employee data” link will redirect to the EmployeeData view. Here you can see all the employee data on the page. Notice the URL has “/fetchemployee” appended to it.

單擊“雇員數據”鏈接將重定向到EmployeeData視圖。在這里，您可以在頁面上看到所有員工數據。請注意，URL附加了“ / fetchemployee”。

Click on the Add Employee button to open the “Add Employee” modal popup. Enter the data in all the fields and click on Save to create a new employee record.

單擊添加員工按鈕以打開“添加員工”模式彈出窗口。在所有字段中輸入數據，然后單擊保存以創建新的員工記錄。

This will create a new employee record and display the data in the view table. Add a few more records, and the view will be similar to the one shown below:

這將創建一個新的員工記錄，并在視圖表中顯示數據。再添加幾條記錄，該視圖將類似于以下所示：

Clicking on the Edit button will open the modal popup for editing the employee record. Edit the input fields and click on save to update the employee record.

單擊“編輯”按鈕將打開用于編輯員工記錄的模式彈出窗口。編輯輸入字段，然后單擊保存以更新員工記錄。

To filter the employee records, enter the employee name in the search box and click on the Filter button. The search text is case independent. The filter operation will return all the employee records matching the name entered in the search field. Refer to the image below:

要過濾員工記錄，請在搜索框中輸入員工名稱，然后單擊“過濾器”按鈕。搜索文本不區分大小寫。篩選操作將返回與在搜索字段中輸入的名稱匹配的所有員工記錄。請參考下圖：

If you click on the Delete button corresponding to the employee record, it will open a delete confirmation popup asking for a confirmation to delete the employee record.

如果單擊與員工記錄對應的“刪除”按鈕，它將打開一個刪除確認彈出窗口，要求確認刪除員工記錄。

Clicking on YES will delete the employee data and show the updated list of employees by refreshing the view table.

單擊“是”將刪除員工數據，并通過刷新視圖表來顯示更新的員工列表。

結論 (Conclusion)

We have created a server-side Blazor application using Entity Framework Core DB first approach with the help of Visual Studio 2017 and SQL Server 2017. We used a modal popup to handle user inputs via a form. We also implemented the search functionality on the employee records.

我們已在Visual Studio 2017和SQL Server 2017的幫助下，使用Entity Framework Core DB first方法創建了服務器端Blazor應用程序。我們使用模式彈出窗口通過表單處理用戶輸入。我們還對員工記錄實施了搜索功能。

Please get the source code from GitHub and play around to get a better understanding.

請從GitHub獲取源代碼并進行嘗試以獲得更好的理解。

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

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

You can check out my other articles on Blazor here.

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

Preparing for interviews? Read my article on C# Coding Questions For Technical Interviews

準備面試嗎？閱讀有關技術面試的C＃編碼問題的文章

也可以看看 (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
Cascading DropDownList In Blazor Using EF Core
使用EF Core在Blazor中級聯DropDownList
Creating an SPA Using Razor Pages With Blazor
使用帶有Blazor的Razor頁面創建SPA
Deploying a Blazor Application on IIS
在IIS上部署Blazor應用程序

Originally published at https://ankitsharmablogs.com/

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