在 ASP.Net MVC3 项目中使用 jquery datepicker答案

【问题标题】：Using the jquery datepicker in ASP.Net MVC3 projects在 ASP.Net MVC3 项目中使用 jquery datepicker
【发布时间】：2011-08-22 08:21:27
【问题描述】：

在this blog 中应该解释如何为所有 DateTime 输入实现 jquery datepicker。但是，当我尝试遵循所采取的步骤时，我失败了。我怀疑我在某处设置了错误的引用，因为我的 VS 项目中现在已经有比博客中提到的更新（并且命名不同）的 .js 文件。有没有一个地方可以为绝对的 jquery NOOB 提供实现？

编辑：我还找到了this link。在复制上述代码后，我在 jquery 1.5.1-min.js 中遇到一个异常，该异常表示该对象不支持该属性或方法...

编辑(2) 我对此一无所知，我尝试添加 Tridus 建议的参考，但我有不同的版本，并且在某些版本中我有一个 .min.js 替代方案。所有相关代码：

在 StandIn.cs 中：

    [DisplayName("Available from")]
    [DisplayFormat(DataFormatString="{0:d}",ApplyFormatInEditMode=true,NullDisplayText="(not specified")]
    public DateTime? From { get; set; }

在 Edit.cshtml 中：

       <div class="editor-field">
        @Html.EditorFor(model => model.Standin.From)
        @Html.ValidationMessageFor(model => model.Standin.From)
    </div>

在_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中

 @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 会引发关于不支持的属性或方法的异常。

【问题讨论】：

标签： asp.net-mvc-3 jquery-ui jquery-ui-datepicker

【解决方案1】：

这是一个很好的起点：http://jqueryui.com/demos/datepicker/

【讨论】：

单击黄色栏，单击启用，然后查看您的日期选择器！

【解决方案2】：

您几乎可以肯定缺少的只是对正确 jQuery 库的脚本引用。这些需要在生成的 HTML 中的某个位置（在 DateTime 对象本身的模板中，或者在您的 _layout.cshtml 中，因此它只是包含在任何地方）。根据您在项目中的内容相应地调整路径和版本。

<script src="@Url.Content("~/Scripts/jquery-1.4.4.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.14.min.js")" type="text/javascript"></script>

如果你有它，你可能还需要一个 jQuery UI 主题：

<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />

这是我在博文中唯一没有看到的。其他一切都如他们所说的那样直接。

【讨论】：

您好 Tridus，我不断收到 jquery 1.5.1.min.js 不支持的属性或方法异常选项。我编辑了问题以包含所有相关代码。某处显然有错误的引用，但路径是正确的。
你试过在其他浏览器中调试吗？带有 Firebug 的 Firefox 可能会让您更多地了解到底是哪条线路失败了。

【解决方案3】：

我越来越相信问题出在 Visual Studio 2010 中默认 MVC3 项目中包含的 .js 文件上：它们必须缺少一些必需的依赖 .js 文件。我按照 Erik 的建议去了the jquery ui site，下载了完整的 jquery ui 包，并使用了 development-bundle/demo/datepicker 文件夹中 default.html 中的引用和 .js 文件。这样可行！但是，由于 VS MVC3 项目带有许多预制的自定义脚本，我不得不将下载的 .js 文件与 Scripts 文件夹中的文件分开。因此，我创建了一个用于 UI 元素的新 JQueryScripts 文件夹。对这些 .js 文件的引用不能添加到 _Layout.cshtml 以避免冲突，出于同样的原因，我没有包含 MasterPage (_Layout.cshtml)。

作为记录，生成的 DateTime.cshtml EditorTemplate 可与 Nullable DateTime 一起使用，并显示如何实现一种语言的本地化（在本例中为荷兰语）。请注意，此代码将在新版本的 jquery(ui) 中过时，但它提供了一个想法：

<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" }) 
}

【讨论】：