DatePicker 在完整视图中给出 Object 不支持 属性 或方法 'datepicker' 但不是模态形式
DatePicker gives Object doesn't support property or method 'datepicker' in full view but NOT in Modal form
如果标题被截断,我将收到以下错误消息:
0x800a01b6 - JavaScript 运行时错误:Object 不支持 属性 或方法 'datepicker'
日期选择器在作为 PartialView 返回的模态窗体中工作正常,但在 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">×</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>
模态视图和完整视图都将此称为部分视图:
@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 并为此创建一个自定义模板,但事实证明这很令人讨厌,而且我只需要在一个控件上使用它,所以目前没有必要。
调用Partial的Modal和View肯定有区别,我看不出来
问题是我有
@RenderSection("scripts", required: false)
在布局的头部而不是主体部分的底部。
如果标题被截断,我将收到以下错误消息: 0x800a01b6 - JavaScript 运行时错误:Object 不支持 属性 或方法 'datepicker'
日期选择器在作为 PartialView 返回的模态窗体中工作正常,但在 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">×</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>
模态视图和完整视图都将此称为部分视图:
@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 并为此创建一个自定义模板,但事实证明这很令人讨厌,而且我只需要在一个控件上使用它,所以目前没有必要。
调用Partial的Modal和View肯定有区别,我看不出来
问题是我有
@RenderSection("scripts", required: false)
在布局的头部而不是主体部分的底部。