Visual Studio 2019中如何在.cshtml Razor页面嵌入JS资源

你看到的.cshtml节点下挂载关联JS的效果，是Visual Studio文件嵌套显示+页面资源引用共同实现的，和传统web.config配置嵌入资源的逻辑有区别，具体操作步骤如下：

1. 实现解决方案资源管理器中的文件嵌套效果 #

这个效果只是VS的文件层级显示规则，不影响实际功能，按以下操作即可：

• 先正常创建目标Razor视图，比如Home/Index.cshtml
• 在视图所在的同目录下，创建和视图完全同名+.js后缀的脚本文件，即Index.cshtml.js
• 若使用VS2019及以上版本，打开解决方案资源管理器顶部的「文件嵌套」按钮（双文件叠加图标），确认嵌套规则设置为「默认」或「Web」，同命名的.js文件会自动折叠到对应.cshtml节点下
• 如果默认规则不生效，可在文件嵌套选项中选择「自定义设置」，新增规则：后缀为.cshtml.js的文件，父级匹配同路径同名的.cshtml文件，保存后刷新即可生效。

注意：不要修改文件后缀命名，必须保持{视图名}.cshtml.js的格式，否则自动嵌套规则无法识别。

2. 实现JS资源与Razor页面的绑定加载 #

嵌套只是显示效果，要让脚本随页面正常加载，根据你的资源存放方式选对应配置：

方式一：普通静态文件加载（最常用） #

默认MVC项目的Views目录会配置请求拦截，禁止直接访问目录下的静态文件，你可以选择：

• 把关联JS文件放到wwwroot目录下的对应视图路径，比如wwwroot/js/views/home/index.cshtml.js，然后在视图的脚本区块中引用：

@section Scripts {
    <script src="~/js/views/home/index.cshtml.js"></script>
}

• 如果要把JS放在Views目录和视图同路径，需要修改Views目录下的web.config，放行.js后缀的请求：

<system.webServer>
  <handlers>
    <!-- 移除原有拦截规则，新增js放行规则 -->
    <remove name="BlockViewHandler"/>
    <add name="BlockViewHandler" path="*.cshtml" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />
    <add name="JsFileHandler" path="*.js" verb="GET" type="System.Web.StaticFileHandler" />
  </handlers>
</system.webServer>

之后直接在视图中用相对路径引用同目录下的JS即可。

方式二：嵌入资源加载（和web.config嵌入资源逻辑一致） #

如果你需要把JS作为嵌入资源打包到程序集里：

• 选中JS文件，在属性面板把「生成操作」设置为嵌入的资源
• 打开项目的Properties/AssemblyInfo.cs文件，添加资源注册标记，注意命名空间要和文件的实际路径完全对应：

// 格式：[assembly: WebResource("项目默认命名空间.目录层级.文件名.cshtml.js", "application/javascript")]
[assembly: WebResource("MyMvcApp.Controllers.Home.Index.cshtml.js", "application/javascript")]

• 在视图中通过WebResource路径引用资源，建议封装HtmlHelper扩展方法自动生成嵌入资源的引用地址，避免手动写参数出错。

常见问题排查 #

• 同命名JS不嵌套：检查文件是否在同一目录、文件名是否完全匹配（注意大小写、多余空格），确认VS的文件嵌套功能没有设置为「关闭」
• 引用JS返回404：如果是静态文件，检查目录权限和web.config的拦截规则是否正确；如果是嵌入资源，检查AssemblyInfo里注册的资源命名空间、路径是否和文件实际位置完全匹配。

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