深入解析Blazor WebAssembly核心组件开发实践-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00525/article/details/148416909

深入解析Blazor WebAssembly核心组件开发实践

practical-aspnetcore 该项目提供了关于ASP.NET Core实际应用开发的一系列教程和示例，涵盖了从基础知识到高级主题，是一个实用的学习资源库。适合于想要掌握ASP.NET Core技术栈的开发者进行学习和参考。项目地址: https://gitcode.com/gh_mirrors/pr/practical-aspnetcore

Blazor WebAssembly作为.NET生态中的前端框架，允许开发者使用C#替代JavaScript来构建交互式Web应用。本文将基于dodyg/practical-aspnetcore项目中的Blazor Wasm示例，系统性地讲解Blazor组件开发的核心概念和最佳实践。

一、Blazor组件基础

1.1 最小化Hello World示例

Blazor应用最基本的构成单元是组件，每个组件由一个.razor文件定义。最简单的组件可以仅包含一行HTML标记：

<h1>Hello, World!</h1>

运行项目时使用dotnet watch run命令，Kestrel服务器会自动启动并托管应用。

1.2 组件参数传递

组件可以通过参数接收外部传入的数据：

// MyComponent.razor
<h3>@Title</h3>

@code {
    [Parameter]
    public string Title { get; set; }
}

使用时通过标记属性传递参数：

<MyComponent Title="欢迎使用Blazor" />

注意：项目文件夹名称会作为默认命名空间，因此建议使用Pascal命名法。

二、组件交互模式

2.1 组件引用与方法调用

通过@ref指令可以获取组件实例引用，进而调用其公共方法：

<Counter @ref="counterRef" />

@code {
    private Counter counterRef;
    
    private void IncrementCounter()
    {
        counterRef.Increment();
    }
}

在Counter组件中需要定义公共方法并调用StateHasChanged()通知UI更新：

@code {
    public void Increment()
    {
        currentCount++;
        StateHasChanged();
    }
}

2.2 子内容渲染

组件可以通过RenderFragment接收并渲染子内容：

<ParentComponent>
    <ChildComponent />
</ParentComponent>

父组件定义：

<div class="parent">
    @ChildContent
</div>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

关键点：参数名必须为ChildContent。

三、数据绑定与事件处理

3.1 自定义事件

组件可以通过EventCallback触发自定义事件：

// ChildComponent.razor
<button @onclick="OnClick">触发事件</button>

@code {
    [Parameter]
    public EventCallback<string> OnSomethingHappened { get; set; }

    private async Task OnClick()
    {
        await OnSomethingHappened.InvokeAsync("事件已触发");
    }
}

父组件处理：

<ChildComponent OnSomethingHappened="HandleEvent" />

@code {
    private void HandleEvent(string message)
    {
        Console.WriteLine(message);
    }
}

3.2 双向数据绑定

Blazor提供了多种数据绑定方式：

// 简单绑定
<input @bind="Name" />

// 带格式的绑定
<input @bind="StartDate" @bind:format="yyyy-MM-dd" />

// 自定义get/set
<input @bind:get="Value" @bind:set="OnValueChanged" />

@code {
    private string Name { get; set; }
    private DateTime StartDate { get; set; } = DateTime.Now;
    private string Value { get; set; }

    private void OnValueChanged(string value)
    {
        Value = value;
        // 自定义处理逻辑
    }
}

四、高级组件模式

4.1 级联值传递

Blazor支持两种级联值传递方式：

按类型传递：

<CascadingValue Value="themeContext">
    <ChildComponent />
</CascadingValue>

// 子组件通过属性接收
[Parameter]
public ThemeContext ThemeContext { get; set; }

按名称传递：

<CascadingValue Name="Theme" Value="dark">
    <ChildComponent />
</CascadingValue>

// 子组件指定名称接收
[CascadingParameter(Name = "Theme")]
public string ThemeName { get; set; }

4.2 动态级联值

使用CascadingValueSource实现动态级联值：

var themeSource = new CascadingValueSource<ThemeInfo>(
    new ThemeInfo { ThemeColor = "blue" },
    isFixed: false);

// 更新值
themeSource.NotifyChangedAsync(new ThemeInfo { ThemeColor = "red" });

4.3 属性展开

通过字典动态展开组件属性：

<input @attributes="InputAttributes" />

@code {
    private Dictionary<string, object> InputAttributes = new()
    {
        { "maxlength", "10" },
        { "placeholder", "请输入..." },
        { "class", "form-control" }
    };
}

五、实战案例

5.1 表单处理

Blazor提供EditForm组件简化表单处理：

<EditForm Model="@user" OnValidSubmit="HandleSubmit">
    <DataAnnotationsValidator />
    
    <InputText @bind-Value="user.Name" />
    <InputNumber @bind-Value="user.Age" />
    <InputCheckbox @bind-Value="user.IsActive" />
    
    <button type="submit">提交</button>
</EditForm>

@code {
    private User user = new();
    
    private void HandleSubmit()
    {
        // 处理表单提交
    }
}

5.2 QuickGrid使用

Blazor的QuickGrid组件提供了强大的数据展示功能：

<QuickGrid Items="@people">
    <PropertyColumn Property="@(p => p.Id)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Name)" Format="upper-case" />
    <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" />
    <TemplateColumn>
        <button @onclick="() => DeletePerson(context)">删除</button>
    </TemplateColumn>
</QuickGrid>