C# 中如何使用 Blazor 构建 Web UI？

推荐答案

// www.javascriptcn.com code example
@page "/counter"

<h3>Counter</h3>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

本题详细解读

Blazor 简介

Blazor 是一个使用 .NET 构建交互式客户端 Web UI 的框架。它允许开发者使用 C# 和 Razor 语法来构建 Web 应用程序，而不是传统的 JavaScript。Blazor 支持两种托管模式：Blazor Server 和 Blazor WebAssembly。

使用 Blazor 构建 Web UI 的步骤

1. 创建 Blazor 项目：

   • 使用 Visual Studio 或 .NET CLI 创建一个新的 Blazor 项目。
   • 例如，使用 CLI 命令：dotnet new blazorwasm -o MyBlazorApp。

2. 定义页面：

   • 在 Pages 文件夹中创建 .razor 文件，例如 Counter.razor。
   • 使用 @page 指令定义路由，例如 @page "/counter"。

3. 编写 UI 组件：

   • 使用 HTML 和 Razor 语法编写 UI 组件。
   • 例如，定义一个按钮和一个计数器显示区域。

4. 添加交互逻辑：

   • 在 @code 块中编写 C# 代码来处理用户交互。
   • 例如，定义一个 IncrementCount 方法来增加计数器的值。

5. 运行应用程序：

   • 使用 dotnet run 命令运行应用程序。
   • 在浏览器中访问定义的路由，例如 /counter，即可看到交互式的 Web UI。

示例代码解析

• @page "/counter"：定义页面的路由为 /counter。

• Counter

  ：显示一个标题。

• Current count: @currentCount

  ：显示当前计数器的值。
• <button class="btn btn-primary" @onclick="IncrementCount">Click me：定义一个按钮，点击时触发 IncrementCount 方法。
• @code { ... }：在 @code 块中定义 C# 代码，处理按钮点击事件并更新计数器的值。

通过以上步骤，你可以使用 Blazor 构建一个简单的交互式 Web UI。