Blazor Razor页面开发有哪些代码组织模式与最佳实践？

Blazor 原生支持多种代码组织模式，既可以用示例中的单文件模式，也可以实现类似 MVC 的视图与逻辑分离，业内常用的实现方案如下：

1. 部分类（代码后置）方案 #

这是官方原生支持、最接近 MVC 分层逻辑的分离方案，无需额外依赖。
你可以为同一个 Razor 组件创建两个同名文件：

• xxx.razor：仅存放 HTML、Razor 绑定语法，属于视图层
• xxx.razor.cs：存放 C# 逻辑代码，定义为和组件类同名的 partial 类，编译时会和 razor 文件生成的类自动合并

示例：
Index.razor 内容：

<div class="text">@Sometext</div>

Index.razor.cs 内容：

public partial class Index
{
    public string Sometext { get; set; } = "text..";

    // 原@code块中的生命周期方法、事件处理逻辑都可以放在这里
    protected override void OnInitialized()
    {
        // 初始化逻辑
    }
}

样式也可以通过官方 CSS 隔离特性分离到独立的 Index.razor.css 文件中，避免全局样式污染。

2. 基类继承方案 #

适合多个组件存在公共UI层逻辑的场景，你可以定义继承自 ComponentBase 的基类，把公共逻辑放在基类中，Razor 组件通过 @inherits 指令继承基类即可直接使用基类的属性和方法。
示例基类代码：

public class ComponentBaseEx : ComponentBase
{
    [Inject] protected NavigationManager NavManager { get; set; }

    protected void NavigateToHome()
    {
        NavManager.NavigateTo("/");
    }
}

Razor 组件中使用：

@inherits ComponentBaseEx
<button @onclick="NavigateToHome">返回首页</button>

3. 服务层分离方案 #

也就是你当前正在使用的模式，把和UI无关的业务逻辑完全抽离到独立的服务类中，通过 Blazor 原生的依赖注入机制注入到组件中使用。
这种模式的优势是业务逻辑完全和组件解耦，既可以跨组件复用，也可以单独做单元测试，是中大型项目的首选方案。注意不要在服务类中编写组件UI相关的逻辑（比如调用StateHasChanged），这类逻辑保留在组件层处理即可。

最佳实践 #

• 小型、逻辑简单的组件直接用单文件模式即可，无需强行分离，单文件的代码集中度更高，维护成本更低
• 复杂页面、多人协作的项目优先使用部分类代码后置方案，视图和逻辑分离，前端和后端开发者可以独立维护对应文件
• 业务逻辑优先抽离到服务层，不要在组件的C#代码中编写业务判断、数据处理等非UI逻辑
• 公共的UI层通用逻辑抽离到组件基类，不要在多个组件中重复编写相同的UI处理代码
• 所有样式优先使用CSS隔离的独立文件存放，不要在razor文件中内嵌<style>块

内容的提问来源于stack exchange，提问作者Emilis Vadopalas