为何ASP.NET Core中JS colocation需额外操作，CSS colocation却无需？

为什么JS Colocation需要额外操作？ #

• CSS的自动处理是因为ASP.NET Core构建系统会自动识别.cshtml.css文件，将其打包为作用域化CSS（Scoped CSS），并在渲染对应视图时自动注入到页面<head>区域。框架能确定CSS的加载时机（页面渲染前必须加载），因此无需手动引用。
• JS则没有统一的执行标准：部分JS需要在DOM加载完成后运行，部分依赖第三方库，框架无法自动判断你的JS应该在页面哪个位置加载（是<head>还是</body>前），也无法确定依赖顺序。因此.cshtml.js文件不会被自动注入，必须由开发者通过@section Scripts（通常布局文件会在</body>前渲染这个区块）明确指定加载位置和时机。

如何省去手动引用的步骤？ #

方法1：自定义TagHelper自动注入 #

创建一个TagHelper，自动检测当前视图对应的.cshtml.js文件，存在则自动生成<script>标签：

1. 编写TagHelper类：

using Microsoft.AspNetCore.Mvc.Razor.TagHelpers;
using Microsoft.AspNetCore.Razor.TagHelpers;
using Microsoft.AspNetCore.Hosting;
using System.IO;

[HtmlTargetElement("auto-inject-view-scripts", TagStructure = TagStructure.NormalOrSelfClosing)]
public class AutoInjectViewScriptsTagHelper : TagHelper
{
    private readonly IWebHostEnvironment _webHostEnv;
    private readonly ViewContext _viewContext;

    public AutoInjectViewScriptsTagHelper(IWebHostEnvironment webHostEnv, ViewContext viewContext)
    {
        _webHostEnv = webHostEnv;
        _viewContext = viewContext;
    }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = null; // 移除自定义标签本身

        // 获取当前视图的物理路径
        var viewFilePath = _viewContext.ExecutingFilePath;
        var jsFilePath = $"{viewFilePath}.js";

        // 转换为网站根目录相对路径
        var relativeJsPath = jsFilePath
            .Replace(_viewContext.HttpContext.Request.PathBase.ToString(), "")
            .Replace(Path.DirectorySeparatorChar, '/');

        // 检查文件是否存在
        var physicalJsPath = Path.Combine(_webHostEnv.WebRootPath, relativeJsPath.TrimStart('~', '/'));
        if (File.Exists(physicalJsPath))
        {
            output.Content.AppendHtml($"<script src=\"{relativeJsPath}\"></script>");
        }
    }
}

2. 在_ViewImports.cshtml中注册TagHelper（替换YourProjectNamespace为你的项目命名空间）：

@addTagHelper *, YourProjectNamespace

3. 在布局文件的Scripts区块中添加这个TagHelper：

@section Scripts {
    <auto-inject-view-scripts />
}

之后所有视图对应的.cshtml.js文件都会被自动检测并注入，无需手动添加引用。

方法2：使用MSBuild自动生成引用（适合大型项目） #

在项目的.csproj文件中添加MSBuild任务，构建时自动扫描所有.cshtml.js文件，生成一个统一的脚本引用文件，再在布局中引用该文件。示例配置：

<Target Name="GenerateViewScriptReferences" BeforeTargets="Build">
  <ItemGroup>
    <ViewJsFiles Include="**/*.cshtml.js" />
  </ItemGroup>
  <WriteLinesToFile File="wwwroot/js/view-scripts.js" Lines="$(ViewJsFiles.FullPath.Replace('\\','/').Replace($(MSBuildProjectDirectory)/wwwroot/,'~/'))" Overwrite="true" />
</Target>

然后在布局中引用生成的文件：

<script src="~/js/view-scripts.js"></script>

注意：这种方法需要额外处理路径转换，且无法保证脚本的执行顺序，适合对执行顺序无要求的场景。

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