Blazor Workshop 技术指南：从组件开发到高级功能实现-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00564/article/details/148575777

Blazor Workshop 技术指南：从组件开发到高级功能实现

blazor-workshop Blazor workshop 项目地址: https://gitcode.com/gh_mirrors/bl/blazor-workshop

引言

Blazor 是微软推出的基于 .NET 的 Web 框架，允许开发者使用 C# 而不是 JavaScript 来构建交互式 Web UI。本文将深入解析一个典型的 Blazor 工作坊内容，从基础组件开发到高级功能实现，帮助开发者全面掌握 Blazor 的核心概念和实践技巧。

一、Blazor 基础入门

1.1 初始设置与环境准备

在开始 Blazor 开发前，需要确保开发环境已正确配置。创建一个简单的 "Hello World" 项目是验证环境是否就绪的最佳方式。Blazor 目前支持两种托管模式：

Blazor WebAssembly：客户端在浏览器中运行 .NET 代码
Blazor Server：服务器端处理 UI 交互并通过 SignalR 实时更新

1.2 组件基础概念

Blazor 应用由组件构成，每个组件都是一个自包含的 UI 单元。关键概念包括：

@page 指令：定义可路由组件
@code 块：包含组件的逻辑和状态
组件参数：使用 [Parameter] 特性标记的可公开属性
依赖注入：通过 @inject 指令使用服务

@page "/demo"
@inject HttpClient Http

<h3>Demo Component</h3>

@code {
    [Parameter]
    public string Title { get; set; }
    
    private List<Item> items;
    
    protected override async Task OnInitializedAsync()
    {
        items = await Http.GetFromJsonAsync<List<Item>>("api/items");
    }
}

二、组件交互与数据绑定

2.1 事件处理

Blazor 提供了多种处理 DOM 事件的方式：

<button @onclick="HandleClick">点击我</button>
<button @onclick="() => count++">Lambda表达式</button>
<button @onclick="async () => await Task.Delay(100)">异步处理</button>

@code {
    private int count;
    
    private void HandleClick()
    {
        count++;
    }
}

2.2 数据绑定机制

Blazor 提供了灵活的数据绑定方式：

<!-- 基本绑定 -->
<input @bind="name" />

<!-- 指定绑定事件 -->
<input @bind-value="name" @bind-value:event="oninput" />

<!-- 双向绑定分解 -->
<input value="@name" 
       @onchange="@((ChangeEventArgs e) => name = e.Value.ToString())" />

2.3 组件间通信

父子组件通信是常见需求：

<!-- 父组件 -->
<ChildComponent OnSomeEvent="HandleChildEvent" />

<!-- 子组件 -->
<button @onclick="() => OnSomeEvent.InvokeAsync(data)">触发事件</button>

@code {
    [Parameter]
    public EventCallback<DataType> OnSomeEvent { get; set; }
}

三、路由与导航

3.1 路由配置

Blazor 的路由系统基于 @page 指令：

@page "/products"
@page "/products/{Category}"
@page "/products/{Category:int}"

3.2 导航控制

使用 NavigationManager 进行编程式导航：

@inject NavigationManager Navigation

private void RedirectToHome()
{
    Navigation.NavigateTo("/");
}

3.3 生命周期方法

组件生命周期方法提供了精细控制：

protected override void OnInitialized() { }  // 组件初始化
protected override async Task OnInitializedAsync() { }  // 异步初始化
protected override void OnParametersSet() { }  // 参数变化
protected override void OnAfterRender(bool firstRender) { }  // 渲染完成
public void Dispose() { }  // 组件销毁

四、状态管理策略

4.1 依赖注入服务

// 注册服务
builder.Services.AddScoped<AppState>();

// 使用服务
@inject AppState State

4.2 级联值

<CascadingValue Value="@theme">
    <ChildComponent />
</CascadingValue>

<!-- 子组件中 -->
[CascadingParameter]
public Theme theme { get; set; }

五、表单与验证

5.1 表单组件

<EditForm Model="@model" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    
    <InputText @bind-Value="model.Name" />
    <ValidationMessage For="@(() => model.Name)" />
    
    <button type="submit">提交</button>
</EditForm>

5.2 自定义输入组件

继承 InputBase<T> 创建自定义输入控件：

public class InputSlider : InputBase<int>
{
    protected override bool TryParseValueFromString(string value, 
        out int result, out string errorMessage)
    {
        // 解析逻辑
    }
    
    protected override string FormatValueAsString(int value)
    {
        // 格式化逻辑
    }
}

六、身份认证与授权

6.1 认证配置

builder.Services.AddOidcAuthentication(options =>
{
    options.ProviderOptions.Authority = "...";
    options.ProviderOptions.ClientId = "...";
});

6.2 授权控制

<AuthorizeView>
    <Authorized>
        欢迎，@context.User.Identity.Name!
    </Authorized>
    <NotAuthorized>
        请登录
    </NotAuthorized>
</AuthorizeView>

@attribute [Authorize(Roles = "admin")]

七、JavaScript 互操作

7.1 调用 JavaScript

@inject IJSRuntime JSRuntime

private async Task ShowAlert()
{
    await JSRuntime.InvokeVoidAsync("alert", "Hello from Blazor!");
}

7.2 从 JavaScript 调用 .NET

[JSInvokable]
public static Task<string> GetMessage()
{
    return Task.FromResult("Hello from .NET!");
}

八、模板化组件

8.1 RenderFragment 使用

<TemplateDemo>
    <Header>这是标题</Header>
    <Content Context="item">
        <p>@item.Name</p>
    </Content>
</TemplateDemo>

@code {
    [Parameter]
    public RenderFragment Header { get; set; }
    
    [Parameter]
    public RenderFragment<Item> Content { get; set; }
}

8.2 泛型组件

@typeparam TItem

@foreach (var item in Items)
{
    @ItemTemplate(item)
}

@code {
    [Parameter]
    public RenderFragment<TItem> ItemTemplate { get; set; }
    
    [Parameter]
    public IEnumerable<TItem> Items { get; set; }
}