《进击吧！Blazor！》系列入门教程第一章 3.页面制作

最新推荐文章于 2025-09-25 21:44:00 发布

原创

最新推荐文章于 2025-09-25 21:44:00 发布 · 4.2k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#c# #webassembly #前端 #asp.net

本文介绍了如何使用Blazor WebAssembly框架构建一个待办事项应用，包括设置项目、引入AntDesignBlazor库、实现路由、布局、菜单、组件交互等功能。教程详细展示了从创建待办列表、添加、删除、完成任务，到动态显示和编辑任务等步骤，让开发者能够快速掌握Blazor应用开发。

《进击吧！Blazor！》是本人与张善友老师合作的Blazor零基础入门教程视频，此教程能让一个从未接触过Blazor的程序员掌握开发Blazor应用的能力。
视频地址：https://space.bilibili.com/483888821/channel/detail?cid=151273
Blazor WebAssembly 是单页应用 (SPA) 框架，用于使用 .NET 生成交互式客户端 Web 应用，采用 C# 代替 JavaScript 来编写前端代码
本系列文章基于《进击吧！Blazor！》编写，升级.Net5，但因篇幅有限，省略了部分代码，完整示例代码：https://github.com/TimChen44/Blazor-ToDo

作者：陈超超
Ant Design Blazor 项目贡献者，拥有十多年从业经验，长期基于.Net技术栈进行架构与开发产品的工作，现就职于正泰集团。
邮箱：timchen@live.com
欢迎各位读者有任何问题联系我，我们共同进步。

从这次分享开始我通过制作一个ToDo应用来介绍Balzor的开发。

准备工作

项目准备

打开上一次分享内容创建项目
修改\wwwroot\css\app.css文件，只保留以下代码用于配置程序发生未捕获异常时的提示样式

#blazor-error-ui {
   
   
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
   
   
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

修改index.htm文件，移除对‘bootstrap’样式的引用，因为我们使用ant-design-blazor来做UI

    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" /><!--此行代码删除-->

引入ant-design-blazor包

在这里插入图片描述
✨ 特性
🌈 提炼自企业级中后台产品的交互语言和视觉风格。
📦 开箱即用的高质量 Razor 组件，可在多种托管方式共享。
💕 支持基于 WebAssembly 的客户端和基于 SignalR 的服务端 UI 事件交互。
🎨 支持渐进式 Web 应用（PWA）
🛡 使用 C# 构建，多范式静态语言带来高效的开发体验。
⚙️ 基于 .NET Standard 2.1/.NET 5，可直接引用丰富的 .NET 类库。
🎁 可与已有的 ASP.NET Core MVC、Razor Pages 项目无缝集成。

项目地址：https://github.com/ant-design-blazor/ant-design-blazor
文档地址：https://antblazor.com/

安装

用NuGet安装AntDesign包

Install-Package AntDesign -Version 0.5.3

在 Program.cs 中注册:

public static async Task Main(string[] args)
{
   
   
    //其他代码
    builder.Services.AddAntDesign();
    await builder.Build().RunAsync();
}

在 wwwroot/index.html 中引入静态文件:

<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet">
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>

在 _Imports.razor 中加入命名空间

@using AntDesign

为了动态地显示弹出组件，需要在 App.razor 末尾添加一个 <AntContainer /> 组件。

<AntContainer /> <!--添加在这里-->

路由

在页面中切换，必定使用路由，我们先了解一下blazor的路由机制
App.razor 文件

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

在上面第一行把当前项目的程序集赋值给了 Router 组件的 AppAssembly 属性，这样程序在启动时检索程序集中所有的页面用于路由，路由信息通过页面文件顶部的 @page 标记进行定义。还可以通过 AdditionalAssemblies 属性支持多个程序集。
Route里面有两个模板属性，分别是路由命中和未命中显示的内容、

RouteView 组件用于显示路由的页面，这里从 Router 接收 routeData 以及任何所需的参数。
DefaultLayout="@typeof(MainLayout)" 定义了默认布局。

布局文件及菜单

编辑 Shared/MainLayout.razor 文件，制作程序的布局以及菜单。

@inherits LayoutComponentBase
<Layout>
    <Sider Style="overflow: auto;height: 100vh;position: fixed;left: 0;">
        <div class="logo">
            进击吧！Blazor！
        </div>
        <Menu Theme="MenuTheme.Dark">
            <MenuItem RouterLink="/">
                主页
            </MenuItem>
            <MenuItem RouterLink="/today" RouterMatch="NavLinkMatch.Prefix">
                我的一天
            </MenuItem>
            <MenuItem RouterLink="/search" RouterMatch="NavLinkMatch.Prefix">
                全部