ASP.NET MVC - jquery 日期选择器答案

【问题标题】：ASP.NET MVC - jquery datepickerASP.NET MVC - jquery 日期选择器
【发布时间】：2010-10-28 10:03:27
【问题描述】：

好的，所以我是 ASP.NET MVC 和 JQuery 的新手。

我已经严格按照以下示例进行操作，但我无法让日期选择器正常工作：

http://codesprouts.com/post/Creating-A-DatePicker-Extension-In-ASPNet-MVC.aspx

谁能告诉我这是否有任何问题或陷阱？

伯纳德。

【问题讨论】：

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

【解决方案1】：

使用 google 托管的 jquery。

【讨论】：

试过了，效果很好，但我对将数据采集器托管在 Google 上并不完全满意。真的是非理性的恐惧，因为我猜如果谷歌我们很快就会下线，这将与更严重的问题有关，例如小行星撞击或其他事情。无论如何，这让我很沮丧，因为我无法让事情在本地进行，我不想给我们，所以我没有使用这个解决方案，即使它有效。
我给你打勾，因为你的解决方案虽然有效 - 可惜我今天的打字很蹩脚......
我已经尝试将这些 jQuery 脚本包含到我的 site.master 中，但现在我得到一个蓝屏。如果我查看源代码，则 html 就在那里，但实际上并没有调用任何 javascript。取出对 jquery-1.3.2.min.js 的引用会再次显示页面内容。

【解决方案2】：

此blog post 提供了将 jQuery 日期选择器集成到 MVC 3 站点的出色概述。

我能找到的其他一些示例集中在 MVC1 和 2 上。

【讨论】：

【解决方案3】：

如果没有更具体的信息，很难判断出了什么问题。

让您开始的一件显而易见的事情是，确保您的脚本文件的 src 标记是正确的。如果您下载标准或自定义版本，jquery-ui .js 文件的文件名会发生变化，因此值得仔细检查代码中的脚本标记是否与文件名匹配。 Firefox 的 firebug 插件的“网络”选项卡真正有助于快速发现您的页面找不到的文件 - 它以红色突出显示任何未找到的文件 - 通常可以节省大量时间。

【讨论】：

好建议。如果您使用 IE，Microsoft Fiddler-fiddler2.com/fiddler2 也可用于显示脚本文件是 404'ing。

【解决方案4】：

看看你是否可以让日期选择器首先在 HTML 中工作。这样您就可以消除由 src 标记中不正确的文件名等引入的错误。一旦您完成了该工作，您应该能够将其添加到本文描述的 MVC 解决方案中。

【讨论】：

【解决方案5】：

过去，当我在一个文件中使用整个 jquery UI css 时，我在使用 jQuery datepicker 时遇到了困难。我最终做了什么，并且似乎对我有用，是根据需要在我的页面或母版页中分别包含不同的 jQuery UI CSS 文件。当我将日期选择器包含在一个单独的 CSS 文件中时，它起作用了。

YMMV

【讨论】：

【解决方案6】：

我发现的一件事是，如果您的 id 有方括号或圆点，那么 datepicker 将无法工作。尝试用 under score 或其他内容替换它们。

【讨论】：

【解决方案7】：

标签

            UL.tabNavigation {
                list-style: none;
                margin: 0;
                padding: 0;
            }

            UL.tabNavigation LI {
                display: inline;
            }

            UL.tabNavigation LI A {
                padding: 3px 5px;
                background-color: #ccc;
                color: #000;
                text-decoration: none;
            }

            UL.tabNavigation LI A.selected,
            UL.tabNavigation LI A:hover {
                background-color: #333;
                color: #fff;
                padding-top: 7px;
            }

            UL.tabNavigation LI A:focus {
                    outline: 0;
            }

            div.tabs > div {
                    padding: 5px;
                    margin-top: 3px;
                    border: 5px solid #333;
            }

            div.tabs > div h2 {
                    margin-top: 0;
            }

            #first {
                background-color: #f00;
            }

            #second {
                background-color: #0f0;
            }

            #third {
                background-color: #00f;
            }

            .waste {
                    min-height: 1000px;
            }
-->
</style>

<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<link href="CSS/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

   <script  type="text/javascript">
       $(function() {
           $("#datepicker").datepicker();
       });

日期：

从 JQUERY 下载 js 文件并将它们放在您机器上的本地文件夹中，如果您使用 Visual Studio，只需将文件拖到您的设计器界面上。不要忘记链接 CSS 文件。我为每个项目所做的是从我的下载位置将 js 文件添加到项目中名为 Scripts 的文件夹中，并将 css 文件添加到名为 CSS 的文件夹中。

【讨论】：