ASP.NET Core Blazor 使用 Entity Framework 和 Web API 进行 CRUD 操作
4.97/5 (15投票s)
在本文中，我们将了解如何使用 Entity Framework 和 Web API 为 ASP.NET Core Blazor 创建一个简单的 CRUD 应用程序。
引言
* 请观看我的 YouTube 视频链接以学习 ASP.NET Core Blazor 使用 Entity Framework 和 Web API 进行 CRUD 操作。
在本文中，我们将了解如何使用 Entity Framework 和 Web API 为 ASP.NET Core Blazor 创建一个简单的 CRUD 应用程序。Blazor 是微软推出的一款新框架。我喜欢使用 Blazor，因为它使我们的 SPA 全栈应用程序开发更加简单，而且是的，我们现在只用一种语言 C# 就可以完成。在 Blazor 出现之前，我们通常将 ASP.NET Core 与 Angular 或 ReactJs 结合使用，现在借助 Blazor 的支持，我们可以直接使用 C# 代码创建自己的 SPA 应用程序。如果您开始使用 Blazor 开发 SPA 应用程序，肯定会喜欢它，使用 Blazor 开发非常简单有趣。目前唯一的缺点是，由于 Blazor 是一个新推出的框架，它仍处于实验阶段，一旦发布完整版本，它将为应用程序开发带来更多乐趣。
在本文中，我们将了解如何使用 ASP.NET Core Blazor 创建 CRUD Web 应用程序。
- C: (
创建): 使用 ASP.NET Core、Blazor、EF 和 Web API 将新的学生详细信息插入数据库。 - R: (
读取): 使用 ASP.NET Core、Blazor、EF 和 Web API 从数据库中选择学生详细信息。 - U: (
更新): 使用 ASP.NET Core、Blazor、EF 和 Web API 更新数据库中的学生详细信息。 - D: (
删除): 使用 ASP.NET Core、Blazor、EF 和 Web API 从数据库中删除学生详细信息。
我们将使用 Web API 和 EF 来执行我们的 CRUD 操作。Web API 具有以下四个方法：Get/Post/Put 和 Delete，其中：
Get用于请求数据（Select）Post用于创建数据（Insert）Put用于更新数据 (Update)Delete用于删除数据 (Delete)
背景
必备组件
请确保您已在计算机上安装了所有必备软件。如果没有，请逐一下载并安装。请注意，由于 Blazor 是一个新框架，我们必须安装 Visual Studio 2017 (15.7) 或更高版本的预览版。
- 安装 .NET Core 2.1 预览版 2 SDK。（您可以在此 链接 中找到所有版本）
- 安装 Visual Studio 2017 (15.7) 的最新预览版。
- 为 Blazor 扩展安装 ASP.NET Core Blazor 语言服务。
Using the Code
步骤 1 - 创建数据库和表
我们将使用我们的 SQL Server 数据库作为 WEB API 和 EF 的后端。首先，我们创建一个名为 StudentsDB 的数据库和一个名为 StudentMaster 的表。以下是用于创建数据库表和在表中插入示例记录的 SQL 脚本。在您的本地 SQL Server 中运行以下查询，以创建将在我们的项目中使用到的数据库和表。
USE MASTER
GO
-- 1) Check for the Database Exists .If the database is exist then drop and create new DB
IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'StudentsDB' )
DROP DATABASE StudentsDB
GO
CREATE DATABASE StudentsDB
GO
USE StudentsDB
GO
-- 1) //////////// StudentMasters
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'StudentMasters' )
DROP TABLE StudentMasters
GO
CREATE TABLE [dbo].[StudentMasters](
[StdID] INT IDENTITY PRIMARY KEY,
[StdName] [varchar](100) NOT NULL,
[Email] [varchar](100) NOT NULL,
[Phone] [varchar](20) NOT NULL,
[Address] [varchar](200) NOT NULL
)
-- insert sample data to Student Master table
INSERT INTO [StudentMasters] ([StdName],[Email],[Phone],[Address])
VALUES ('Shanu','syedshanumcain@gmail.com','01030550007','Madurai,India')
INSERT INTO [StudentMasters] ([StdName],[Email],[Phone],[Address])
VALUES ('Afraz','Afraz@afrazmail.com','01030550006','Madurai,India')
INSERT INTO [StudentMasters] ([StdName],[Email],[Phone],[Address])
VALUES ('Afreen','Afreen@afreenmail.com','01030550005','Madurai,India')
select * from [StudentMasters]
步骤 2 - 创建 ASP.NET Core Blazor 应用程序
在安装完上面列出的所有必备软件和 ASP.NET Core Blazor 语言服务后，请在您的桌面上点击“开始”->“程序”->“Visual Studio 2017”->“Visual Studio 2017”。点击“新建”->“项目”。选择“Web”->“ASP.NET Core Angular Web Application”。输入您的项目名称，然后点击“确定”。
选择 Blazor (ASP.NET Core hosted)，然后单击“确定”。
创建 ASP.NET Core Blazor 应用程序后，请等待几秒钟。您将在解决方案资源管理器中看到以下结构。
ASP.NET Core Blazor 解决方案有什么新内容？
当我们创建一个新的 ASP.NET Core Blazor 应用程序时，我们可以在解决方案资源管理器中看到会自动创建 3 个项目。
客户端项目
第一个项目是客户端项目，名称为 Solutionname.Client，其中 Solutionname 是“BlazorASPCORE”。由于该项目命名为客户端，因此该项目主要专注于所有客户端视图。在这里，我们将添加所有将在浏览器中显示的客户端视图页面。
我们可以看到这里已经添加了一些示例页面，并且还有一个共享文件夹，这与我们的 MVC 应用程序中的情况类似，我们会有 Sharedfolder 和用于主页的 Layout 页面。在 Blazor 中，我们有 MainLayout，它将充当主页，NavMenu 用于左侧菜单显示。
服务器项目
顾名思义，此项目将用作服务器项目。该项目主要用于创建我们所有的 Controller 和 WEB API Controller，以执行所有业务逻辑并通过 WEB API 执行 CRUD 操作。在我们的演示应用程序中，我们将在该服务器项目中添加一个 Web API，并在我们的客户端应用程序中添加所有 WEB API。此服务器项目将充当从数据库 get/set 数据，而我们的客户端项目将数据或结果发送到该服务器以在数据库中执行 CRUD 操作。
共享项目
顾名思义，此项目充当共享项目。此项目将作为我们服务器项目和客户端项目的模型。在此共享项目中声明的模型将在服务器项目和客户端项目中使用。我们还将所有项目所需的包安装在此处，例如，要使用 Entity Framework，我们将所有包都安装在此共享项目中。
运行以测试应用程序
当我们运行应用程序时，可以看到左侧是导航，右侧是数据。我们可以看到默认的示例页面和菜单将显示在我们的 Blazor 网站上。我们可以使用这些页面，也可以删除它们并开始创建自己的页面。
现在让我们看看如何添加新页面以执行 CRUD 操作来维护 student 详细信息。
使用 Entity Framework
要在我们的 Blazor 应用程序中使用 Entity Framework，我们需要安装以下包
安装包
转到 **工具**，然后选择 -> **NuGet 包管理器** -> **程序包管理器控制台**。
您会在 VS 2017 IDE 的底部看到控制台，在控制台组合框的右侧，将默认项目选择为我们的共享项目“**Select Shared**”。
- 您将看到 PM>，然后复制并粘贴下面的行以安装数据库提供程序包。此包用于将数据库提供程序设置为 SQL Server。
<font color="#000000" face="Calibri" size="3"> Install-Package Microsoft.EntityFrameworkCore.SqlServer</font>
我们可以看到包已安装在我们的共享文件夹中。
安装 Entity Framework。
- 您将看到 PM>，然后复制并粘贴下面的行以安装 EF 包。
Install-Package Microsoft.EntityFrameworkCore.Tools
- 您会看到 PM>，然后复制并粘贴以下行来设置连接字符串并创建 DB Context。这是一个重要部分，因为我们需要提供 SQL Server 名称、数据库名称、SQL Server 用户 ID 和 SQL Server 密码来连接到我们的数据库以执行 CRUD 操作。我们还需要提供 SQL 表名称来在我们的共享项目中创建
Model类。Scaffold-DbContext "Server= YourSqlServerName;Database=StudentsDB; user id= YourSqlUID;password= YourSqlPassword;Trusted_Connection=True; MultipleActiveResultSets=true" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models -Tables StudentMasters
按 Enter 创建连接字符串、模型类和数据库上下文。
我们将在共享项目中看到已创建
StudentMasters Model类和StudentsDBContext类。我们将在服务器项目中使用此Model和DBContext来创建我们的 Web API 以执行 CRUD 操作。
创建用于 CRUD 操作的 Web API
要创建我们的 WEB API 控制器，请右键单击“Controllers”文件夹。单击“添加新控制器”。
在这里，我们将使用 `Scaffold` 方法来创建我们的 WEB API。我们选择“带有操作的 API 控制器，使用 Entity Framework”。
从共享项目中选择我们的 `Model` 和 `DatabaseContext`。
从共享项目中选择我们的 StudentMasters 模型以执行 CRUD 操作。
选择数据上下文类作为共享项目中的 StudentsDBContext。我们的 Controller 名称将自动添加。如果需要，您可以更改它，然后点击 ADD。
我们的 WEB API 将自动创建包含 Get/Post/Put 和 Delete 方法以执行 CRUD 操作，我们现在无需在 Web API 中编写任何代码，因为我们使用了 Scaffold 方法为所有操作和方法添加了代码。
要测试 Get 方法，我们可以运行我们的项目并复制 GET 方法的 API 路径。在这里，我们可以看到获取数据的 API 路径为 api/StudentMasters/。
运行程序并粘贴 API 路径以测试我们的输出。
现在，我们将把所有这些 WEB API 的 JSON 结果绑定到我们 Client 项目的视图页面。
处理客户端项目
首先，我们需要添加新的 Razor 视图页面。
添加 Razor 视图
要添加 Razor 视图页面，请右键单击 `Client` 项目中的 _Pages_ 文件夹。单击“添加”>>“新建项”。
选择 Razor View >> 输入您的页面名称。在这里，我们将其命名为 _Students.chtml_。
在 Razor 视图页面中，我们有 3 部分代码：第一部分是导入部分，我们在此导入所有需要在视图中使用的引用和模型；第二部分是 HTML 设计和数据绑定部分；最后，我们有函数部分，用于调用所有 Web API 将数据绑定到我们的 HTML 页面，并执行将在视图页面中显示的前端业务逻辑。
导入部分
首先，我们在 Razor 视图页面中导入所有必需的支持文件和引用。在这里，我们首先导入了要在视图中使用的 Model 类，并且还导入了 HTTPClient 用于调用 Web API 来执行 CRUD 操作。
@using BLAZORASPCORE.Shared
@using BLAZORASPCORE.Shared.Models
@page "/Students"
@using Microsoft.AspNetCore.Blazor.Browser.Interop
@inject HttpClient Http
HTML 设计和数据绑定部分
接下来，我们设计 Student 详细信息页面，以显示来自数据库的 student 详细信息，并创建一个表单用于 插入 和 更新 Student 详细信息。我们还有一个 Delete 按钮用于从数据库中删除 student 记录。
在 Blazor 中进行绑定，我们使用 bind="@stds.StdId"，调用方法使用 onclick="@AddNewStudent"。
<h1> ASP.NET Core BLAZOR CRUD demo for Studetns</h1>
<hr />
<table width="100%" style="background:#05163D;color:honeydew">
<tr>
<td width="20"> </td>
<td>
<h2> Add New Student Details</h2>
</td>
<td> </td>
<td align="right">
<button class="btn btn-info" onclick="@AddNewStudent">Add New Student</button>
</td>
<td width="10"> </td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
<hr />
<form>
<table class="form-group">
<tr>
<td>
<label for="Name" class="control-label">Student ID</label>
</td>
<td>
<input type="text" class="form-control" bind="@stds.StdId" readonly />
</td>
<td width="20"> </td>
<td>
<label for="Name" class="control-label">Student Name</label>
</td>
<td>
<input type="text" class="form-control" bind="@stds.StdName" />
</td>
</tr>
<tr>
<td>
<label for="Email" class="control-label">Email</label>
</td>
<td>
<input type="text" class="form-control" bind="@stds.Email" />
</td>
<td width="20"> </td>
<td>
<label for="Name" class="control-label">Phone</label>
</td>
<td>
<input type="text" class="form-control" bind="@stds.Phone" />
</td>
</tr>
<tr>
<td>
<label for="Name" class="control-label">Address</label>
</td>
<td>
<input type="text" class="form-control" bind="@stds.Address" />
</td>
<td width="20"> </td>
<td></td>
<td>
<button type="submit" class="btn btn-success"
onclick="@(async () => await AddStudent())" style="width:220px;">Save</button>
</td>
</tr>
</table>
</form>
<table width="100%" style="background:#0A2464;color:honeydew">
<tr>
<td width="20"> </td>
<td>
<h2>Student Details</h2>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
@if (student == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Student ID</th>
<th>Student Name</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
</tr>
</thead>
<tbody>
@foreach (var std in student)
{
<tr>
<td>@std.StdId</td>
<td>@std.StdName</td>
<td>@std.Email</td>
<td>@std.Phone</td>
<td>@std.Address</td>
<td><button class="btn btn-primary"
onclick="@(async () => await EditStudent(@std.StdId))"
style="width:110px;">Edit</button></td>
<td><button class="btn btn-danger"
onclick="@(async () => await DeleteStudent(@std.StdId))">Delete</button></td>
</tr>
}
</tbody>
</table>
}
函数部分
Function 部分用于调用所有 Web API 将数据绑定到我们的 HTML 页面，并执行将在视图页面中显示的前端业务逻辑。在此 Function 中，我们为 Add、Edit 和 Delete student 详细信息创建单独的 function，并调用 Web API 的 Get、Post、Put 和 Delete 方法来执行 CRUD 操作，并在 HTML 中调用所有 function 并绑定结果。
@functions {
StudentMasters[] student;
StudentMasters stds = new StudentMasters();
string ids = "0";
bool showAddrow = false;
protected override async Task OnInitAsync()
{
student = await Http.GetJsonAsync<StudentMasters[]>("/api/StudentMasters/");
}
void AddNewStudent()
{
stds = new StudentMasters();
}
// Add New Student Details Method
protected async Task AddStudent()
{
if (stds.StdId == 0)
{
await Http.SendJsonAsync(HttpMethod.Post, "/api/StudentMasters/", stds);
}
else
{
await Http.SendJsonAsync(HttpMethod.Put, "/api/StudentMasters/" + stds.StdId, stds);
}
stds = new StudentMasters();
student = await Http.GetJsonAsync<StudentMasters[]>("/api/StudentMasters/");
}
// Edit Method
protected async Task EditStudent(int studentID)
{
ids = studentID.ToString();
stds = await Http.GetJsonAsync<StudentMasters>
("/api/StudentMasters/" + Convert.ToInt32(studentID));
}
// Delte Method
protected async Task DeleteStudent(int studentID)
{
ids = studentID.ToString();
await Http.DeleteAsync("/api/StudentMasters/" + Convert.ToInt32(studentID));
// await Http.DeleteAsync("/api/StudentMasters/Delete/" + Convert.ToInt32(studentID));
student = await Http.GetJsonAsync<StudentMasters[]>("/api/StudentMasters/");
}
}
导航菜单
现在我们需要将这个新添加的 Students Razor 页面添加到我们的左侧导航。要添加此页面，请打开共享文件夹并打开 NavMenu.cshtml 页面，然后添加菜单。
<li class="nav-item px-3">
<NavLink class="nav-link" href="/Students">
<span class="oi oi-list-rich" aria-hidden="true"></span> Students Details
</NavLink>
</li>
构建并运行应用程序
关注点
请注意，在创建 DBContext 和设置连接字符串时，不要忘记添加您的 SQL 连接字符串。希望大家喜欢这篇文章，在下一篇文章中，我们将看到更多使用 Blazor 的示例，使用 Blazor 进行开发真的非常酷和棒。
历史
- 2018-05-18: BLAZORASPCORE.zip