使用 C# 和 Blazor 进行全栈开发
Blazor 是將 C# 引入瀏覽器的 Microsoft 試驗(yàn)框架，正好可以填補(bǔ)欠缺的 C# 一環(huán)。如今，C# 程序員可以編寫桌面、服務(wù)器端 Web、云、電話、平板電腦、手表、電視和 IoT 應(yīng)用程序。
Blazor 填補(bǔ)了欠缺的一環(huán)，C# 開發(fā)人員現(xiàn)在可以直接在用戶瀏覽器中共享代碼和業(yè)務(wù)邏輯。對(duì)于 C# 開發(fā)人員來說，這是一項(xiàng)十分強(qiáng)大的功能，可顯著提升工作效率。
本文將展示常見的代碼共享用例。我將展示如何在 Blazor 客戶端和 WebAPI 服務(wù)器應(yīng)用程序之間共享驗(yàn)證邏輯。目前，你不僅要在服務(wù)器中驗(yàn)證輸入，還要在客戶端瀏覽器中驗(yàn)證輸入。新式 Web 應(yīng)用程序的用戶希望獲得準(zhǔn)實(shí)時(shí)反饋。在填寫長窗體并單擊“提交”后僅看到紅色錯(cuò)誤返回的日子已經(jīng)一去不復(fù)返了。
在瀏覽器中運(yùn)行的 Blazor Web 應(yīng)用程序可以與 C# 后端服務(wù)器共享代碼。可以將邏輯放入共享庫中，并在前端和后端使用它。這會(huì)帶來很多好處。
可以將所有規(guī)則都集中放置在一處，并知道只需在一處更新它們。它們的工作方式確實(shí)相同，因?yàn)樗鼈兪窍嗤拇a。
在客戶端和服務(wù)器邏輯并不總是完全相同的情況下，可以節(jié)省大量測(cè)試和故障排除時(shí)間。
也許最值得一提的是，可以在客戶端和服務(wù)器上使用一個(gè)庫進(jìn)行驗(yàn)證。
以前，JavaScript 前端強(qiáng)制開發(fā)人員編寫兩個(gè)版本的驗(yàn)證規(guī)則：一個(gè)是用適用于前端的 JavaScript 編寫，另一個(gè)是用適用于后端的語言編寫。若要嘗試解決這種不匹配問題，需要涉及復(fù)雜的規(guī)則框架和額外的抽象層。使用 Blazor，可以在客戶端和服務(wù)器上運(yùn)行同一.NET Core 庫。
雖然 Blazor 仍是試驗(yàn)框架，但它的進(jìn)展迅速。生成此示例前，請(qǐng)先確保已安裝正確版本的 Visual Studio、.NET Core SDK 和 Blazor 語言服務(wù)。有關(guān)入門步驟，請(qǐng)?jiān)L問 blazor.net。
新建 Blazor 應(yīng)用程序
首先，新建 Blazor 應(yīng)用程序。
在“新建項(xiàng)目”對(duì)話框中，依次單擊“ASP.NET Core Web 應(yīng)用程序”和“確定”，再選擇圖 1 所示對(duì)話框中的“Blazor”圖標(biāo)。單擊“確定”。
這會(huì)創(chuàng)建默認(rèn)的 Blazor 示例應(yīng)用程序。如果已試用過 Blazer，便會(huì)對(duì)此默認(rèn)應(yīng)用程序很熟悉。
圖 1：選擇 Blazor 應(yīng)用程序
新的注冊(cè)窗體將展示驗(yàn)證業(yè)務(wù)規(guī)則的共享邏輯。圖 2 展示了包含“名字”、“姓氏”、“電子郵件地址”和“電話”字段的簡單窗體。
在此示例中，它會(huì)驗(yàn)證所有字段是否都為必填、姓名字段是否有長度上限，以及電子郵件地址和電話字段的格式是否正確。它會(huì)在每個(gè)字段下顯示錯(cuò)誤消息，這些消息會(huì)在用戶鍵入內(nèi)容的同時(shí)更新。最后，只有在沒有錯(cuò)誤的情況下，“注冊(cè)”按鈕才處于啟用狀態(tài)。
圖 2：注冊(cè)窗體
共享庫
所有需要在服務(wù)器和 Blazor 客戶端之間共享的代碼都位于一個(gè)獨(dú)立的共享庫項(xiàng)目中。共享庫包含模型類和非常簡單的驗(yàn)證引擎。模型類保留注冊(cè)窗體中的數(shù)據(jù)字段。該命令如下所示：
{
[RequiredRule]
[MaxLengthRule(50)]
public String FirstName { get; set; }
[RequiredRule]
[MaxLengthRule(50)]
public String LastName { get; set; }
[EmailRule]
public String Email { get; set; }
[PhoneRule]
public String Phone { get; set; }
}
RegistrationData 類繼承自 ModelBase 類，后者包含所有可用于驗(yàn)證規(guī)則并返回綁定到 Blazor 頁面的錯(cuò)誤消息的邏輯。每個(gè)字段都使用映射到驗(yàn)證規(guī)則的屬性進(jìn)行修飾。我選擇了創(chuàng)建非常簡單的模型，它很像實(shí)體框架 (EF) 數(shù)據(jù)注釋模型。此模型的所有邏輯都包含在共享庫中。
ModelBase 類包含 Blazor 客戶端應(yīng)用程序或服務(wù)器應(yīng)用程序可用來確定是否有任何驗(yàn)證錯(cuò)誤的方法。它還會(huì)在此模型更改時(shí)觸發(fā)事件，以便客戶端能夠更新 UI。任何模型類都可以繼承自它，并自動(dòng)獲取所有驗(yàn)證引擎邏輯。
首先，我將在 SharedLibrary 項(xiàng)目中新建 ModelBase 類，如下所示：
{
}
錯(cuò)誤和規(guī)則
現(xiàn)在，我將向 ModelBase 類添加包含驗(yàn)證錯(cuò)誤列表的專用字典。_errors 字典先以字段名稱為鍵，再以規(guī)則名稱為鍵。值是要顯示的實(shí)際錯(cuò)誤消息。
通過此設(shè)置，可以輕松確定特定字段是否有驗(yàn)證錯(cuò)誤，并快速檢索錯(cuò)誤消息。
代碼如下：
new Dictionary<string, Dictionary<string, string>>();
現(xiàn)在，我將添加 AddError 方法，以將錯(cuò)誤輸入內(nèi)部錯(cuò)誤字典。
AddError 有 fieldName、ruleName 和 errorText 參數(shù)。它先搜索內(nèi)部錯(cuò)誤字典，并刪除已有條目，再添加新的錯(cuò)誤條目，如下面的代碼所示：
{
if?(!_errors.ContainsKey(fieldName))?{?_errors.Add(fieldName,
new Dictionary<string, string>()); }
if (_errors[fieldName].ContainsKey(ruleName))
{ _errors[fieldName].Remove(ruleName); }
_errors[fieldName].Add(ruleName, errorText);
OnModelChanged();
}
最后，我將添加 RemoveError 方法，它接受 fieldName 和 ruleName 參數(shù)，并在內(nèi)部錯(cuò)誤字典中搜索并刪除匹配的錯(cuò)誤。代碼如下：
{
if?(!_errors.ContainsKey(fieldName))?{?_errors.Add(fieldName,
new Dictionary<string, string>()); }
if (_errors[fieldName].ContainsKey(ruleName))
{ _errors[fieldName].Remove(ruleName);
OnModelChanged();
}
}
下一步是添加 CheckRules 函數(shù)，這些函數(shù)負(fù)責(zé)查找并執(zhí)行附加到此模型的驗(yàn)證規(guī)則。有兩種不同的 CheckRules 函數(shù)：一種是缺少參數(shù)，但對(duì)所有字段驗(yàn)證全部規(guī)則；另一種有 fieldName 參數(shù)，并僅驗(yàn)證特定字段。在字段更新時(shí)，使用的是第二種函數(shù)，并立即對(duì)此字段驗(yàn)證規(guī)則。
CheckRules 函數(shù)使用反射來查找附加到字段的屬性列表。然后，它測(cè)試每個(gè)屬性，以確定屬性類型是否為 IModelRule。找到 IModelRule 后，它調(diào)用 Validate 方法，并返回結(jié)果，如圖 3 所示。
圖 3：CheckRules 函數(shù)
{
var propertyInfo = this.GetType().GetProperty(fieldName);
var attrInfos = propertyInfo.GetCustomAttributes(true);
foreach (var attrInfo in attrInfos)
{
if (attrInfo is IModelRule modelrule)
{
var value = propertyInfo.GetValue(this);
var result = modelrule.Validate(fieldName, value);
if (result.IsValid)
{
RemoveError(fieldName, attrInfo.GetType().Name);
}
else
{
AddError(fieldName, attrInfo.GetType().Name, result.Message);
}
}
}
}
public bool CheckRules()
{
foreach (var propInfo in this.GetType().GetProperties(
System.Reflection.BindingFlags.Public |
System.Reflection.BindingFlags.Instance))
CheckRules(propInfo.Name);
return HasErrors();
}
接下來，我將添加 Errors 函數(shù)。此函數(shù)需要使用 fieldname 參數(shù)，并返回包含相應(yīng)字段的錯(cuò)誤列表的字符串。它使用內(nèi)部 _errors 字典來確定相應(yīng)字段是否有任何錯(cuò)誤，如下所示：
{
if?(!_errors.ContainsKey(fieldName))?{?_errors.Add(fieldName,
new Dictionary<string, string>()); }
System.Text.StringBuilder sb = new System.Text.StringBuilder();
foreach (var value in _errors[fieldName].Values)
sb.AppendLine(value);
return sb.ToString();
}
現(xiàn)在，我需要添加 HasErrors 函數(shù)，它會(huì)在此模型的任意字段有任何錯(cuò)誤時(shí)返回 true。客戶端使用此方法來確定是否應(yīng)啟用“注冊(cè)”按鈕。
另外，WebAPI 服務(wù)器也使用此方法來確定傳入的模型數(shù)據(jù)是否有錯(cuò)誤。此函數(shù)的代碼如下：
{
foreach (var key in _errors.Keys)
if (_errors[key].Keys.Count > 0) { return true; }
return false;
}
值和事件
是時(shí)候添加 GetValue 方法了，它需要使用 fieldname 參數(shù)，并使用反射來查找此模型中的字段并返回字段值。Blazor 客戶端使用此方法來檢索當(dāng)前值，并在輸入框中顯示它，如下所示：
{
var propertyInfo = this.GetType().GetProperty(fieldName);
var value = propertyInfo.GetValue(this);
if (value?!=?null) { return value.ToString(); }
return String.Empty;
}
現(xiàn)在，添加 SetValue 方法。它使用反射來查找此模型中的字段，并更新字段值。然后，它觸發(fā) CheckRules 方法，以對(duì)相應(yīng)字段驗(yàn)證所有規(guī)則。Blazor 客戶端使用此方法，以在用戶在輸入文本框中鍵入內(nèi)容的同時(shí)更新值。代碼如下：
{
var propertyInfo = this.GetType().GetProperty(fieldName);
propertyInfo.SetValue(this, value);
CheckRules(fieldName);
}
最后，我添加 ModelChanged 事件。如果此模型中的值已更改或在內(nèi)部錯(cuò)誤字典中添加或刪除了驗(yàn)證規(guī)則，便會(huì)觸發(fā)這個(gè)事件。Blazor 客戶端偵聽此事件，并在事件觸發(fā)時(shí)更新 UI。正因?yàn)榇?#xff0c;顯示的錯(cuò)誤會(huì)更新，如下面的代碼所示：
protected void OnModelChanged()
{
??ModelChanged?.Invoke(this, new EventArgs());
}
得承認(rèn)此驗(yàn)證引擎的設(shè)計(jì)非常簡單，還有很多改進(jìn)機(jī)會(huì)。在生產(chǎn)業(yè)務(wù)應(yīng)用程序中，設(shè)置錯(cuò)誤的嚴(yán)重性級(jí)別（如“信息”、“警告”和“錯(cuò)誤”）會(huì)很有用。在某些情況下，如果無需修改代碼，即可從配置文件動(dòng)態(tài)加載規(guī)則，將會(huì)很有幫助。我不是在提倡創(chuàng)建你自己的驗(yàn)證引擎；只是有很多選擇。此驗(yàn)證引擎既要足夠好，以便演示實(shí)際示例；又要足夠簡單，以適應(yīng)本文且易于理解。
創(chuàng)建規(guī)則
此時(shí)，有包含窗體字段的 RegistrationData 類。
此類中的字段使用 RequiredRule 和 EmailRule 等屬性進(jìn)行修飾。
RegistrationData 類繼承自 ModelBase 類，后者包含所有用于驗(yàn)證規(guī)則并向客戶端通知更改的邏輯。驗(yàn)證引擎的最后一部分是規(guī)則邏輯本身。接下來，我將對(duì)此進(jìn)行探索。
首先，我在 SharedLibrary 中新建 IModelRule 類。
此規(guī)則由一個(gè)返回 ValidationResult 的 Validate 方法組成。每個(gè)規(guī)則都必須實(shí)現(xiàn) IModelRule 接口，如下所示：
{
ValidationResult Validate(String fieldName, object fieldValue);
}
接下來，我在 SharedLibrary 中新建 ValidationResult 類，它由兩個(gè)字段組成。IsValid 字段指明規(guī)則是否有效，而 Message 字段則包含要在規(guī)則無效時(shí)顯示的錯(cuò)誤消息。代碼如下所示：
{
public bool IsValid { get; set; }
public String Message { get; set; }
}
示例應(yīng)用程序使用四個(gè)不同的規(guī)則，所有規(guī)則都是繼承自 Attribute 類并實(shí)現(xiàn) IModelRule 接口的公共類。
現(xiàn)在，是時(shí)候創(chuàng)建規(guī)則了。請(qǐng)注意，所有驗(yàn)證規(guī)則都只是繼承自 Attribute 類并實(shí)現(xiàn) IModelRule 接口的 Validate 方法的類。如果輸入的文本超過指定的長度上限，圖 4 中的長度上限規(guī)則返回錯(cuò)誤。其他用于驗(yàn)證必填字段、電話和電子郵件地址字段格式的規(guī)則的工作方式類似，區(qū)別在于它們對(duì)要驗(yàn)證的數(shù)據(jù)類型采用不同的邏輯。
圖 4：MaxLengthRule 類
{
private int _maxLength = 0;
public MaxLengthRule(int maxLength) { _maxLength = maxLength; }
public ValidationResult Validate(string fieldName, object fieldValue)
{
var message = $"Cannot be longer than {_maxLength} characters";
if (fieldValue == null) { return new ValidationResult() { IsValid = true }; }
var stringvalue = fieldValue.ToString();
if (stringvalue.Length > _maxLength )
{
return new ValidationResult() { IsValid = false, Message = message };
}
else
{
return new ValidationResult() { IsValid = true };
}
}
}
創(chuàng)建 Blazor 注冊(cè)窗體
至此，驗(yàn)證引擎已在共享庫中完成，它可以應(yīng)用于 Blazor 應(yīng)用程序中的新注冊(cè)窗體。首先，我在 Blazor 應(yīng)用程序中添加對(duì)共享庫項(xiàng)目的引用。為此，可使用“引用管理器”對(duì)話框的“解決方案”窗口，如圖 5 所示。
圖 5：添加對(duì)共享庫的引用
接下來，我向應(yīng)用程序的 NavMenu 添加新導(dǎo)航鏈接。
打開SharedNavMenu.cshtml 文件，并向列表添加新注冊(cè)窗體鏈接如圖 6 所示。
圖 6：添加注冊(cè)窗體鏈接
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="" Match=NavLinkMatch.All>
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="registrationform">
<span class="oi oi-list-rich" aria-hidden="true"></span> Registration Form
</NavLink>
</li>
</ul>
</div>
最后，我在 Pages 文件夾中添加新 RegistrationForm.cshtml 文件。為此，可使用圖 7 中的代碼。
圖 7 中的 cshtml 代碼在 <form> 標(biāo)記內(nèi)有四個(gè) <TextInput> 字段。<TextInput> 標(biāo)記是自定義 Blazor 組件，用于處理字段的數(shù)據(jù)綁定和錯(cuò)誤顯示邏輯。此組件只需要三個(gè)參數(shù)即可正常運(yùn)行：
Model 字段：標(biāo)識(shí)數(shù)據(jù)要綁定到的類。
FieldName：標(biāo)識(shí)數(shù)據(jù)要綁定到的數(shù)據(jù)成員。
DisplayName 字段：讓組件可以顯示易記消息。
圖 7：添加 RegistrationForm.cshtml 文件
@inject HttpClient Http
@using SharedLibrary
<h1>Registration Form</h1>
@if?(!registrationComplete)
{
<form>
<div class="form-group">
<TextInput Model="model" FieldName="FirstName" DisplayName="First Name" />
</div>
<div class="form-group">
<TextInput Model="model" FieldName="LastName" DisplayName="Last Name" />
</div>
<div class="form-group">
<TextInput Model="model" FieldName="Email" DisplayName="Email" />
</div>
<div class="form-group">
<TextInput Model="model" FieldName="Phone" DisplayName="Phone" />
</div>
<button type="button" class="btn btn-primary" onclick="@Register"
disabled="@model.HasErrors()">Register</button>
</form>
}
else
{
??<h2>Registration?Complete!</h2>
}
@functions {
bool registrationComplete = false;
RegistrationData model { get; set; }
protected override void OnInit()
{
base.OnInit();
model = new RegistrationData() { FirstName =
"test", LastName = "test", Email = "test@test.com", Phone = "1234567890" };
model.ModelChanged += ModelChanged;
model.CheckRules();
}
private void ModelChanged(object sender, EventArgs e)
{
base.StateHasChanged();
}
async Task Register()
{
await Http.PostJsonAsync<RegistrationData>(
"https://localhost:44332/api/Registration", model);
registrationComplete = true;
}
}
在頁面的 @functions 塊內(nèi)，代碼只有一點(diǎn)點(diǎn)。OnInit 方法使用其中的一些測(cè)試數(shù)據(jù)來初始化模型類。
它綁定到 ModelChanged 事件，并調(diào)用 CheckRules 方法來驗(yàn)證規(guī)則。
ModelChanged 處理程序調(diào)用 base.StateHasChanged 方法，以強(qiáng)制執(zhí)行 UI 刷新。Register 方法在“注冊(cè)”按鈕獲得單擊時(shí)調(diào)用，并將注冊(cè)數(shù)據(jù)發(fā)送到后端WebAPI 服務(wù)。
TextInput 組件包含輸入標(biāo)簽、輸入文本框、驗(yàn)證錯(cuò)誤消息，以及在用戶鍵入內(nèi)容的同時(shí)更新模型的邏輯。Blazor 組件非常易于編寫，并提供了將接口分解為可重用部分的強(qiáng)大方法。參數(shù)成員使用 Parameter 屬性進(jìn)行修飾，以便讓 Blazor 知道它們是組件參數(shù)。
輸入文本框的 oninput 事件連接到 OnFieldChanged 處理程序。每當(dāng)輸入更改，都會(huì)觸發(fā)此事件。然后，OnFieldChanged 處理程序調(diào)用 SetValue 方法，以對(duì)相應(yīng)字段執(zhí)行規(guī)則，并在用戶鍵入內(nèi)容的同時(shí)實(shí)時(shí)更新錯(cuò)誤消息。圖 8 展示了代碼。
圖 8：更新錯(cuò)誤消息
<label>@DisplayName</label>
<input type="text" class="form-control" placeholder="@DisplayName"
oninput="@(e => OnFieldChanged(e.Value))"
value="@Model.GetValue(FieldName)" />
<small class="form-text" style="color:darkred;">@Model.Errors(FieldName)
</small>
@functions {
[Parameter]
ModelBase Model { get; set; }
[Parameter]
String FieldName { get; set; }
[Parameter]
String DisplayName { get; set; }
public void OnFieldChanged(object value)
{
Model.SetValue(FieldName, value);
}
}
服務(wù)器上的驗(yàn)證
驗(yàn)證引擎現(xiàn)已開始在客戶端上運(yùn)行。下一步是在服務(wù)器上使用共享庫和驗(yàn)證引擎。為此，我先向解決方案添加另一個(gè) ASP.NET Core Web 應(yīng)用程序項(xiàng)目。這次，我在圖 1 所示的“新建 ASP.NET Core Web 應(yīng)用程序”對(duì)話框中選擇的是“API”，而不是“Blazor”。
新建 API 項(xiàng)目后，我就添加對(duì)共享項(xiàng)目的引用，就像在 Blazor 客戶端應(yīng)用程序中（見圖 5）一樣。接下來，我向 API 項(xiàng)目添加新控制器。
新控制器接受來自 Blazor 客戶端的 RegistrationData 調(diào)用，如圖 9 所示。注冊(cè)控制器在服務(wù)器上運(yùn)行，并且是后端 API 服務(wù)器的典型特征。區(qū)別在于，它現(xiàn)在運(yùn)行在客戶端上運(yùn)行的相同驗(yàn)證規(guī)則。
圖 9：注冊(cè)控制器
[ApiController]
public class RegistrationController?:?ControllerBase
{
[HttpPost]
public IActionResult Post([FromBody] RegistrationData value)
{
if (value.HasErrors())
{
return BadRequest();
}
// TODO: Save data to database
return Created("api/registration", value);
}
}
注冊(cè)控制器有一個(gè) POST 方法，它接受 RegistrationData 作為自己的值。它調(diào)用 HasErrors 方法，以驗(yàn)證所有規(guī)則并返回布爾值。
若有錯(cuò)誤，控制器返回 BadRequest 響應(yīng)；否則，它返回成功響應(yīng)。我特意省略掉了將注冊(cè)數(shù)據(jù)保存到數(shù)據(jù)庫的代碼，這樣我就可以驗(yàn)證方案為重點(diǎn)了。
現(xiàn)在，共享驗(yàn)證邏輯在客戶端和服務(wù)器上運(yùn)行。
遠(yuǎn)景
此簡單示例展示了如何在瀏覽器和后端之間共享驗(yàn)證邏輯，僅僅觸及全棧 C# 環(huán)境強(qiáng)大功能的皮毛。
Blazor 的神奇之處在于，使用它，現(xiàn)有 C# 開發(fā)人員大軍可以生成功能強(qiáng)大的新式響應(yīng)式單頁應(yīng)用程序，且最大限度地縮短啟動(dòng)時(shí)間。使用它，企業(yè)可以重用和重新打包現(xiàn)有代碼，以便能夠直接在瀏覽器中運(yùn)行現(xiàn)有代碼。
能夠在瀏覽器、桌面、服務(wù)器、云和移動(dòng)平臺(tái)之間共享 C# 代碼，將大大提升開發(fā)人員的工作效率。它還便于開發(fā)人員更快地向客戶交付更多功能和更多業(yè)務(wù)價(jià)值。
原文地址：https://msdn.microsoft.com/zh-cn/magazine/mt833288
.NET社區(qū)新聞，深度好文，歡迎訪問公眾號(hào)文章匯總?http://www.csharpkit.com?
總結(jié)
以上是生活随笔為你收集整理的使用 C# 和 Blazor 进行全栈开发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用 MSIX 打包 DotNetCor
- 下一篇： C# - 为引用类型重定义相等性 - 继