介绍

背景

先决条件

使用代码

第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
GOCREATE DATABASE StudentsDB
GOUSE StudentsDB
GO-- 1)  StudentMastersIF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'StudentMasters' )
DROP TABLE StudentMasters
GOCREATE 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">&nbsp;</td><td><h2> Add New Student Details</h2></td><td>&nbsp;</td><td align="right"><button class="btn btn-info" onclick="@AddNewStudent">Add New Student</button></td><td width="10">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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 Methodprotected 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 Methodprotected async Task EditStudent(int studentID){ids = studentID.ToString();stds = await Http.GetJsonAsync<StudentMasters>("/api/StudentMasters/" + Convert.ToInt32(studentID));}// Delte Methodprotected 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

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD相关推荐

使用VS 2019，.NET Core 3和Web API创建ASP.NET Core Blazor CRUD应用程序
目录介绍 Blazor Blazor客户端应用程序 Blazor服务器应用程序背景先决条件使用代码第1步-创建数据库和表第2步-创建ASP.NET Core Blazor服务器应用程序运 ...
使用Canvas扩展绘制动态ASP.NET Core Blazor条形图
目录介绍背景使用代码步骤1:创建ASP.NET Core Blazor服务器应用程序运行测试应用程序步骤2:安装软件包步骤3:建立模型类别创建服务类步骤4:将服务添加到Startup ...
使用.NET Core 3.0 预览版，Web API和Visual Studio 2019进行ASP.NET Core Blazor游戏开发
目录介绍使用ASP.NET核心Blazor创建这个奇怪的图像输出应用程序应该知道什么? 背景先决条件 Visual Studio 2019 .NET Core 3.0 Preview SDK B ...
用于存储过程的ASP.NET Core Blazor和EF Core原始SQL查询
目录介绍背景先决条件使用代码创建数据库和表步骤1:创建ASP.NET Core Blazor服务器应用程序运行测试应用程序步骤2:安装软件包连接字符串步骤3:建立模型类创建DBC ...
vue.js crud_如何使用VS Code和ADO.NET使用ASP.NET Core执行CRUD操作
vue.js crud 介绍 (Introduction) In this article we are going to create a web application using ASP.NET ...
使用Canvas扩展绘制动态ASP.NET Core Blazor气泡图
目录介绍背景使用代码步骤1:创建ASP.NET Core Blazor服务器应用程序运行测试应用程序步骤2:安装软件包步骤3:创建模型类创建服务类步骤4:将服务添加到Startup. ...
ASP.NET Core Blazor Webassembly 之渐进式应用(PWA)
Blazor支持渐进式应用开发也就是PWA.使用PWA模式可以使得web应用有原生应用般的体验. 什么是PWA PWA应用是指那些使用指定技术和标准模式来开发的web应用,这将同时赋予它们web应用和 ...
ASP.NET Core Blazor Webassembly 之路由
web最精妙的设计就是通过url把多个页面串联起来,并且可以互相跳转.我们开发系统的时候总是需要使用路由来实现页面间的跳转.传统的web开发主要是使用a标签或者是服务端redirect来跳转.那今天来 ...
ASP.NET Core Blazor WebAssembly 之 .NET JavaScript互调
Blazor WebAssembly可以在浏览器上跑C#代码,但是很多时候显然还是需要跟JavaScript打交道.比如操作dom,当然跟angular.vue一样不提倡直接操作dom:比如浏览器的后 ...

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

介绍

背景

先决条件

使用代码

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

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

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

客户端项目

服务端项目

共享项目

运行以测试应用程序

使用实体框架

安装包

为CRUD操作创建Web API

使用客户端项目

添加Razor视图

导入部分

HTML设计和数据绑定部分

Function部分

导航菜单

构建并运行应用程序

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD相关推荐

最新文章

热门文章