ASP.NET Core 6.0 Blazor Server APP 和 MySQL 数据库操作
5.00/5 (2投票s)
ASP.NET Core 6.0 中的 Blazor Server APP
引言
Blazor 是微软推出的一款框架。我喜欢使用 Blazor，因为它使我们的 SPA 全栈应用程序开发变得更加简单，是的，现在我们可以只使用一种语言 C#。在 Blazor 之前，我们使用 ASP.NET Core 配合 Angular 或 ReactJS。现在，借助 Blazor 的支持，我们可以直接使用 C# 代码创建自己的 SPA 应用程序。
我们可以开发两种不同类型的 Blazor 应用程序
- Blazor Server App，以及
- Blazor WebAssembly
Blazor WebAssembly
WebAssembly 或 WASM 在客户端运行。WebAssembly 是开放的 Web 标准，无需任何插件即可在浏览器中运行。WASM 使用 JavaScript 互操作性来访问浏览器的全部功能。这里，我们可以看到 ASP.NET Core WASM 应用程序的结构，因为解决方案中只有客户端开发，其结构与 ASP.NET Core Angular 独立模板相同。对于任何服务器端业务逻辑或使用数据库，我们需要创建一个 ASP.NET Core WEB API 或其他服务器端项目，并将服务器端数据绑定到 WASM 应用程序。
Blazor Server
Blazor Server 在 ASP.NET 服务器上运行，这意味着它在服务器端运行。Blazor Server App 使用 Signal R 将更新持续推送到客户端。所有 JavaScript 调用、UI 更新以及所有应用程序事件处理都通过 Signal R 和 WebSocket 协议连接进行。Blazor Server 应用比 WASM 速度更快，因为下载大小比 WASM 应用程序要小。这里，我们可以看到 ASP.NET Core Blazor Server 应用程序的结构，因为解决方案中有一个Data 文件夹，我们可以在其中编写所有服务器端业务逻辑，并使用服务执行与数据库相关的连接。
背景
这里，我使用了 MySQL 作为数据库，您可以免费下载 Visual Studio 和 MySQL Community Edition，然后开始您的开发。
请确保您的计算机上已安装所有先决条件。如果没有，请下载并全部安装。
Using the Code
MySQL 部分
创建数据库和表
这里，我们使用 MySQL Workbench 创建一个名为 customer 的数据库，并创建一个名为 custmaster 的表。
创建存储过程
让我们创建一个存储过程，通过客户姓名和客户电子邮件进行搜索和获取客户详细信息。
CREATE DEFINER=`shanu`@`%` PROCEDURE `sp_custGet`(IN CustName varchar(50),
IN Email varchar(50) )
BEGIN
Select CustCd,
CustName,
Email,
PhoneNo,
Address
FROM customer.custmaster
WHERE
CustName LIKE CONCAT('%', CustName , '%')
AND
Email LIKE CONCAT('%', Email , '%') ;
END
要在 MySQL 中测试存储过程，我们使用下面的代码作为调用，并使用存储过程名称，现在我们为 custname 和 email 传递空参数。
Blazor 部分
安装完以上所有先决条件后，点击桌面上的 **开始** >> **程序** >> **Visual Studio 2022** >> **Visual Studio 2022**。点击 **新建** >> **项目**。
搜索 **Blazor Server App** 项目，然后点击 **下一步**。
输入您的项目名称并点击 下一步。
选择 .NET 6.0，然后点击 Next 创建您的 Blazor 应用程序。
步骤 2：连接字符串
打开 appsettings.json 文件，并添加 MySQL 连接字符串。
注意：添加您的 MySQL 服务器 ID 详细信息。
步骤 3：安装包
为了在我们的 Blazor 应用程序中使用 MySQL 数据库，这里我们安装下面提到的包
MySqlConnector
Microsoft.EntityFrameworkCore
步骤 4：创建模型类
接下来，我们需要创建 Model 类，以便在我们的应用程序中使用以绑定客户详细信息。
让我们从解决方案中创建一个名为 Models 的新文件夹，然后右键单击创建的 Models 文件夹，创建一个名为“CustMaster.cs”的新类文件。
在类中，我们添加属性字段名称，该名称与下面的代码相同
public class custmaster
{
public string CustCd { get; set; }
public string CustName { get; set; }
public string Email { get; set; }
public string PhoneNo { get; set; }
public string Address { get; set; }
}
步骤 5：创建 MySQL 连接类
现在让我们创建 MySQL 连接类，为此，让我们创建一个类文件。
右键单击创建的 Models 文件夹，创建一个名为 mySQLSqlHelper.cs 的新类文件。
using MySqlConnector;
namespace BlazorMysql.Models
{
public class mySQLSqlHelper
{
//this field gets initialized at Startup.cs
public static string conStr;
public static MySqlConnection GetConnection()
{
try
{
MySqlConnection connection = new MySqlConnection(conStr);
return connection;
}
catch (Exception e)
{
Console.WriteLine(e);
throw;
}
}
}
}
现在打开 Program.cs 文件，让我们将 appsetting.json 中的连接字符串分配给 mysqlHelper constring 变量，以便连接到 MySQL。
using BlazorMysql.Data;
using BlazorMysql.Models;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
var builder = WebApplication.CreateBuilder(args);
mySQLSqlHelper.conStr = builder.Configuration["ConnectionStrings:DefaultConnection"];
步骤 6：创建客户 MySQL 连接类
右键单击解决方案中的 Data 文件夹，然后添加一个名为 custConnections.cs 的新类。
在这个类中，我们创建 GetCustDetails 来连接数据库，通过调用存储过程并传递所需参数来获取客户详细信息，然后将其返回到我们的 Service 列表。
using BlazorMysql.Models;
using MySqlConnector;
using System.Data;
namespace BlazorMysql.Data
{
public class custConnectoins
{
public async Task<custmaster[]> GetCustDetails(string CustName, String Email)
{
List<custmaster> list = new List<custmaster>();
using (MySqlConnection conn = mySQLSqlHelper.GetConnection())
{
conn.Open();
using (MySqlCommand cmd = new MySqlCommand("sp_custGet", conn))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add(new MySqlParameter
{
ParameterName = "@CustNames",
DbType = DbType.String,
Value = CustName,
Direction = ParameterDirection.Input,
});
cmd.Parameters.Add(new MySqlParameter
{
ParameterName = "@Emails",
DbType = DbType.String,
Value = Email,
Direction = ParameterDirection.Input,
});
using (MySqlDataReader reader = cmd.ExecuteReader())
{
while (reader.Read())
{
list.Add(new custmaster()
{
CustCd = reader.GetInt32("CustCd"),
CustName = reader.GetString("CustName"),
Email = reader.GetString("Email"),
PhoneNo = reader.GetString("PhoneNo"),
Address = reader.GetString("Address"),
});
}
}
}
}
return list.ToArray();
}
}
}
步骤 7：使用 Service 类
接下来，我们创建 custMasterDetailSerivce.cs 类，并添加一个名为 GetCustDetails 的函数，以便将结果绑定到我们的 Blazor 应用。
using BlazorMysql.Models;
namespace BlazorMysql.Data
{
public class custMasterDetailSerivce
{
custConnectoins objUsers = new custConnectoins();
public async Task<custmaster[]> GetCustDetails(string CustName, String Email)
{
custmaster[] custsObjs;
custsObjs = objUsers.GetCustDetails(CustName, Email).Result.ToArray();
return custsObjs;
}
}
}
步骤 8：添加 Service
我们需要将我们创建的服务添加到 Program.cs 类中。
builder.Services.AddSingleton<custMasterDetailSerivce>();
步骤 9：使用客户端项目
首先，我们需要添加 Razor 组件页面。
添加 Razor 组件。
要添加 Razor Component 页面，请右键单击解决方案中的 Pages 文件夹。点击 **添加** >> **新项** >> **选择 Razor Component** >> 输入您的组件名称，这里我们命名为 Customer.razor。
注意：所有组件文件都需要以* .razor*为扩展名。
在 Razor Component 页面中，我们有三个代码部分：第一个是 Import 部分，我们导入所有需要的引用和模型供组件使用；第二个是 HTML 设计和数据绑定部分；最后，我们有函数部分，用于注入和调用服务以绑定到我们的 HTML 页面，并执行要在 Component 页面中显示的前端业务逻辑。
导入部分
首先，我们在 Razor 视图页面中导入所有需要的支持文件和引用。这里，我们首先导入了要在视图中使用的 Model 和 service 类。
@page "/Customer"
@using BlazorMysql.Models
@using BlazorMysql.Data
@inject custMasterDetailSerivce CustomerService
HTML 设计和数据绑定部分
在设计部分，我们将结果绑定到表格，并设计了一个带有按钮的搜索部分。
<h1>Customer Details</h1>
<table >
<tr style="height: 30px; background-color:#336699 ;
color:#FFFFFF ;border: solid 1px #659EC7;">
<td colspan="5" align="left">
Search Customer
</td>
</tr>
<tr>
<td>Cust Code:</td>
<td>
<input class="input-group-text" type="text" @bind-value="@CustName" />
</td>
<td>Cust Name:</td>
<td>
<input class="input-group-text" type="text" @bind-value="@Email" />
</td>
<td>
<input type="button" class="btn btn-primary"
value="Search" @onclick="@searchDetails" />
</td>
</tr>
</table>
<hr />
@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>
<th>Address</th>
</tr>
</thead>
<tbody>
@foreach (var cuDetails in custDetails)
{
<tr>
<td>@cuDetails.CustCd</td>
<td>@cuDetails.CustName</td>
<td>@cuDetails.Email</td>
<td>@cuDetails.PhoneNo</td>
<td>@cuDetails.Address</td>
</tr>
}
</tbody>
</table>
}
函数部分
函数部分用于获取 Service 结果并将其绑定到数组，我们创建了一个函数，用于在单击按钮时搜索并绑定结果。
这里，我们首先声明一个客户 Array 来获取绑定结果，并声明搜索变量。
在 OnInitializedAsync 中，我们获取 CustomerService 结果，并将结果绑定到 ItemsArrays。
@code {
String CustName = "";
String Email = "";
private custmaster[]? custDetails;
protected override async Task OnInitializedAsync()
{
custDetails = await CustomerService.GetCustDetails(CustName,Email);
}
//SearchCustomer
async Task searchDetails()
{
custDetails = await CustomerService.GetCustDetails(CustName,Email);
}
}
导航菜单
现在，我们需要将这个新添加的客户 Razor 页面添加到我们的左侧导航。要添加此项，请打开 Shared 文件夹并打开 NavMenu.cshtml 页面，然后添加菜单。
<div class="nav-item px-3">
<NavLink class="nav-link" href="Customer">
<span class="oi oi-list-rich" aria-hidden="true"></span> Customer
</NavLink>
</div>
构建并运行应用程序
关注点
希望本文能帮助您了解如何开始使用 ASP.NET Core 6.0 和 Blazor 应用程序，并通过搜索功能与 MySQL 数据库配合使用。
历史
- 2022 年 10 月 11 日：初始版本