MVC4和日期选择器:“;0x800a01b6-JavaScript运行时错误:对象没有't支持属性或方法

MVC4 and datepicker: "0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'datepicker'"

本文关键字：支持 属性 方法 对象 选择器 日期 0x800a01b6-JavaScript MVC4 运行时错误      更新时间：2024-06-07

我有一个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")

我试着移动脚本引用和日期选择器方法，但都无济于事。

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

正如你们几乎所有人所猜测的那样，我做错了什么。

我制作了一个新项目，并使用@Scripts.Render添加了MVC4项目中包含的相应jquery-1.8.2.js和jquery-ui.1.8.24.js，它们运行良好。我确实不得不将Render移到@Scripts.Render（"~/bundless/modernizr"）下方的顶部。

然后我回到原来的项目，用之前错误安装的NuGet Package Manager卸载了jquery-ui-1.11.4.js，并手动将jquery-ui 1.8.24.js文件和CSS表从新的测试项目复制到旧的解决方案中。然后，我知道脚本的多个副本会把事情搞砸，于是我在母版页中搜索"jquery"出乎任何人意料的是，在</body>标记的正上方有对原始文件的引用。我删除了它，确保所有捆绑包都引用了正确的文件，文件在那里，没有重复，一切都很好。

谢谢你容忍我的愚蠢行为。

相关文章：