在 C# 中實現 Blazor 應用需要結合 Razor 語法和 C# 代碼，Blazor 允許使用 C# 同時開發前端和后端邏輯。以下是一個完整的 C# Blazor 實現示例，包含項目創建、基礎組件和數據交互等內容：
一、創建 Blazor 項目
-
使用 Visual Studio
- 新建項目 → 選擇 “Blazor App” → 勾選 “ASP.NET?Core 托管”（可選 WebAssembly 或服務器端渲染）。
-
使用.NET CLI?
dotnet new blazorwasm -n BlazorDemo # WebAssembly客戶端渲染 dotnet new blazorserver -n BlazorDemo # 服務器端渲染
二、基礎 Blazor 組件示例（C#）
以下是一個顯示當前時間的 Blazor 組件（.razor文件）：
@page "/" // 路由路徑<h3>Blazor時間組件</h3>
<p>當前時間：@currentTime</p>
<button @onclick="UpdateTime">刷新時間</button>@code {private string currentTime;protected override void OnInitialized(){UpdateTime();}private void UpdateTime(){currentTime = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");StateHasChanged(); // 通知組件狀態更新}
}
三、數據綁定與交互
Blazor 支持雙向數據綁定和事件處理：razor
@page "/form"<h3>用戶表單</h3>
<div><label>姓名：</label><input type="text" @bind="userName" /><p>輸入的姓名：@userName</p>
</div><div><label>年齡：</label><input type="number" @bind="userAge" /><p>年齡：@userAge</p>
</div><button @onclick="SubmitForm">提交</button>@code {private string userName;private int userAge;private void SubmitForm(){if (string.IsNullOrEmpty(userName)){message = "姓名不能為空";return;}message = $"用戶 {userName}，年齡 {userAge} 已提交";}private string message;
}
四、組件間通信（父子組件）
父組件（ParentComponent.razor）razor
<h3>父組件</h3>
<p>父組件消息：@parentMessage</p>
<ChildComponent @bind-ChildMessage="parentMessage" />@code {private string parentMessage = "來自父組件的初始消息";
}
子組件（ChildComponent.razor）razor
<h4>子組件</h4>
<input type="text" @bind="childMessage" />
<p>子組件接收到的消息：@childMessage</p>@code {[Parameter]public string ChildMessage { get => childMessage; set {if (childMessage != value){childMessage = value;OnChildMessageChanged.InvokeAsync(childMessage);}}}private string childMessage;[Parameter]public EventCallback<string> OnChildMessageChanged { get; set; }
}
五、HTTP 數據交互
Blazor 內置HttpClient用于 API 調用：
@page "/fetch-data"
@using System.Net.Http
@using BlazorDemo.Shared // 假設模型在此命名空間<h3>獲取天氣數據</h3>@if (forecasts == null)
{<p><em>加載中...</em></p>
}
else
{<table class="table"><thead><tr><th>日期</th><th>溫度</th><th>摘要</th></tr></thead><tbody>@foreach (var forecast in forecasts){<tr><td>@forecast.Date</td><td>@forecast.TemperatureC °C</td><td>@forecast.Summary</td></tr>}</tbody></table>
}@code {private WeatherForecast[] forecasts;// 注入HttpClient[Inject]private HttpClient Http { get; set; }protected override async Task OnInitializedAsync(){forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");}// 天氣模型（通常放在Shared項目中）public class WeatherForecast{public DateTime Date { get; set; }public int TemperatureC { get; set; }public string Summary { get; set; }public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);}
}
六、Blazor 項目結構說明
plaintext
BlazorDemo/
├── Client/ # WebAssembly客戶端項目（若選擇ASP.NET Core托管）
├── Server/ # 服務器端項目（包含API和服務）
├── Shared/ # 共享模型和接口
├── wwwroot/ # 靜態資源
├── App.razor # 根組件
├── MainLayout.razor # 布局組件
├── _Imports.razor # 全局導入
├── index.html # WebAssembly入口
└── Program.cs # 應用程序入口
七、運行與部署
-
開發環境運行
dotnet run # 服務器端渲染 dotnet watch run # 啟用熱重載 -
部署到 IIS / 云服務
- 發布項目：
dotnet publish -c Release - WebAssembly 應用可直接部署靜態文件；服務器端應用需部署到支持.NET 的服務器（如 Azure App Service）。
- 發布項目：
核心特性總結
- 組件化開發：通過
.razor文件混合 HTML、C# 和 CSS，實現可復用 UI 組件。 - 雙向綁定：使用
@bind語法簡化表單交互（如@bind="userName"）。 - 依賴注入：通過
[Inject]特性注入服務（如HttpClient、數據庫上下文）。 - 狀態管理：使用
StateHasChanged()通知組件更新 UI。 - 跨平臺：WebAssembly 版可在瀏覽器中運行，服務器版可部署到任何支持.NET 的平臺。
通過以上示例，可快速入門 C# Blazor 開發，進一步可擴展為復雜的企業級應用。
在 Razor 語法中，輸出表達式的方式與傳統 ASP/ASPX 有所不同。以下是?<%=now%>?在 Razor 中的等效實現方法：
1. 基本語法對比
| 技術 | 輸出當前時間的代碼示例 |
|---|---|
| ASP/ASPX | <%= Now() %>?或?<% Response.Write(Now()) %> |
| Razor (VB.NET) | @Now?或?@DateTime.Now |
2. Razor 實現示例
在 .cshtml 文件中
<p>當前時間：@Now</p><!-- 等效于 -->
<p>當前時間：@DateTime.Now</p><!-- 格式化輸出 -->
<p>格式化時間：@DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")</p>
在代碼塊中使用
@CodeDim currentTime = DateTime.NowDim formattedTime = currentTime.ToString("yyyy年MM月dd日")
End Code<p>代碼塊中的時間：@formattedTime</p>
3. 動態表達式與 HTML 編碼
Razor 會自動對輸出內容進行 HTML 編碼，防止 XSS 攻擊：
@CodeDim userInput = "<script>alert('XSS');</script>"
End Code<!-- 輸出編碼后的內容：<script>alert('XSS');</script> -->
<p>自動編碼：@userInput</p><!-- 若需輸出原始 HTML（需謹慎！） -->
<p>原始 HTML：@Html.Raw(userInput)</p>
4. 與傳統 ASPX 的差異
| 特性 | ASPX (<%= %>) | Razor (@) |
|---|---|---|
| 語法簡潔度 | 較長，需顯式標記開始和結束 | 更簡潔，使用?@?符號 |
| 代碼塊集成 | 使用?<% %>?包裹代碼 | 使用?@Code ... End Code |
| HTML 編碼 | 需手動調用?Server.HtmlEncode | 自動編碼，可通過?@Html.Raw?禁用 |
| 類型推斷 | 弱類型，需顯式轉換 | 強類型，支持智能感知 |
5. 復雜表達式示例
<!-- 條件表達式 -->
<p>狀態：@If(DateTime.Now.Hour < 12, "上午", "下午")</p><!-- 方法調用 -->
@CodeFunction GetWelcomeMessage() As StringReturn "歡迎訪問，當前時間：" & DateTime.Now.ToString()End Function
End Code<p>消息：@GetWelcomeMessage()</p>
6. 在 Blazor 組件中使用
如果是 Blazor 組件（.razor 文件），語法類似，但支持雙向綁定和組件生命周期：
<p>當前時間：@CurrentTime</p>
<button @onclick="UpdateTime">刷新時間</button>@CodePrivate CurrentTime As DateTime = DateTime.NowPrivate Sub UpdateTime()CurrentTime = DateTime.NowEnd Sub
End Code
)
