Asp.Net Core Blazor快速实践

目录

Blazor 是一个使用 C# 和.NET 技术构建交互式 Web 应用的框架，它允许开发者在服务器端和客户端使用相同的语言进行开发，从而提高了开发效率和代码的可维护性。可以说是.NET生态系统中的一个革命性框架。Blazor的出现，让开发人员仅通过一种编程语言，就可以实现前后端的全栈开发，很是方便。

优势所在

  • 使用C#代替JavaScript来创建信息丰富的交互式UI。

  • 共享使用.NET编写的服务器端和客户端应用逻辑。

  • 将UI呈现为HTML和CSS，以支持众多浏览器，其中包括移动浏览器。

  • 与新式托管平台（如Docker）集成。

托管模式

DotNet8.0后统一成如下两种模式，各自应用于不同的场景。

105440745_538d9d85-d186-49bf-b7cc-0a8f646892c9

  • Blazor Web App项目模板：应用程序在服务器端运行，并使用SignalR实时通讯框架与浏览器进行交互。

    • None(Static SSR)，纯静态服务器呈现模板

    • Server(Interactive Server)，交互式呈现模板，后端渲染

    • WebAssembly(Interactive WebAssembly)，从服务端下载完WebAssembly后使用WebAssembly在浏览器中运行

    • Auto(Interactive Auto)，先使用Server模式，下载完WebAssembly后使用WebAssembly在浏览器中运行

  • 独立 Blazor WebAssembly 应用项目模板：应用程序直接在客户端的WebAssembly中运行，允许C#代码在浏览器中执行，不依赖服务器。

新建项目

新建Blazor Server项目，此处以命令行形式创建，DotNet8.0, Server模式

dotnet new blazor -f net8.0 -int Server -n BlazorServerDemo.App

其项目结构中，包含 105442837_3c8642cf-a43e-4f85-b8ec-f4ca919b040b

  • Layout 文件夹：包含以下布局组件和样式表：

    • MainLayout 组件 (MainLayout.razor)：应用的布局组件。

      • MainLayout.razor.css：应用主布局的样式表。

    • NavMenu 组件 (NavMenu.razor)：实现边栏导航。 包括 NavLink 组件 (NavLink)，该组件可向其他 Razor 组件呈现导航链接。 NavLink 组件会在系统加载其组件时自动指示选定状态，这有助于用户了解当前显示的组件。

      • NavMenu.razor.css：应用导航菜单的样式表。

  • Pages 文件夹：包含 Blazor 应用的可路由 Razor 组件 (.razor)。 每个页面的路由都是使用 @page 指令指定的。 该模板包括以下组件：

    • Counter 组件 (Counter.razor)：实现“计数器”页面。

    • Index 组件 (Index.razor)：实现 Home 页。

    • Weather 组件 (Weather.razor)：实现“天气”页面。

  • _Imports.razor：包括要包含在应用组件 (Razor) 中的常见 .razor 指令，如用于命名空间的 @using 指令。

  • App.razor：应用的根组件，用于使用 Router 组件来设置客户端路由。 Router 组件会截获浏览器导航并呈现与请求的地址匹配的页面。

  • Properties 文件夹：在文件中保存launchSettings.json。

  • wwwroot 文件夹：应用的 Web 根目录文件夹，其中包含应用的公共静态资产，例如appsettings.json和示例天气数据 () 的 sample-data/weather.json 和环境应用设置文件。 index.html 网页是实现为 HTML 页面的应用的根页面：

  • Program.cs：应用入口点，用于设置 WebAssembly 主机：

    • App 组件是应用的根组件。 对于根组件集合 (App)，使用 div 的 id（app 中的 Loading…）将 wwwroot/index.html 组件指定为 builder.RootComponents.Add("#app") DOM 元素。

    • 添加并配置了服务（例如，builder.Services.AddSingleton<IMyDependency, MyDependency>()）。

启动项目运行后可以看到渲染的页面

105444106_fc195187-f145-4982-8c8d-4baf774cf7d1

组件

Blazor页面基于组件，例如页面、对话框或数据输入窗体，和其他框架如React、Flutter等理念相同。

组件是内置到 .NET 程序集的 .NET C# 类，它们用于：

  • 定义灵活的 UI 呈现逻辑。

  • 处理用户事件。

  • 可以嵌套和重用。

  • 可作为 Razor 类库或 NuGet 包共享和分发。

例如如下这个计数器页面(Count.razor)是一个组件。点击按钮触发onclick事件，执行IncrementCount方法。

@page "/counter"
@rendermode InteractiveServer

<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++;
    }
}

上手使用非常简单，并且结合一些封装好的UI框架，如Blazorise、MudBlazor、BootstrapBlazor、FluentuiBlazor等，能够增强更多的使用场景和减少开发工作量。

参考

https://learn.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-8.0

2025-02-24，望技术有成后能回来看见自己的脚步。