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

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当前计数:@currentCount
Counter.razor.cs
public partial class CounterBase : ComponentBase
{
protected int currentCount = 0;
protected void IncrementCount()
{
currentCount++;
StateHasChanged(); // 如需手动触发重渲染(通常事件中自动触发,此处可省略)
}}
访问 Razor 页面中的成员(参数、状态、生命周期)
Code-behind 类天然拥有对组件上下文的访问能力,只要按标准方式声明即可:
- 用
[Parameter]属性接收父组件传入的参数(在 .razor.cs 中定义) - 生命周期方法(
OnInitialized、OnParametersSet、OnAfterRender等)直接重写即可 -
NavigationManager、JSRuntime等服务可通过[Inject]注入(需确保该类是 partial 且继承 ComponentBase)
示例:
public partial class CounterBase : ComponentBase
{
[Inject] public NavigationManager Navigation { get; set; } = default!;
[Parameter] public int InitialValue { get; set; } = 0;
protected int currentCount = 0;
protected override void OnInitialized()
{
currentCount = InitialValue;
}
protected void NavigateHome() => Navigation.NavigateTo("/");}
注意事项和常见坑
Code-behind 不是“魔法”,它依赖编译器对 partial 类的合并,因此必须严格遵守规则:
- 两个文件的命名必须完全一致(如
MyPage.razor和MyPage.razor.cs),且在同一目录下 - .razor.cs 中的类必须是
public partial,且继承ComponentBase(或其子类) - 不要在 .razor 中再写
@code块,否则会引发编译错误(partial 类重复定义) - 如果用了
@page,仍需写在 .razor 文件顶部(@page "/counter"),.razor.cs 不处理路由
什么时候值得用 Code-behind?
它更适合以下场景:
- 组件逻辑较重,想把数据处理、状态机、表单验证等抽离出来,便于单元测试
- 需要多页面共享同一套组件基类(比如带权限检查、日志记录的 BasePage)
- 团队习惯 MVVM 或传统 Web Forms 风格,希望 UI 和逻辑物理隔离
- 生成代码或模板引擎输出的组件,需要稳定接口契约
对于简单组件,直接用 @code 更轻量直观;过度拆分反而增加维护成本。
基本上就这些。Code-behind 在 Blazor 里是可行、可控、可测试的路径,关键在于保持命名和继承的一致性,不复杂但容易忽略细节。










