ASP.NET Core中如何基于环境条件渲染视图的@section样式？

问题根源 #

Razor视图的@section声明必须是顶级元素，不能嵌套在@if这类代码块内部。你之前把整个@section Styles包在环境判断代码里，Razor解析器无法识别这个section，所以内容不会被渲染到布局页的对应位置。

可行解决方案 #

1. 在@section内部写环境判断（最直接）

把环境判断逻辑移到@section内部，让@section保持顶级：

@inject IWebHostEnvironment env

@section Styles {
    @if (env.IsDevelopment())
    {
        <link rel="stylesheet" href="~/css/site-dev.css" />
    }
    else
    {
        <link rel="stylesheet" href="~/css/site-prod.css" />
    }
}

这种写法既符合Razor语法规则，又能实现按需加载。

2. 使用官方<environment>标签助手（更简洁）

ASP.NET Core提供了专门的环境标签助手，无需手动判断环境值，写法更直观：

@section Styles {
    <environment include="Development">
        <link rel="stylesheet" href="~/css/site-dev.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="~/css/site-prod.css" />
    </environment>
}

默认项目已包含Microsoft.AspNetCore.Mvc.TagHelpers，如果你的项目没有，需要在_ViewImports.cshtml中添加@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers。

3. 局部视图封装复杂逻辑（适合多视图复用）

如果多个视图都需要相同的环境加载逻辑，可以把代码封装到局部视图：

• 创建局部视图_EnvironmentSpecificStyles.cshtml：

@inject IWebHostEnvironment env
@if (env.IsDevelopment())
{
    <link rel="stylesheet" href="~/css/site-dev.css" />
}
else
{
    <link rel="stylesheet" href="~/css/site-prod.min.css" />
}

• 在视图中引用：

@section Styles {
    @await Html.PartialAsync("_EnvironmentSpecificStyles")
}

脚本按需加载的同理方案 #

脚本的按需渲染逻辑和样式完全一致，把@section Styles换成@section Scripts即可，比如：

@section Scripts {
    <environment include="Development">
        <script src="~/js/site-dev.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="~/js/site-prod.min.js"></script>
    </environment>
}

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