ASP.NET MVC中如何在外部JS文件中调用jQuery？

问题根源 #

你遇到的$ is not defined错误，核心是脚本加载顺序和执行时机不匹配：

• 布局页里的jquery.min.js加了defer属性，浏览器会先解析完整个DOM，再加载并执行jQuery
• CustomFunction分部里的DTR.js没有加defer，浏览器解析到该脚本标签时会立即加载执行，此时jQuery还未加载完成，自然找不到$
• ServerTimeClock里的servertimeclock.js加了defer，会和jQuery一起在DOM解析完成后按顺序执行（jQuery在前，所以能正常调用）

解决方案 #

方案1：给CustomFunction里的脚本加defer

这是最简单的修复方式，让DTR.js和jQuery同步延迟执行：

@section CustomFunction{
    <script src="~/js/DTR/DTR.js" defer asp-append-version="true"></script>
}

布局页里的jQuery在自定义脚本之前引入，浏览器会按顺序加载执行，jQuery先就绪后，DTR.js就能正常调用$。

方案2：调整jQuery的引入方式（去掉defer）

如果你的自定义脚本不需要延迟执行，可以把jQuery的defer去掉，确保它在所有自定义脚本之前加载完成：

<!-- 布局页里的JS引入部分修改 -->
<script src="~/lib/jquery/jquery.min.js" asp-append-version="true"></script>
<script src="~/lib/bootstrap/js/bootstrap.bundle.min.js" defer asp-append-version="true"></script>

注：Bootstrap 5的bundle版本不依赖jQuery，把jQuery放在Bootstrap前没问题；如果是Bootstrap 3，本来就要求jQuery先加载，这个顺序也符合要求。

方案3：统一脚本分部的渲染顺序

调整布局页里分部的渲染顺序，确保jQuery在所有依赖它的脚本之前加载完成：

<!-- 布局页里的自定义区域修改 -->
@await RenderSectionAsync("Scripts", required: false)
<!-- 先加载完jQuery，再渲染依赖它的分部 -->
@await RenderSectionAsync("CustomFunction", required: false)
@await RenderSectionAsync("ServerTimeClock", required: false)

额外注意点 #

• 避免在视图里直接写依赖jQuery的内联脚本，除非能确保jQuery已加载完成；如果必须写，也要加上defer或放到依赖jQuery的分部里
• 所有依赖库（比如jQuery）必须在使用它的自定义脚本之前引入

内容的提问来源于stack exchange，提问作者John Phillip Abello