C# 12 Blazor入门教程
Blazor簡介
Blazor 是由Microsoft開發的一款基于.NET的開源交互式Web UI框架。Blazor使開發人員能夠使用C#和HTML建立全堆棧的單頁應用程序，并避免使用JavaScript。Blazor基于組件模型，該模型提供了以具有強類型的符合Razor標準的頁面和組件的形式構建用戶界面的能力。
Blazor的加入使得.NET開發人員有機會在客戶端和服務器上使用同一種編程模型，同時享受到.NET的優勢，比如其功能強大的運行時，標準庫，語言互操作性和輔助開發者高效開發的工具等。
在Blazor中，有兩個主要的托管模型：
-
** Blazor Server: 在此模式下，應用程序在服務器端運行，并使用SignalR實時通訊框架與瀏覽器進行交互。這種模型要求永久的有效連接，但是客戶端的計算和下載需求會大大減低，所有的邏輯運行都在服務器端。
-
** Blazor WebAssembly: 在此模式下，應用程序直接在客戶端的WebAssembly中運行，允許C#代碼在瀏覽器中執行，不依賴服務器。
開發要求
可使用最新版本的 Visual Studio 2022、Visual Studio for Mac 或 Visual Studio Code 來生成 Blazor 應用。
本文使用 Visual Studio 2022.
無論使用哪種開發環境，都需要安裝 .NET 6.0（或更高版本）SDK。 如果要使用 Visual Studio 2022，則需要包含“ASP.NET 和 Web 開發”工作負載。 安裝后，即可開始生成 Blazor 應用。
創建應用
在這里，我們創建一個Blazor Server 模式的程序。
1. 啟動 Visual Studio 2022 并選擇“Create a new project”。
2. 在“Create a new project”窗口中，在搜索框中鍵入 Blazor，然后按 Enter。
3. 選擇“Blazor Server 應用”模板并選擇“下一步”。
4. 在“Configure new project”窗口中，輸入 BlazorApp 作為項目名稱，然后選擇“下一步”。
5. 在“Additional information”窗口中，如果尚未選擇，則在“框架”下拉列表中選擇“.NET 7.0 (標準期限支持)”，然后單擊“Create”按鈕。
使用解決方案資源管理器查看項目內容。
Program.cs 是啟動服務器以及在其中配置應用服務和中間件的應用的入口點。
App.razor 為應用的根組件。
Pages 目錄包含應用的一些示例網頁。
BlazorApp.csproj 定義應用項目及其依賴項，且可以通過雙擊解決方案資源管理器中的 BlazorApp 項目節點進行查看。
Properties 目錄中的 launchSettings.json 文件為本地開發環境定義不同的配置文件設置。創建項目時會自動分配端口號并將其保存在此文件上。
6. 運行應用
單擊 Visual Studio 調試工具欄中的“開始調試”按鈕(綠色箭頭)以運行應用。
首次在 Visual Studio 中運行 Web 應用時，它將設置用于通過 HTTPS 托管應用的開發證書，然后提示你信任該證書。建議同意信任該證書。證書將僅用于本地開發，如果沒有證書，大多數瀏覽器都會對網站的安全性進行投訴。
等待應用在瀏覽器中啟動。轉到以下頁面后，你已成功運行第一個 Blazor 應用!
顯示的頁面由位于 Pages 目錄內的 Index.razor 文件定義。其內容如下所示:
- Pages/Index.razor
@page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
它已包含將其設置為主頁并顯示文本 Hello, world! 和 Welcome to your new app 的代碼。它還包含一個 SurveyPrompt 組件，可呈現指向 Blazor 反饋調查的鏈接。
在 Blazor 中生成 UI 時，通常會在同一文件中將靜態 HTML 和 CSS 標記與 C# 代碼混用。 若要區分這些類型的代碼，可使用 Razor 語法。 Razor 語法包括前綴為 @ 符號的指令，這些指令用于分隔 C# 代碼、路由參數、綁定數據、導入的類以及其他特性。
- @page 指令：該指令為 Blazor 提供路由模板。 在運行時，Blazor 通過將此模板與用戶請求的 URL 相匹配來查找要呈現的頁面。 在本例中，它可能與 http://yourdomain.com/index 形式的 URL 匹配。
試用計數器
在正在運行的應用中，通過單擊左側邊欄中的“Counter”選項卡導航到“Counter”頁。然后應顯示以下頁面:
選擇“Click me”按鈕，在不刷新頁面的情況下遞增計數。若要在網頁中遞增計數器，通常需要編寫 JavaScript，但對于 Blazor，你可以使用 C#。
可以在 Pages 目錄內的 Counter.razor 文件處找到 Counter 組件的實現。
- Pages/Counter.razor
@page "/counter"
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
-
@code 指令：該指令聲明以下塊中的文本是 C# 代碼。 你可以根據需要將任意數量的代碼塊置于組件中。 你可以在這些代碼塊中定義組件類成員，并通過計算、數據查找操作或其他源設置其值。 在本例中，代碼定義了一個名為 currentCount 的組件成員并設置了值。
-
成員訪問指令：如果要在呈現邏輯中包含成員的值，請使用 @ 符號，后跟 C# 表達式，例如成員的名稱。 在本例中，@currentCount 指令用于在
標記中呈現 currentCount 成員的值。
在瀏覽器中對于 /counter 的請求(由位于頂部的 @page 指令指定)導致 Counter 組件呈現其內容。
每次點擊“Click Me”按鈕時:
觸發 onclick 事件。
調用 IncrementCount 方法。
currentCount 為遞增。
呈現該組件以顯示更新的計數。
7. 添加組件
每個 razor 文件都會定義一個可重復使用的 UI 組件。
在 Visual Studio 中打開 Index.razor 文件。Index.razor 文件已存在，并且是在創建項目時創建的。它位于之前創建的 BlazorApp 目錄中的 Pages 文件夾中。
通過在 Index.razor 文件末尾添加
- Pages/Index.razor
@page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<Counter />
單擊“熱重載”按鈕，以將更改應用到正在運行的應用。然后 Counter 組件將出現在主頁上。
8. 修改組件
組件可以有參數，組件參數使用特性或子內容指定，這允許在子組件上設置屬性。在 Counter 組件上定義參數，以指定每次點擊按鈕時的增量:
使用 [Parameter] 屬性為 IncrementAmount 添加公共屬性。
將 IncrementCount 方法更改為在遞增 currentCount 值時使用 IncrementAmount。
下面的代碼演示了怎樣實現此目的。
- Pages/Counter.razor
@page "/counter"
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
[Parameter]
public int IncrementAmount { get; set; } = 1;
private void IncrementCount()
{
currentCount += IncrementAmount;
}
}
在 Index.razor 中，更新
- Pages/Index.razor
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<Counter IncrementAmount="10" />
通過單擊“熱重載”按鈕將更改應用。Index 組件現在具有自己的計數器，每次點擊“Click me”按鈕時，該計數器會遞增 10，如下圖所示。（/counter 處的 Counter 組件(Counter.razor)將繼續按 1 遞增。）
恭喜你已生成并運行首個 Blazor 應用!
9. 數據綁定和事件
在 Razor 組件中，可以將 HTML 元素數據綁定到 C# 字段、屬性和 Razor 表達式值。 數據綁定支持在 HTML 和 Microsoft .NET 之間進行雙向同步。
呈現組件時，數據從 HTML 推送到 .NET。 組件在事件處理程序代碼執行后呈現自身，這就是為什么在觸發事件處理程序后，屬性更新會立即反映在 UI 中。
可使用 @bind 標記將 C# 變量綁定到 HTML 對象。 按名稱將 C# 變量定義為 HTML 中的字符串。 在下面的練習中，可以看到數據綁定的示例。
創建 Todo 項
在項目的根目錄（BlazorApp 文件夾）中創建一個名為 TodoItem.cs 的新文件，用于保存表示待辦事項的 C# 類。
為 TodoItem 類使用以下 C# 代碼。 通過使用 ? 將 Title 聲明為可為空字符串。
public class TodoItem
{
public string? Title { get; set; }
public bool IsDone { get; set; } = false;
}
綁定 TodoItem 列表
現可在 Blazor 中將 TodoItem 對象集合綁定到 HTML。 若要綁定這些對象，請在 Pages/Index.razor 文件中進行以下更改：
在 @code 塊中為待辦項添加一個字段。 Todo 組件使用此字段來維護待辦項列表的狀態。
添加無序列表標記和 foreach 循環，以將每個待辦項呈現為列表項 (
@page "/"
...
<ul>
@foreach (var todo in todos)
{
<li>
<input type="checkbox" @bind="todo.IsDone" />
<input @bind="todo.Title" />
</li>
}
</ul>
@code {
...
private List<TodoItem> todos = new() { new TodoItem() {Title = "Item1", IsDone = true}, new TodoItem() {Title = "Item2", IsDone = false}};
}
動態創建元素
- 在列表 li 下方添加一個文本輸入 (input) 和一個按鈕 (button)。
- 添加 AddTodo 方法，并使用 @onclick 屬性來為按鈕注冊方法。 點擊按鈕時，會調用 AddTodo C# 方法。
- 在@code中增加AddTodo 方法，將具有指定標題的 TodoItem 添加到列表。 通過將 newTodo 設置為空字符串來清除文本輸入的值。
@page "/"
...
<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>
ul>
@foreach (var todo in todos)
{
<li>
<input type="checkbox" @bind="todo.IsDone" />
<input @bind="todo.Title" />
</li>
}
</ul>
@code {
...
private List<TodoItem> todos = new() { new TodoItem() { Title = "Item1", IsDone = true }, new TodoItem() { Title = "Item2", IsDone = false } };
private string? newTodo;
private void AddTodo()
{
if (!string.IsNullOrWhiteSpace(newTodo))
{
todos.Add(new TodoItem { Title = newTodo });
newTodo = string.Empty;
}
}
}
點擊 Add todo 查看效果
總結
Blazor是一款強大的Web開發框架，它為.NET開發者開辟了通往前端開發的新道路。通過使用Blazor，你可以運用你的C#和.NET技能進行全棧開發，這降低了學習入口和復雜性。
我們在本教程中接觸到了Blazor的主要特性與概念，比如組件化、數據綁定和事件以及兩種運行模式。你已經明白了如何用Blazor創建單頁應用，以及Blazor與其他流行前端框架的差異。希望這些知識能夠為你提供一個清晰的框架，幫助你理解Blazor的優勢并決定是否在你的下個項目中使用它。
但是，記住我們只觸及了表面；Blazor提供了更多的深度和復雜性等待你去探索。為了深入了解Blazor，你可以研究更復雜的例子，嘗試使用Blazor去創建更實際的應用，或者深挖Blazor的文檔以了解它的更多特性和優點。
總的來說，Blazor是.NET開發者的一種優秀選擇，它擴展了.NET生態系統，使得它更全面，更具可達性。Blazor最大的魅力在于它拓寬了.NET開發者的視野，讓開發者不再局限后端或桌面應用，前端的世界同樣可以用熟悉的語言和工具去進行開發。
源代碼地址： https://github.com/DXG88/BlazorApp
原文地址：https://blog.baibaomen.com/c-12-blazor入門教程/
總結
以上是生活随笔為你收集整理的C# 12 Blazor入门教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： canvas实现动态替换人物的背景颜色
- 下一篇： MIT实验警示:人类或需要人工智能辅助才