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

Posted

技术标签:

【中文标题】Asp.Net MVC 中的 JQuery UI 日期选择器【英文标题】:JQuery UI datepicker in Asp.Net MVC 【发布时间】: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/… 您问题中的链接已损坏,有人知道正确的链接吗? 【参考方案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

【讨论】:

以上是关于Asp.Net MVC 中的 JQuery UI 日期选择器的主要内容,如果未能解决你的问题,请参考以下文章

Three steps to use jQuery UI in ASP.NET MVC 5

ASP.Net MVC jQuery UI DatePicker 日期格式

ASP.NET MVC 5和jquery ui datepicker验证

用于 jquery CRUD 的 Asp.net core mvc + kendo ui

Asp.Net MVC 应用程序的 Kendo UI 与 Jquery/Bootstrap 设计决策

ASP.Net MVC在AspNet Mvc使用JQuery AutoComplete组件