抠丁客 抠丁客
项目
编辑 (2025/12/26)

Blazor UI：整体介绍

Blazor 是一个使用.NET构建交互式客户端Web UI的框架。它使.NET开发者能够使用C#和Razor语法创建单页面Web应用程序。

ABP提供了完善的基础设施和集成方案，让您的Blazor开发更轻松、舒适和愉快。ABP支持多种Blazor托管模型：

  • Blazor WebAssembly (WASM)：客户端托管模型，整个应用在浏览器中通过WebAssembly运行
  • Blazor Server：服务端托管模型，通过实时SignalR连接实现交互
  • Blazor WebApp：.NET 8引入的新混合/统一模型，结合了Server和WebAssembly方法的优势
  • MAUI Blazor：使用Blazor和MAUI构建跨平台原生应用

本文档概述了ABP Blazor UI集成方案并重点介绍了一些主要特性。

快速开始

您可以通过以下文档立即开始使用ABP和Blazor UI：

模块化设计

模块化是ABP的核心目标之一。在UI方面也不例外；您可以开发具有独立可复用UI页面和组件的模块化应用及可复用应用模块。

应用启动模板 预装了一些应用模块。这些模块拥有自己的UI页面，并嵌入到各自的NuGet包中。您在解决方案中看不到它们的代码，但在运行时它们能正常工作。

动态C#客户端代理

动态C#客户端代理系统让从UI消费服务端HTTP API变得极其简单。您只需注入应用服务接口，就能像使用本地服务方法调用一样消费远程API。

示例：从服务器获取图书列表并在UI上展示

@page "/books"
@using Acme.BookStore.Books
@using Volo.Abp.Application.Dtos
@inject IBookAppService BookAppService

<ul>
    @foreach (var book in Books)
    {
        <li>
            @book.Name (作者：@book.AuthorName)
        </li>
    }
</ul>

@code {
    private IReadOnlyList<BookDto> Books { get; set; } = new List<BookDto>();

    protected override async Task OnInitializedAsync()
    {
        var result = await BookAppService.GetListAsync(
            new PagedAndSortedResultRequestDto()
        );
        
        Books = result.Items;
    }
}
  • 此Razor组件（页面）使用@inject IBookAppService BookAppService获取服务代理引用
  • 在OnInitializedAsync中使用BookAppService.GetListAsync获取图书列表，就像常规的C#方法调用
  • 最后，页面在UI上以列表形式渲染图书

ABP为您处理所有底层细节，包括正确的HTTP调用、JSON序列化、异常处理和身份验证。

详见动态C#客户端代理文档。

主题系统

ABP提供完整的主题系统，具有以下目标：

  • 可复用的 应用模块 采用主题无关方式开发，可与任何UI主题配合使用
  • UI主题由最终应用决定
  • 主题通过NuGet包分发，易于升级
  • 最终应用可以自定义所选主题

当前可用主题

目前官方提供三种主题：

基础库

所有主题都预装并支持一组标准库：

这些库被选为基础库，可供应用程序和模块使用。

由于Blazorise库已以原生方式为Bootstrap组件提供必要功能，因此不使用Bootstrap的JavaScript部分。

自2021年6月起，Blazorise库采用双许可证：开源和商业。根据您的年收入，可能需要购买商业许可证。详见此公告。Blazorise许可证已与ABP捆绑，商业客户无需额外购买Blazorise许可证。

布局

主题提供布局功能。因此，您已经拥有一个响应式布局，并实现了标准功能。以下截图来自基础主题的布局：

基础主题应用布局

详见主题文档获取更多布局选项和其他细节。

布局组件

典型布局由多个部分组成。主题系统提供菜单、工具栏、页面提示等功能，让您的应用和所用模块能够动态控制布局。

全局样式与脚本/打包与压缩

ABP提供了管理应用全局脚本和样式依赖的标准方法。这是模块化的重要特性，因为某些模块可能有此类依赖，它们可以以此方式声明依赖关系。

详见管理全局脚本与样式文档。

服务

ABP提供了可在应用中使用的实用服务，包括：

依赖注入

Razor组件默认不支持构造函数注入。ABP使得在组件的代码后置文件中通过构造函数注入依赖成为可能。

示例：在组件代码后置文件中通过构造函数注入服务

using Microsoft.AspNetCore.Components;

namespace MyProject.Blazor.Pages
{
    public partial class Index
    {
        private readonly NavigationManager _navigationManager;

        public Index(NavigationManager navigationManager)
        {
            _navigationManager = navigationManager;
        }
    }
}

ABP通过自动注册组件到依赖注入系统并从中解析组件来实现此功能。

如果您愿意，仍然可以继续使用属性注入和标准的[Inject]方式。

从依赖注入系统解析组件使得轻松替换依赖模块的组件成为可能。

错误处理

默认情况下，Blazor在发生任何未处理异常时会在页面底部显示黄色线条。但在实际应用中这并不实用。

ABP为Blazor UI提供了自动错误处理系统。

自定义

虽然主题和一些模块以NuGet包形式提供，但您仍可以根据需要替换/重写和自定义它们。详见自定义/重写组件文档。

在本文档中