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中
关键细节注意
几个容易出错但很关键的点:
Zoomify 是一款基于的简单带缩放效果的 jQuery lightbox 插件,它使用简单,出来提供基本的属性外,还提供了自动事件和自定义方法,能够满足大多数需求。
-
必须是 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 关键字。









