Blazor .razor.cs 文件使用方法

Blazor 中的 .razor.cs 文件用于分离 C# 逻辑与

HTML 标记，适用于逻辑复杂、需单元测试或团队协作的中大型组件；必须使用 partial 类且命名空间严格一致，继承 ComponentBase，参数和功能均不受影响。

Blazor 中的 .razor.cs 文件是用来分离 C# 逻辑与 HTML 标记的标准方式，适合中大型组件或需要更好可维护性、测试性、团队协作的场景。它不是必须的，但用对了能显著提升代码清晰度。

什么时候该用 .razor.cs 文件

当组件逻辑变复杂，比如包含多个方法、状态管理、依赖注入、生命周期重写（OnInitializedAsync 等），或者你希望把业务逻辑抽离出来便于单元测试时，就该考虑拆分。

• 避免 @code{...} 区块过长、混杂 UI 和逻辑
• 方便在类上加 XML 注释、实现接口、继承基类
• 支持更自然的构造函数注入（如 public MyComponent(IHttpClientFactory factory)）

基本使用步骤

以组件 Counter.razor 为例：

• 保留原 Counter.razor，只留 HTML 和指令（如 @page、@inject），删掉整个 @code 块
• 新建同名文件 Counter.razor.cs，放在同一目录下
• 在 .razor.cs 中声明 public partial class Counter : ComponentBase
• 确保命名空间与 .razor 文件一致（否则编译报错：“无法识别 partial 类”）
• 把原来 @code 里的字段、属性、方法、生命周期方法全部移到 .razor.cs 中

关键细节注意

几个容易出错但很关键的点：

• 必须是 partial 类：Blazor 编译器会把 .razor 自动生成一个 partial 类，和你手写的 .razor.cs 合并；缺 partial 就报错
• 命名空间严格一致：两个文件的 namespace 必须完全相同（包括大小写），否则无法合并
• 继承 ComponentBase：手动写的类需显式继承 ComponentBase（或其子类），否则无法识别为 Blazor 组件
• 参数仍用 [Parameter]：属性上保持 [Parameter] 特性，绑定机制不受影响

搭配其他功能也照常工作

拆分后，所有 Blazor 功能依然可用：

• 依赖注入（@inject 在 .razor 中写，字段在 .razor.cs 中声明即可）
• 事件绑定（@onclick="HandleClick" → 方法在 .razor.cs 中定义）
• CSS 隔离（Counter.razor.css 仍按原规则生效）
• 布局、级联参数、@key 等高级特性都不受影响

基本上就这些。不复杂但容易忽略命名空间和 partial 关键字。