如何在ASP.NET MVC 5的多个视图间共享JS脚本？

你提到的需求非常常见，其实用局部视图（Partial View）结合@section就能完美解决，既避免复制粘贴，又能正常使用@Url.Content()这类Razor语法的Html助手，下面给你详细步骤：

方法一：用局部视图存放共用JS #

这是最直接的方案，因为局部视图是.cshtml文件，完全支持Razor语法：

1. 在项目中新建一个局部视图，比如命名为_SharedFormScripts.cshtml（前缀下划线是MVC中局部视图的惯例），把你的共用JS方法写在这里，放心使用Html助手：

<script>
// 共用方法1：使用@Url.Content生成路径
function loadSomeData() {
    var apiUrl = '@Url.Content("~/api/Data/GetFormOptions")';
    // 后续AJAX请求或其他逻辑
    fetch(apiUrl)
        .then(response => response.json())
        .then(data => { /* 处理数据 */ });
}

// 共用方法2：表单验证或其他通用逻辑
function validateFormInputs() {
    // 验证逻辑
    return $("#form").valid();
}
</script>

2. 在你的Create和Edit视图中，通过@Html.Partial()引用这个局部视图。如果你的布局页有专门的Scripts区域（推荐脚本放在页面底部优化加载），就在视图的@section Scripts里引入：

Create.cshtml示例： #

@section Scripts {
    <!-- 引入共用脚本 -->
    @Html.Partial("_SharedFormScripts")
    
    <!-- 这里可以添加Create视图独有的JS -->
    <script>
        $(document).ready(function() {
            // Create页面专属逻辑
            loadSomeData();
        });
    </script>
}

Edit.cshtml示例： #

@section Scripts {
    @Html.Partial("_SharedFormScripts")
    
    <!-- Edit页面专属逻辑 -->
    <script>
        $(document).ready(function() {
            loadSomeData();
            // 额外的Edit页面处理
        });
    </script>
}

关于@section的适用性 #

你之前考虑的@section完全适合这个场景！因为大多数MVC布局页都会预留@RenderSection("Scripts", required: false)区域，用来存放页面专属或复用的脚本。把共用脚本放在局部视图里，再在每个视图的Scripts section中引入，既保证脚本加载顺序（通常在布局页的底部），又能复用代码，还能正常使用Razor语法。

这种方式的优势：

• 代码只写一次，维护更方便，修改时不用改多个视图
• 支持所有MVC的Html助手和Razor语法，解决了独立.js文件无法使用@Url.Content()的问题
• 可以灵活扩展：每个视图在引入共用脚本后，还能添加自己的专属JS逻辑

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