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