ASP.NET Core Blazor 和 EF Core 使用原生 SQL 查询存储过程
3.91/5 (5投票s)
创建 SP 以在 Blazor 应用程序中搜索和绑定客户详细信息。
引言
在本文中，我们将详细介绍如何在 ASP.NET Core Blazor 应用程序中使用 Entity Framework Core 的原生 SQL 查询来执行存储过程。
原生 SQL 查询对所有关系数据库都非常有用，因为它可以返回常规实体类型或无键实体类型。如果我们处理的是包含大量关系表和许多页面的大型数据库，我们需要通过连接多个表来绑定和显示表详细信息。例如，如果我们想显示销售报告，在这种情况下，我们需要连接多个表，如公司主数据、工厂主数据、客户主数据、物料主数据、生产结果和销售结果。在这种情况下，最佳选择是将其制作成存储过程。此外，有时很难在一个存储过程中为多个连接定义实体。在这些情况下，我们可以使用原生 SQL 查询，而不必定义实体，直接执行存储过程并将结果绑定到我们的 Blazor 应用程序中。
在本文中，我们将介绍如何创建一个存储过程，使用 EF Core 的原生 SQL 查询来搜索和绑定客户详细信息到我们的 Blazor 应用程序中，并使用搜索参数执行我们的存储过程。
背景
必备组件
Using the Code
创建数据库和表
我们将使用我们的 SQL Server 数据库作为原生 SQL 查询与存储过程的示例。首先，我们将创建一个名为 CustDB 的数据库和一个名为 CustMasterTBL 的表。以下是创建数据库表和在表中插入示例记录的 SQL 脚本。搜索存储过程。
-- =============================================
-- Author : Shanu
-- Create date : 2020-10-15
-- Description :
-- Latest
-- Modifier : Shanu
-- Modify date : 2020-10-15
-- =============================================
--Script to create DB,Table , sample Insert data and Stored Procedure
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] = 'CustDB' )
DROP DATABASE CustDB
GO
CREATE DATABASE CustDB
GO
USE CustDB
GO
CREATE TABLE [dbo].[CustMasterTBL](
[CustCd] [varchar](20) NOT NULL,
[CustName] [varchar](100) NOT NULL,
[Email] [nvarchar](100) NOT NULL,
[PhoneNo] [varchar](100) NOT NULL,
[InsertBy] [varchar](100) NOT NULL,
[UpdateBy] [varchar](100) NOT NULL
) ON [PRIMARY]
GO
select * from CustMasterTBL
INSERT INTO [dbo].[CustMasterTBL]
([CustCd],[CustName],[Email],[PhoneNo],[InsertBy],[UpdateBy])
VALUES
( 'C001','ACompany','acompany@gmail.com','55555','Shanun','Shanu')
INSERT INTO [dbo].[CustMasterTBL]
([CustCd],[CustName],[Email],[PhoneNo],[InsertBy],[UpdateBy])
VALUES
( 'C002','BCompany','bcompany@gmail.com','2323123123','Afraz','Afraz')
INSERT INTO [dbo].[CustMasterTBL]
([CustCd],[CustName],[Email],[PhoneNo],[InsertBy],[UpdateBy])
VALUES
( 'C003','CCompany','ccompany@gmail.com','786786','Afreen','Afreen')
--Stored procedure
Create PROCEDURE [dbo].[usp_CustDetails]
(
@CustCd VARCHAR(52) = ''
,@CustName VARCHAR(52) = ''
)
AS
SET NOCOUNT ON
SELECT CustCd
,CustName
,Email
,PhoneNo
,InsertBy
,UpdateBy
FROM CustMasterTBL
Where
CustCd like @CustCd + '%'
AND CustName like @CustName + '%'
步骤 1：创建 ASP.NET Core Blazor Server 应用程序
在安装完上述所有必备条件后，在桌面上单击 开始 >> 所有程序 >> Visual Studio 2019 >> Visual Studio 2019。单击 新建 >> 项目。
选择 Blazor 应用 并点击 下一步 按钮。
选择您的项目文件夹并输入您的项目名称，然后点击 创建 按钮。
选择 Blazor Server App
创建 ASP.NET Core Blazor Server 应用程序后，请等待几秒钟。您将在解决方案资源管理器中看到以下结构。
在 Data 文件夹中，我们可以添加所有模型、DBContext 类、服务和控制器，我们将在本文中介绍。
在 Pages 文件夹中，我们可以添加所有组件文件。component 文件都应该具有.razor 扩展名以及文件名。
在 Shared 文件夹中，我们可以添加左侧菜单，从NavMenu.razor 文件中获取，并通过MainLayout.razor 文件更改主内容。
在_Imports.razor文件中，我们可以看到已添加所有导入集，以便在所有组件页面中使用。
在 App.razor 文件中，我们将添加在浏览器中运行应用程序时默认显示的主组件。Appsertings.json 可用于添加连接字符串。
Startup.cs文件是一个重要文件，我们在此文件中添加所有端点，例如控制器端点、HTTP 客户端、添加要在启动Configuration方法中使用的服务和dbcontext。
运行以测试应用程序
当我们运行应用程序时，我们可以看到左侧有导航，右侧包含数据。我们可以看到 Blazor 网站中将显示默认的示例页面和菜单。我们可以使用这些页面，也可以删除它们并从我们自己的页面开始。
步骤 2：安装包
为了使用 Entity Framework Core 和原生 SQL，请安装以下程序包
Microsoft.EntityFrameworkCore
Microsoft.EntityFrameworkCore.SqlServer
右键单击解决方案，然后单击“管理 NuGet 程序包”。搜索所有程序包并安装所有需要的程序包，如下图所示。
安装包后，我们可以在依赖项包中进行确认。
连接字符串
打开 appsettings.json 文件，并设置 SQL 连接字符串。请注意添加您的 SQL 服务器 ID 详细信息。
{
"ConnectionStrings": {
"DefaultConnection": "Server= YourServer ID;Database=CustDB;
user id= SQL UID;password=Sql Password;Trusted_Connection=True;
MultipleActiveResultSets=true"
}
步骤 3：创建模型类
接下来，我们需要创建 Model 类，以便在我们的应用程序中用于绑定客户详细信息。
右键单击 Data 文件夹，然后创建一个名为“CustMasterTBL.cs”的新类文件。
在类中，我们添加的属性字段名与下面的代码相同。
public class CustMasterTBL
{
public string CustCd { get; set; }
public string CustName { get; set; }
public string Email { get; set; }
public string PhoneNo { get; set; }
public string InsertBy { get; set; }
public string UpdateBy { get; set; }
}
创建 DBContext 类
接下来，我们创建一个 DBContext 类，供我们的服务连接 SQL 服务器并使用连接字符串检索数据。我们将 DBContext 类创建为 CustManagementContext.cs。
我们在 DBContext 类中添加以下代码。
public partial class CustManagementContext : DbContext
{
public CustManagementContext(DbContextOptions<CustManagementContext> options)
: base(options)
{
}
public DbSet<ShanuBlazorRawSQL.Data.CustMasterTBL> CustMasterTBL { get; set; }
}
创建服务类
接下来，我们创建 CustMasterTBLService.cs 类，以便通过使用原生 SQL 查询执行存储过程来绑定结果。
首先，我们需要导入
using Microsoft.Data.SqlClient;
using Microsoft.EntityFrameworkCore;
接下来，我们创建 DbContext 对象，以便执行存储过程。
private readonly CustManagementContext _context;
public CustMasterTBLService(CustManagementContext context)
{
_context = context;
}
接下来，我们创建一个 async 方法来返回客户详细信息作为数组，我们还可以看到在此方法中，我们使用 FromSqlRaw 来执行存储过程，并将 CustCD 和 CustName 作为参数。
public async Task<CustMasterTBL[]> GetCustomerAsync(String CustCD, String CustName)
{
CustMasterTBL[] custsObjs;
var CustCDs = CustCD;
var CustNames = CustName;
SqlParameter param1 = new SqlParameter("@CustCd", CustCD);
SqlParameter param2 = new SqlParameter("@CustName", CustName);
custsObjs = _context.CustMasterTBL.FromSqlRaw
("EXECUTE dbo.usp_CustDetails @CustCd,@CustName", param1, param2)
.ToArray();
return custsObjs;
}
步骤 4：将服务和 DbContext 添加到 Startup.cs
我们需要将我们创建的服务添加到Startup.cs的ConfigureServices方法中。
services.AddSingleton<ItemMasterService>();
步骤 5：使用客户端项目
首先，我们需要添加 Razor 组件页面。
添加 Razor 组件
要添加 Razor 组件页面，请右键单击 Client 项目中的 Pages 文件夹。单击 添加 >> 新建项 >> 选择 Razor 组件 >> 输入您的组件名称，此处我们将其命名为 Customer.razor。
注意：所有组件文件都需要以* .razor*为扩展名。
在 Razor 组件页面中，代码分为三个部分：第一部分是导入部分，我们在此导入所有需要的引用和模型；第二部分是 HTML 设计和数据绑定部分；最后是函数部分，用于调用所有 Web API 以在 HTML 页面上绑定数据，以及执行要在 Component 页面上显示的客户端业务逻辑。
导入部分
首先，我们在 Razor 视图页面中导入所有必需的支持文件和引用。此处，我们首先导入了要在视图中使用的模型和类。
@page "/Customer"
@using ShanuBlazorRawSQL.Data
@inject CustMasterTBLService CustomerService
HTML 设计和数据绑定部分
在设计部分，我们将结果绑定到表中，并设计了一个带有按钮的搜索部分。
@if (custDetails == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Customer Code</th>
<th>Customer Name</th>
<th>Email</th>
<th>Phone No</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in custDetails)
{
<tr>
<td>@forecast.CustCd</td>
<td>@forecast.CustName</td>
<td>@forecast.Email</td>
<td>@forecast.PhoneNo</td>
</tr>
}
</tbody>
</table>
}
函数部分
函数部分用于获取服务结果并将其绑定到数组，我们还创建了函数以在单击按钮时进行搜索并将结果绑定。
此处，我们首先声明客户 Array 以获取绑定结果，并声明搜索变量。
在 OnInitializedAsync 中，我们获取 CustomerService 结果并将其绑定到 ItemsArrays。
@code {
CustMasterTBL[] custDetails;
String CustCD = "";
String Custname = "";
protected override async Task OnInitializedAsync()
{
custDetails = await CustomerService.GetCustomerAsync(CustCD,Custname);
}
//SearchCustomer
async Task searchDetails()
{
custDetails = await CustomerService.GetCustomerAsync(CustCD,Custname);
}
}
导航菜单
现在，我们需要将这个新添加的 DrawingSample Razor 页面添加到我们的左侧导航栏。为此，请打开 Shared 文件夹并打开 NavMenu.cshtml 页面，然后添加菜单。
<li class="nav-item px-3">
<NavLink class="nav-link" href="Customer">
<span class="oi oi-list-rich" aria-hidden="true"></span> Customer
</NavLink>
</li>
构建并运行应用程序
关注点
在本文中，我们学习了如何在 ASP.NET Core Blazor 应用程序中使用 Entity Framework Core 的原生 SQL 查询来调用存储过程。在下一篇文章中，我们将学习如何使用存储过程和 Entity Framework Core 的原生 SQL 查询来实现 CRUD 功能。
历史
- 2020年10月15日：初始版本