目录
介绍
Blazo是微软推出的框架。我喜欢使用Blazor，因为这让我们的SPA全栈应用程序开发更简单，是的，现在我们只能使用一种语言C#。在Blazor之前，我们使用ASP.NET Core与Angular或ReactJS的组合。现在，在Blazor支持的帮助下，我们可以直接使用C#代码创建自己的SPA应用程序。
我们可以开发两种不同类型的Blazor应用程序：
- Blazor服务器应用，以及
- Blazor WebAssembly
Blazor WebAssembly
WebAssembly或WASM在客户端运行。WebAssembly是开放的Web标准，可以在不支持任何其他插件的浏览器中工作。WASAM使用JavaScript互操作性来访问浏览器的全部功能。在这里，我们可以看到ASP.NET Core WASAM应用程序的结构，因为该解决方案只有客户端开发与ASP.NET Core Angular独立模板相同的结构。对于任何服务器端业务逻辑或使用数据库，我们需要创建一个 ASP.NET Core WEB API 或其他服务器端项目，并将服务器端数据绑定到WASM应用程序。
Blazor务器
在ASP.NET服务器中运行的Blazor服务器意味着它在服务器端运行。Blazor服务器应用使用Signal R持续将更新推送到客户端。所有JavaScript调用、UI更新和所有应用事件处理都使用Signal R和WebSocket协议连接。Blazor Server应用比WASAM快得多，因为下载大小小于WASM应用程序。在这里，我们可以看到ASP.NET Core Blazor服务器应用程序的结构，因为解决方案具有 Data 文件夹，我们可以在其中编写所有服务器端业务逻辑，并可以使用该服务执行与数据库相关的连接。
背景
在这里，我将数据库用作MySQL，您可以免费下载Visual Studio和MySQL社区版并开始开发。
确保已在计算机上安装所有必备组件。如果没有，请下载并全部安装它们。
使用代码
MySQL部分
创建数据库和表
在这里，使用MySQL工作台，我们创建名为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 服务器应用”项目，然后单击“下一步”。
输入您的项目名称，然后单击下一步。
选择“.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连接类，为此，让我们创建一个类文件。
右键单击创建的模型文件夹，并创建一个新的类文件作为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 中的连接字符串分配给用于连接到MySQL的mysqlHelper constring变量。
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连接类
右键单击解决方案中的“数据”文件夹，然后添加名为 custConnections.cs 的新类。
在此类中，我们创建用于连接到数据库的GetCustDetails，并通过调用具有所需参数传递的Stored过程来获取客户详细信息，并返回到我们的服务列表。
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：使用服务类
接下来，我们创建 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：添加服务
我们需要将我们创建的服务添加到 Program.cs 类中。
builder.Services.AddSingleton<custMasterDetailSerivce>();步骤9：使用客户端项目
首先，我们需要添加“Razor组件”页面。
添加Razor组件。
若要添加“Razor组件”页，请右键单击解决方案中的“Pages”文件夹。单击添加新项目>>>>选择Razor组件>>输入您的组件名称，此处我们将名称命名为Customer.razor。
请注意，所有组件文件都需要将扩展名为.razor。
在Razor组件页面中，我们有三部分代码，首先是导入部分，我们导入所有引用和模型以在组件、HTML设计和数据绑定部分中使用，最后，我们有函数部分注入和调用服务以绑定我们的HTML页面，并执行要在组件页面中显示的客户端业务逻辑。
导入部分
首先，我们在Razor视图页面中导入所有需要的支持文件和引用。在这里，我们首先导入了要在视图中使用的模型和服务类。
@page "/Customer"
@using BlazorMysql.Models
@using BlazorMysql.Data
@inject custMasterDetailSerivce CustomerServiceHTML设计和数据绑定部件
在设计部分，我们将结果绑定到表格中，并且我们还设计了一个带有按钮的搜索部分。
<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>
}函数部分
函数部分获取服务结果并将结果绑定到数组中，我们创建了在单击按钮时搜索和绑定结果的函数。
在这里，首先我们声明客户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页面添加到左侧导航中。要添加它，请打开共享文件夹并打开 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数据库。
https://www.codeproject.com/Articles/5344267/ASP-NET-Core-6-0-Blazor-Server-APP-and-Working-wit
2353
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
