在ASP.Net MVC3项目中使用jquery datepicker [英] Using the jquery datepicker in ASP.Net MVC3 projects
问题描述
在此链接.在复制了上述代码后，我在jquery 1.5.1-min.js中遇到一个异常，表示该对象不支持该属性或方法...
编辑(2) 在这方面，我不知所措，我尝试添加Tridus建议的参考，但是我有不同的版本，在某些版本中，我有一个 .min.js 替代方案.所有相关代码:
在StandIn.cs中:
In this blog it should be explained how to implement the jquery datepicker for all DateTime inputs. I fail miserably however when I try to follow the steps taken. I suspect that I am setting the references wrong somewhere, as there are now already newer (and diffverently named) .js files in my VS project than those mentioned in the blog. Is there a place where the implementation is spoon fed for the absolute jquery NOOB?
I also found this link. After copying in the code as mentioned I am greeted by an exception in jquery 1.5.1-min.js that says that the object doest not support that property or method...
EDIT(2) I am at my wits' end wth this one, I tried to add the references Tridus suggested, but I have different versions and of some versions I have a .min.js alternative. All the relevant code:
In StandIn.cs:
[DisplayName("Available from")]
[DisplayFormat(DataFormatString="{0:d}",ApplyFormatInEditMode=true,NullDisplayText="(not specified")]
public DateTime? From { get; set; }
在Edit.cshtml中:
In Edit.cshtml:
<div class="editor-field">
@Html.EditorFor(model => model.Standin.From)
@Html.ValidationMessageFor(model => model.Standin.From)
</div>
在_Layout.cshtml中:
In _Layout.cshtml:
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>
在\ Shared \ EditorTemplates \ DateTime.cshtml
In \Shared\EditorTemplates\DateTime.cshtml
@model Nullable<System.DateTime>
@if (Model.HasValue)
{
@Html.TextBox("", Model.Value.ToShortDateString(), new { @class = "date" })
}
else
{
@Html.TextBox("",string.Empty)
}
<script type="text/javascript">
$(document).ready(function () { $('.date').datepicker({ dateFormat: "dd/mm/yy" }); });
</script>
注意:在我添加脚本标签之前，所有代码都会毫无问题地执行:然后在显示Edit.cshtml jquery-1.5.1.min.js时引发有关不支持的属性或方法的异常.
Mind: all the code performs without problems until I add the script tags: then on showing Edit.cshtml jquery-1.5.1.min.js throws an exception about a property or method not being supported.
推荐答案
我越来越确信问题出在Visual Studio 2010中默认MVC3项目附带的.js文件中:所需的相关.js文件.按照Erik的建议，我去了 jquery ui网站，下载了完整的jquery ui包并使用了引用和来自 development-bundle/demo/datepicker 文件夹中default.html的.js文件.那个有效！但是，由于VS MVC3项目附带了许多预制的自定义脚本，因此我必须将下载的.js文件与 Scripts 文件夹中的文件分开.因此，我创建了一个新的JQueryScripts文件夹，用于UI元素.不能将对这些.js文件的引用添加到_Layout.cshtml中以避免发生冲突，并且出于相同的原因，我没有包括MasterPage(_Layout.cshtml).
I am getting more and more convinced that the problem lays with the .js files that are included with a default MVC3 project in Visual Studio 2010: they must lack some of the requiered dependent .js files. I went to the jquery ui site as suggested by Erik, downloaded the full jquery ui package and used the references and .js files from the default.html in the development-bundle/demo/datepicker folder. That works! However, as a VS MVC3 project comes with a lot of premade custom scripts I had to keep the downloaded .js files separate from those in the Scripts folder. Therefor I created a new JQueryScripts folder that I use for the UI elements. The references to these .js files cannot be added to _Layout.cshtml to avoid a conflict and I did not include the MasterPage (_Layout.cshtml) for the same reason.
记录下来的结果DateTime.cshtml EditorTemplate与Nullable DateTime一起使用，并显示如何实现一种语言的本地化(在这种情况下为荷兰语).请注意，新版本的jquery(ui)将使此代码过时，但它给出了一个主意:
For the record the resulting DateTime.cshtml EditorTemplate that works with a Nullable DateTime and shows how to implement localization for one language (Dutch in this case). Note that this code will be made obsolete with a new release of jquery(ui), but it gives an idea:
<link rel="stylesheet" href="../../../JQueryScripts/themes/base/jquery.ui.all.css"/>
<script type="text/javascript" src="@Url.Content("~/JQueryScripts/jquery-1.6.2.js")"></script>
<script type="text/javascript" src="@Url.Content("~/JQueryScripts/ui/jquery.ui.core.js")"></script>
<script type="text/javascript" src="@Url.Content("~/JQueryScripts/ui/jquery.ui.widget.js")"></script>
<script type="text/javascript" src="@Url.Content("~/JQueryScripts/ui/jquery.ui.datepicker.js")"></script>
<script type="text/javascript" src="@Url.Content("~/JQueryScripts/ui/i18n/jquery.ui.datepicker-nl.js")"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.datepicker').datepicker({
dateFormat: "dd-mm-yy",
minDate:0
});
});
</script>
@model Nullable<System.DateTime>
@if (Model.HasValue)
{
@Html.TextBox("", Model.Value.ToShortDateString(), new { @class = "datepicker" })
}
else
{
@Html.TextBox("", string.Empty, new { @class = "datepicker" })
}
这篇关于在ASP.Net MVC3项目中使用jquery datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
