14

我试图JQuery UI在一个Asp.Net MVC网站上使用一些小部件，但没有运气。

例如来自jQuery UI 功能演示的基本日期选择器。

我创建了一个简单的 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 工作正常。有什么线索吗？

4

4 回答 4

18

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

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

jQuery 就绪事件：

通过使用此方法，您的绑定函数将在 DOM 准备好被读取和操作的那一刻被调用，也就是 99.99% 的 JavaScript 代码需要运行的时候。

于 2008-12-22T01:04:32.937 回答
7

我在这里用 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

于 2011-01-26T09:07:12.007 回答
4

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

script您的解决方案可能就像将代码中的元素移动到元素之后的位置一样简单input。

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

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

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

于 2008-12-22T01:01:35.530 回答
2

您在页面的哪个位置加载脚本以及在哪里调用 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

于 2014-04-25T04:37:28.973 回答