使用Entity Framework和Web API的ASP.NET Core Blazor CRUD

xiaoxiao2022-07-03 120

介绍

背景

先决条件

使用代码

第1步——创建数据库和表

第2步——创建ASP.NET Core Blazor应用程序

ASP.NET Core Blazor解决方案的新增功能是什么？

客户端项目

服务端项目

共享项目

运行以测试应用程序

使用实体框架

安装包

为CRUD操作创建Web API

使用客户端项目

添加Razor视图

导入部分

HTML设计和数据绑定部分

Function部分

导航菜单

构建并运行应用程序

下载源代码 - 1.7 MB

介绍

在本文中，我们将了解如何使用Entity Framework和Web API为ASP.NET Core Blazor创建一个简单的CRUD应用程序。Blazor是Microsoft推出的新框架。我喜欢使用Blazor，因为这使我们的SPA全栈应用程序开发更简单，是的，现在我们只能使用一种语言如C＃。在Blazor之前，我们一直在使用ASP.NET Core和Angular或ReactJs的组合，现在在Blazor支持的帮助下，我们可以直接用C＃Code创建我们自己的SPA应用程序。如果你使用Blazor开始你的SPA应用程序开发，肯定你会喜欢它，与Blazor一起工作更加简单有趣。我们现在唯一的缺点就是Blazor是新引入的框架，它仍处于试验阶段，一旦我们得到完整版本，使用应用程序开发会更有趣。

在本文中，我们将了解如何使用ASP.NET Core Blazor创建CRUD Web应用程序。

C :( Create）：使用ASP.NET Core，Blazor，EF和Web API将新的学生详细信息插入到数据库中。R :( Read）：使用ASP.NET Core，Blazor，EF和Web API从数据库中选择学生详细信息。U :( Update）：使用ASP.NET Core，Blazor，EF和Web API将学生详细信息更新到数据库D :( Delete）：使用ASP.NET Core，Blazor，EF和Web API从数据库中删除学生详细信息。

我们将使用Web API和EF来执行我们的CRUD操作。网络API有以下四种方法为Get/ Post/ Put和Delete，其中：

Get是请求数据（Select）Post是创建数据（Insert）Put是更新数据（Update）Delete是删除数据（Delete）

背景

先决条件

确保在您的计算机中已安装了所有先决条件。如果没有，则逐个下载并安装所有内容。请注意，由于Blazor是新框架，我们必须安装Visual Studio 2017（15.7）或更高版本的预览。

安装.NET Core 2.1 Preview 2 SDK。（您可以从此链接中找到所有版本）

安装Visual Studio 2017（15.7）的最新预览。

为Blazor Extensions 安装ASP.NET Core Blazor语言服务。

使用代码

第1步——创建数据库和表

我们将为我们的WEB API和EF使用SQL Server数据库。首先，我们创建一个名为StudentsDB的数据库和一个名为StudentMaster 的表。这是在我们的表中创建数据库表和示例记录insert查询的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托管），然后单击“确定”。

创建ASP.NET Core Blazor应用程序后，请等待几秒钟。您将在解决方案资源管理器中看到以下结构。

ASP.NET Core Blazor解决方案的新增功能是什么？

当我们创建新的ASP.NET Core Blazor应用程序时，我们可以看到将在解决方案资源管理器中自动创建3个项目。

客户端项目

第一个项目是作为客户项目创建的，它将像我们的Solutionname.Client一样，在这里我们可以看到我们的Solutionname是“ BlazorASPCORE”。由于项目被命名为客户端，因此该项目将主要针对所有客户端视图。在这里，我们将添加所有页面视图以在浏览器中显示在客户端。

我们可以看到一些示例页面已经被添加在这里，我们还可以看到一个共享文件夹，它与我们的MVC应用程序相同，其中的母版页具有Sharedfolder与Layout页面。在这里，在Blazor中，我们有MainLayout，它将母版页面和NavMenu左侧菜单显示。

服务端项目

顾名思义，该项目将用作服务端项目。该项目主要用于创建所有控制器和WEB API控制器，以执行所有业务逻辑并使用WEB API执行CRUD操作。在我们的演示应用程序中，我们将在此服务端项目中添加Web API，并在我们的客户端应用程序中添加所有WEB API。此服务端项目的工作方式与从数据库get/ set数据和从客户端项目get/ set数据类似，我们将结果绑定或发送到此服务器以在数据库中执行CRUD操作。

共享项目

顾名思义，这个项目就像一个共享项目。该项目用作我们的服务端项目和客户端项目的模型(Model)。在此共享项目中声明的模型(Model)将在服务端项目和客户端项目中使用。我们还在这里安装了项目所需的所有软件包，例如，为了使用Entity Framework，我们在这个共享项目中安装了所有软件包。

运行以测试应用程序

当我们运行应用程序时，我们可以看到左侧有导航，右侧包含数据。我们可以看到默认的示例页面和菜单将显示在我们的Blazor网站上。我们可以使用这些页面或将其删除，然后从我们自己的页面开始。

现在让我们看看如何添加新页面执行CRUD操作以维护student细节。

使用实体框架

要在我们的Blazor应用程序中使用Entity Framework，我们需要安装以下软件包：

安装包

转到Tools，然后选择 - > NuGet Package Manager - > Package Manager Console。

您可以在VS 2017 IDE的底部和控制台上的组合框的右侧看到控制台，选择默认项目作为共享项目“选择共享 ”。

1、您可以看到PM>并复制和粘贴以下行以安装数据库提供程序包。此包用于将数据库提供程序设置为SQL Server。

<font color="#000000" face="Calibri" size="3"> Install-Package Microsoft.EntityFrameworkCore.SqlServer</font>

我们可以看到包已安装在我们的共享文件夹中。

安装实体框架。

2、您可以看到PM>并复制和粘贴以下行以安装EF包。

Install-Package Microsoft.EntityFrameworkCore.Tools

3、您可以看到PM>并复制和粘贴以下行设置连接字符串并创建数据库上下文。这是一个重要的部分，因为我们提供SQL Server名称，数据库名称和SQL服务器UID和SQL服务器密码以连接到我们的数据库以执行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

按回车键创建连接字符串，模型类和数据库上下文。

我们可以看到已在共享项目中创建了StudentMasters Model类和StudentsDBContext类。我们将在服务器项目中使用此Model与DBContext来创建我们的Web API执行CRUD操作。

为CRUD操作创建Web API

要创建我们的WEB API控制器，请右键单击Controllers文件夹。单击添加新控制器。

在这里，我们将使用Scaffold方法来创建我们的WEB API。我们使用Entity Framework选择带有操作的API控制器。

从共享项目中选择我们的Model和DatabaseContext。

从共享项目中选择我们的StudentMasters模型以执行CRUD操作。

从共享项目中选择数据上下文类作为我们的StudentsDBContext。我们的Controller名字将自动添加。如果需要，可以更改它并单击ADD。

我们将被自动创建执行CRUD操作的Get/ Post/ Put和Delete方法的WEB API ，而我们现在不需要在WEB API中编写任何代码，因为我们已经为所有操作方法使用了Scaffold方法，并添加了代码。

为了测试Get方法，我们可以运行我们的项目并复制GET方法API路径。在这里，我们可以看到获取api / StudentMasters /的 API路径。

运行程序并粘贴API路径以测试输出。

现在，我们将把所有这些WEB API Json结果绑定到我们Client项目的视图页面中。

使用客户端项目

首先，我们需要添加新的Razor视图页面。

添加Razor视图

要添加Razor视图页面，请右键单击Client项目中的Pages文件夹。单击添加>>新项目。

选择Razor View >>输入您的页面名称。在这里，我们将名称命名为Students.chtml。

在Razor视图页面中，我们有3部分代码，首先是导入部分，我们导入所有引用和模型，以便在视图、HTML设计和数据绑定部分中使用，最后，我们有函数部分来调用HTML页面中的所有Web API进行绑定，并执行客户端业务逻辑，以便在视图页面中显示。

导入部分

首先，我们在Razor视图页面中导入所有需要的支持文件和引用。在这里，我们首先导入了要在视图中使用的Model类，并且还导入了用于调用Web API以执行CRUD操作的HTTPClient类。

@using BLAZORASPCORE.Shared @using BLAZORASPCORE.Shared.Models @page "/Students" @using Microsoft.AspNetCore.Blazor.Browser.Interop @inject HttpClient Http

HTML设计和数据绑定部分

接下来，我们设计我们的Student详细信息页面显示从数据库中的student细节，并创建一个表单，Insert和update Student细节。我们还有从数据库中删除student记录的Delete按钮。

对于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部分

function部分调用所有Web API以在我们的HTML页面中绑定，并执行客户端业务逻辑以在View页面中显示。在此Function中，我们创建了一个独立的function来Add、Edit和Delete student的详细信息，并调用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>

构建并运行应用程序

原文地址：https://www.codeproject.com/Articles/1244729/ASP-NET-Core-Blazor-CRUD-using-Entity-Framework-an

最新回复(0)