Blazor 怎么在 Code-behind 文件中写逻辑-C#.Net教程-PHP中文网

Blazor 怎么在 Code-behind 文件中写逻辑

畫卷琴夢

发布： 2025-12-23 12:45:50

原创

242人浏览过

Blazor 中的 Code-behind 是通过 .razor 与同名 .razor.cs 文件（后者为 partial 类并继承 ComponentBase）分离 UI 和逻辑的可行方案，支持参数、生命周期、服务注入，适用于复杂组件或需复用/测试的场景。

blazor 怎么在 code-behind 文件中写逻辑

Blazor 中的 Code-behind 是一种将组件的 UI（.razor 文件）和 C# 逻辑（.razor.cs 文件）分离的方式，适合管理较复杂或需复用的业务逻辑。它不是 Blazor 官方强制推荐的模式（官方倾向使用 @code 块或独立服务），但完全支持，且在团队协作、测试友好性、代码分层等方面有实际价值。

Code-behind 的基本写法

要启用 Code-behind，需满足两个条件：文件命名一致 + 继承关系正确。

.razor 文件只保留标记（HTML/Blazor 指令），不写 @code 块；顶部用 @inherits 显式指定基类（即 .razor.cs 中的类）
.razor.cs 文件需继承 ComponentBase，并用 partial 声明与 .razor 同名的部分类

例如：

Counter.razor

@inherits CounterBase
<h1>当前计数：@currentCount</h1>
<button class="btn btn-primary" @onclick="IncrementCount">点击加一</button>

登录后复制

Counter.razor.cs

public partial class CounterBase : ComponentBase
{
    protected int currentCount = 0;
<pre class="brush:php;toolbar:false;">protected void IncrementCount()
{
    currentCount++;
    StateHasChanged(); // 如需手动触发重渲染（通常事件中自动触发，此处可省略）
}

登录后复制

}

访问 Razor 页面中的成员（参数、状态、生命周期）

Code-behind 类天然拥有对组件上下文的访问能力，只要按标准方式声明即可：

用 [Parameter] 属性接收父组件传入的参数（在 .razor.cs 中定义）
生命周期方法（OnInitialized、OnParametersSet、OnAfterRender 等）直接重写即可
NavigationManager、JSRuntime 等服务可通过 [Inject] 注入（需确保该类是 partial 且继承 ComponentBase）

示例：

星绘

豆包旗下 AI 写真、P 图、换装和视频生成

429

查看详情

public partial class CounterBase : ComponentBase
{
    [Inject] public NavigationManager Navigation { get; set; } = default!;
    [Parameter] public int InitialValue { get; set; } = 0;
    protected int currentCount = 0;
<pre class="brush:php;toolbar:false;">protected override void OnInitialized()
{
    currentCount = InitialValue;
}

protected void NavigateHome() => Navigation.NavigateTo("/");

登录后复制

}