Asp.Net MVC 中的 JQuery UI 日期选择器答案

【问题标题】：JQuery UI datepicker in Asp.Net MVCAsp.Net MVC 中的 JQuery UI 日期选择器
【发布时间】：2010-09-27 23:14:40
【问题描述】：

我尝试在Asp.Net MVC 网站上使用JQuery UI 中的一些小部件，但没有成功。

例如来自jQuery UI - functional demos 的基本日期选择器。

我创建了一个简单的 MVC 项目，并在 Site.Master 中添加了脚本引用，如下所示：

<script src="../../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-personalized-1.5.3.min.js" type="text/javascript"></script>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/ui.datepicker.css" rel="stylesheet" type="text/css" />"

在Index.aspx 文件中，我清除了所有默认内容并添加了以下内容：

<script type="text/javascript">
    $("#basics").datepicker();     
</script>  
<input type="text" size="10" value="click here" id="basics"/>

核心 jQuery 工作正常。有什么线索吗？

【问题讨论】：

查看我的教程，它就是这样做的。 asp.net/mvc/tutorials/javascript/…
您问题中的链接已损坏，有人知道正确的链接吗？

标签： javascript jquery html asp.net-mvc jquery-ui

【解决方案1】：

确保在加载 DOM 后调用初始化程序：

$(document).ready(function() {
    $("#basics").datepicker();
});

jQuery ready event:

通过使用此方法，您的绑定函数将被立即调用 DOM 已准备好被读取，并且操纵，这是当 99.99% 所有 JavaScript 代码都需要运行。

【讨论】：

【解决方案2】：

我在这里写了一篇关于 MVC 3 的文章：http://blogs.msdn.com/b/stuartleeks/archive/2011/01/25/asp-net-mvc-3-integrating-with-the-jquery-ui-date-picker-and-adding-a-jquery-validate-date-range-validator.aspx

【讨论】：

Stuarts 伟大的博客激发了我的教程asp.net/mvc/tutorials/javascript/…

【解决方案3】：

看起来您正在执行页面加载时的内联 JavaScript。在这种情况下，#basics 选择器将无法找到带有 id="basics" 的输入，因为它尚未被解析并呈现到文档正文中。

您的解决方案可能很简单，只需将代码中的script 元素移动到input 元素之后的位置。

更好的是，订阅文档就绪或文档加载事件并在该事件的处理程序中执行 jQuery 代码。

$(document).ready(function() {
    $("#basics").datepicker();
});

这样做有很多好处。您可以确定整个 DOM 已准备好使用，并且不依赖于源代码的顺序，这意味着您将来可以将 JavaScript 移动到外部文件以利用客户端的各种缓存机制.

【讨论】：

【解决方案4】：

您在页面的哪个位置加载脚本以及在哪里调用 datepicker 初始化？

这是一个使用 jQuery 速记文档就绪和 css 选择器来更轻松地初始化 datePickers 的示例。

这是示例输入框的剃须刀代码（注意“datefield”css 类）

<div class="form-group">
    @Html.LabelFor(m => m.DateOfBirth, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.TextBoxFor(m => m.DateOfBirth, new { @class = "form-control datefield" })
    </div>
</div>

这是通过 css 选择器初始化任何日期选择器所需的 javascript

$(function () {
    $(".datefield").datepicker();
});

我在 github 上整理了一个详细说明细节的教程和一个示例 ASP.NET MVC5 解决方案

http://prestoasp.net/using-the-jquery-datepicker-with-asp-net-mvc/ https://github.com/fredo007/i6technology/tree/master/InsuranceSales

【讨论】：