在MVC框架的View视图中如何调用外部JavaScript文件？

1. 确认静态资源配置 #

• 先确认项目已启用静态文件中间件：.NET 6+版本的Program.cs、.NET 5及更早版本的Startup.cs中，必须存在app.UseStaticFiles();配置，该配置默认已开启，缺失时手动补在路由配置前即可。
• 确认你创建的script文件夹存放在项目的wwwroot根目录下，这是MVC默认的静态资源托管目录，比如脚本完整路径为wwwroot/script/custom.js。

2. 在视图中引入独立脚本 #

必须保证你的脚本在jQuery引用之后加载，避免因依赖缺失报错，两种引入方式按需选择：

方式1：直接在视图中插入引用 #

在.cshtml视图文件的对应位置，按顺序插入引用标签：

<!-- 先引入项目自带的jQuery，路径和你项目现有jQuery引用路径保持一致 -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<!-- 再引入你封装好的独立脚本 -->
<script src="~/script/你的脚本文件名.js"></script>

注意：路径前加~是MVC的标准写法，代表wwwroot根目录，可避免部署后路径匹配错误。

方式2：通过布局页脚本节引入（推荐） #

如果你的视图使用了共享布局页_Layout.cshtml，建议把脚本放到Scripts节中，会自动渲染到布局页底部预留的脚本位置，避免DOM未加载就执行JS的问题：

@section Scripts {
    <script src="~/script/你的脚本文件名.js"></script>
}

3. 独立JS文件代码调整注意事项 #

• 原视图脚本中如果用到了Razor语法生成的变量，比如@Model.Id、@Url.Action()这类，不能直接复制到独立JS文件中：Razor语法仅在.cshtml文件内生效，需要提前在视图中声明全局变量传递参数，示例如下：
  视图中先声明参数：

  <script>
      window.pageConfig = {
          dataId: @Model.Id,
          submitUrl: '@Url.Action("Save", "Business")'
      }
  </script>
  

  独立JS文件中直接调用变量即可：console.log(pageConfig.dataId)
• 所有jQuery逻辑建议包裹在DOM加载完成的回调内，避免找不到元素：

  $(function() {
      // 你封装的所有jQuery逻辑放在这里即可
  })
  

4. 生效验证 #

运行项目后打开浏览器开发者工具的「网络」面板，刷新页面查看你的JS文件加载状态，状态码为200即引入成功，若为404请检查文件夹位置、文件名拼写是否正确。

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