MVC4 和 datepicker：“0x800a01b6 - JavaScript 运行时错误：对象不支持属性或方法 'datepicker'”答案

【问题标题】：MVC4 and datepicker: "0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'datepicker'"MVC4 和 datepicker：“0x800a01b6 - JavaScript 运行时错误：对象不支持属性或方法 'datepicker'”
【发布时间】：2016-04-12 15:45:21
【问题描述】：

我有一个给出上述错误的 MVC 应用程序。应用程序默认引用 Scripts 文件夹中的 jquery-1.8.2.js。使用 NuGet，我添加了 jquery-ui-1.11.4.js。

以下是相关的代码部分：

BundleConfig.cs：

public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery.ui.core.css",
                    "~/Content/themes/base/jquery.ui.resizable.css",
                    "~/Content/themes/base/jquery.ui.selectable.css",
                    "~/Content/themes/base/jquery.ui.accordion.css",
                    "~/Content/themes/base/jquery.ui.autocomplete.css",
                    "~/Content/themes/base/jquery.ui.button.css",
                    "~/Content/themes/base/jquery.ui.dialog.css",
                    "~/Content/themes/base/jquery.ui.slider.css",
                    "~/Content/themes/base/jquery.ui.tabs.css",
                    "~/Content/themes/base/jquery.ui.datepicker.css",
                    "~/Content/themes/base/jquery.ui.progressbar.css",
                    "~/Content/themes/base/jquery.ui.theme.css"));
    }
}

}

_Layout.cshmtl：

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
<script src="@Url.Content("~/Scripts/FloatingDiv.js")"></script>

还有日期选择器所在的视图：

@using (Html.BeginForm())
{
<div class="container">
    <div class="left-third">
        <label for="Company">Company:</label>
        @Html.DropDownList("Company")
    </div>
    <div class="middle-third" style="padding-left:20px">
        <label for="StartDate">Start Date:</label>
        @Html.TextBox("StartDate", null, new { @class = "datefield input-box" })
    </div>
    <div class="right-third" style="padding-left:20px">
        <label for="EndDate">End Date:</label>
        @Html.TextBox("EndDate", null, new { @class = "datefield input-box" })
    </div>
</div>
<br />
<br />
<br />

<div style="width:100%;text-align:center">
     <input class="button" type="submit" value="Generate Report" />
</div>
}
<script type="text/javascript">
$(function () {
    $('.datefield').datepicker();
});

我尝试使用脚本标记引用脚本，并对所有各种脚本使用 @Url.Content 函数，例如：

<script src="@Url.Content("~/Scripts/jquery-ui-1.11.4.js")"></script>

我已经在 IE 中尝试了开发人员工具 (F12) 的“网络”选项卡，以确保脚本已加载，它们的结果为 200。我确实注意到

@Styles.Render("~/Content/themes/base/css")

未在网络选项卡中呈现。我不知道这是否相关，但我认为它只是与

@Styles.Render("~/Content/css")

我尝试移动脚本引用和 datepicker 方法，但无济于事。

我真诚地希望你们中的一个聪明人知道该怎么做。

【问题讨论】：

是否在其他浏览器中发生？铬？
我对其他浏览器不感兴趣。这些相同的库在被重写的应用程序中运行良好，在同一个浏览器中，因此没有密切关系。但是在检查之后，不，它在 Chrome 中不起作用，它只是没有给我错误。
没有人知道这件事吗？

标签： javascript jquery asp.net-mvc asp.net-mvc-4 datepicker

【解决方案1】：

几乎所有人都猜到了，我做错了什么。

我创建了一个新项目并使用 @Scripts.Render 添加了 MVC4 项目中包含的相应 jquery-1.8.2.js 和 jquery-ui.1.8.24.js，它们运行良好。我确实必须将渲染移到@Scripts.Render("~/bundles/modernizr") 下方的顶部。

然后我回到原来的项目，用我之前错误安装的 NuGet 包管理器卸载了 jquery-ui-1.11.4.js，并手动复制了 jquery-ui-1.8.24.js 文件和 CSS从新测试项目到旧解决方案的工作表。然后，知道脚本的多个副本会搞砸事情，我在母版页中搜索“jquery”。不出所料，</body> 标记上方有对原始文件的引用。我删除了它，确保所有的包都引用了正确的文件，文件在那里并且没有重复，一切正常。

感谢你容忍我的白痴。

【讨论】：