DatePicker 在全视图中给出 Object 不支持属性或方法“datepicker”，但不支持模态形式答案

【问题标题】：DatePicker gives Object doesn't support property or method 'datepicker' in full view but NOT in Modal formDatePicker 在全视图中给出 Object 不支持属性或方法“datepicker”，但不支持模态形式
【发布时间】：2016-01-26 05:41:50
【问题描述】：

如果标题被截断，我会收到以下错误： 0x800a01b6 - JavaScript 运行时错误：对象不支持属性或方法 'datepicker'

日期选择器在作为 PartialView 返回的 Modal 表单中工作正常，但在尝试在 Modal/PartialView 之外的完整视图中使用它时会引发该错误。

Bundle.Config：

public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
        "~/Scripts/jquery-2.2.0.js",
        "~/Scripts/bootstrap.js",
        "~/Scripts/bootstrap-datepicker.js")
        );

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
        "~/Scripts/jquery-ui-1.11.4.js",
        "~/Scripts/bootstrap-datepicker.js")
        );

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

        bundles.Add(new StyleBundle("~/bundles/css").Include(
            "~/Content/bootstrap.css",
            "~/Content/bootstrap-theme*",
            "~/Content/jquery-ui.css",
            "~/Content/jquery-ui.structre.css",
            "~/Content/jquery-ui.theme.css"

            ));

        bundles.Add(new StyleBundle("~/bundles/themes/base/css").Include(
            "~/Content/themes/*.css"
            ));

        bundles.Add(new StyleBundle("~/bundles/datepickers/css").Include(
            "~/Content/bootstrap-datepicker.css",
            "~/Content/themes/base/datepicker.css"
            ));
    }

管理员布局（表单应位于的位置）：

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Boxer Puppy Dogs Admin</title>

@*<script src="~/Scripts/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script> 
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />*@ 

<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Admin.css" rel="stylesheet" type="text/css" />

@Styles.Render("~/bundles/css")
@Styles.Render("~/bundles/themes/base/css")
@Styles.Render("~/bundles/datepickers/css")
@RenderSection("styles", required: false)    
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
@RenderSection("scripts", required: false)

主布局（保持相对一致）

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Boxer Puppy Dogs</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>

@*<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />*@


@Styles.Render("~/bundles/css")
@Styles.Render("~/bundles/themes/base/css")
@Styles.Render("~/bundles/datepickers/css")
@RenderSection("styles", required: false)
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
@RenderSection("scripts", required: false)

模态局部视图：

@model BoxerPuppyDogs.Models.ManageLitters.LitterViewModel

<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>

@Html.BeginForm("SaveNewLitter", "ManageLitter", FormMethod.Post, new { @id = "newLitterForm" })
{
<div class="modal fade" id="NewLitterDialog" tabindex="-1" role="dialog" aria-labelledby="RemoveModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add Litter</h4>
            </div>
            <div class="modal-body">
                <div id="DialogPlaceHolder">
                    @Html.Partial("_NewLitterFormFields", Model)
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>
}

完整版：

    @model BoxerPuppyDogs.Models.ManageLitters.LitterViewModel

@{
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
    ViewBag.Title = "Add Litter";
}

<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>


<div class="container">
    <div class="row">
        @Html.BeginForm("SaveNewLitter", "ManageLitter", FormMethod.Post, new { @id = "newLitterForm" })
        {

        @Html.Partial("_NewLitterFormFields", Model)
    </div>

    <div class="row">
        <button type="button" class="btn btn-default">Cancel</button>
    </div>

    }
</div>

Modal 和 Full 视图都将其称为 Partial：

    @model BoxerPuppyDogs.Models.ManageLitters.LitterViewModel

<script type="text/javascript">
    $(document).ready(function () {
        $("#LitterDOB").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'mm/dd/yy',
            gotoCurrent: true
        });
    });
</script>


<div class="row">
    @Html.LabelFor(m => m.LitterDOB)
    @Html.TextBoxFor(m => m.LitterDOB, String.Format("{0:MM/dd/yyyy}", Model.LitterDOB), new { id = "LitterDOB", @class = "datepicker" })
</div>

我最初尝试使用 EditorFor 并为此创建一个自定义模板，但事实证明这很令人讨厌，我只需要在一个控件上使用它，因此此时它并不是真正需要的。

Modal 和调用 Partial 的 View 之间肯定有一些区别，但我看不到。

【问题讨论】：

你提供了很多代码。你能把它缩小到相关的位吗？
要么缩小问题范围，要么更好地使用 jsfiddle.net 的链接
问题是我不知道问题是什么才能进一步缩小范围。我知道两件事：要让模式工作，我必须包含` ` 或者 datepicker 没有在模态上工作。在完整视图中，即使包括脚本，它仍然无法正常工作。这很奇怪，因为我在渲染的包中包含了脚本（.js 与 .min.js）。所以，我很惊讶它完全需要它。
在这两种情况下都需要 jquery 和 jquery ui。你错过了因此错误

标签： javascript jquery jquery-ui datepicker jquery-ui-datepicker

【解决方案1】：

问题是我有

@RenderSection("scripts", required: false)

在布局的头部而不是在正文部分的底部。

【讨论】：