调用@Html.EditorFor模板抛出$ is not defined错误如何解决？

错误根本原因 #

Uncaught ReferenceError: $ is not defined 错误的本质是执行调用jQuery的代码时，jQuery库还未加载完成，结合你使用Editor Template的场景，具体触发原因有两个：

• 脚本加载顺序错误：ASP.NET MVC默认布局页（_Layout.cshtml）通常会把jQuery、Kendo UI的脚本放在页面底部</body>标签之前，你直接写在Editor Template里的内联脚本会在页面渲染到对应位置就执行，此时还没加载到jQuery，自然识别不了$符号。
• Editor Template中定义的@section Scripts无效：MVC框架里，分部视图、编辑器模板这类子视图中声明的@section块不会被上层布局页识别渲染，你写在这个区段里的代码要么根本没有输出到页面，要么还是输出在Editor Template对应的位置，执行时机依旧早于jQuery加载。
• 附加可能：jQuery或Kendo UI的脚本引用路径错误，库本身没有加载成功。

排查解决方法 #

1. 先确认基础脚本配置 #

打开_Layout.cshtml检查脚本引用顺序，必须保证：jQuery > Kendo UI 基础脚本 > 依赖jQuery的自定义脚本。同时打开浏览器F12开发者工具的「网络」面板，刷新页面确认jQuery请求状态为200，没有404错误。
如果希望从根源避免加载顺序问题，可以直接把jQuery的引用移到页面<head>标签内。

2. 修复Editor Template的初始化逻辑 #

不要在编辑器模板内使用@section Scripts，推荐以下两种实现方案：

方案A：全局统一初始化（推荐）

给所有日期选择器输入框加统一的类标识，在布局页的全局脚本位置统一初始化，无需每个字段单独写脚本：

1. 修改Editor Template代码：

@model System.DateTime?
<input id="@ViewData.ModelMetadata.PropertyName" class="kendo-datepicker" title="datepicker" />

2. 在_Layout.cshtml中，jQuery和Kendo脚本引用之后添加全局初始化代码：

$(document).ready(function () {
    $(".kendo-datepicker").kendoDatePicker();
});

方案B：内联脚本延迟执行

如果必须在Editor Template内写初始化逻辑，可以加判断等待jQuery加载完成再执行：

@model System.DateTime?
<input id="@ViewData.ModelMetadata.PropertyName" title="datepicker" />

<script type="text/javascript">
// 轮询直到jQuery加载完成
var initTimer = setInterval(function() {
    if (window.jQuery) {
        clearInterval(initTimer);
        $("#@ViewData.ModelMetadata.PropertyName").kendoDatePicker();
    }
}, 50);
</script>

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