runat="server" 破坏了我的 jQuery - datepicker答案

【问题标题】：runat="server" breaks my jQuery - datapickerrunat="server" 破坏了我的 jQuery - datepicker
【发布时间】：2013-01-10 16:35:50
【问题描述】：

runat="server" 正在破坏我的 jquery。我有两个输入，但出于测试目的，只在其中一个中添加了 runat="server" 。实际上，我需要同时添加两者。

您可以在下面找到触发 datetimepicker 的 JS 脚本：注意：dateTo 已经设置了 runat="server" 并试图改变 JS 试图获取其 ID 的方式，但仍然无法正常工作。

<script>
        $(function(){
            $("#dateFrom").datetimepicker();
            $("#<%=dateTo%>").datetimepicker();
        });
</script>

在这里您可以找到使用 runat="server" 或不使用 asp.net 代码的 HTML 输入。

    <tr>
        <td>
             <input type="text" id="dateFrom" name="dateFrom" value="" class="dateFrom" />
        </td>
        <td >
             <input type="text" id="dateTo" name="dateTo" runat="server" value="" class="dateTo" /> 
        </td>
    </tr>

有没有人有任何想法，提示.....？谢谢

【问题讨论】：

标签： javascript asp.net runatserver

【解决方案1】：

使用ClientID获取生成的服务器端控件Id：

$("#<%=dateTo.ClientID%>").datetimepicker();

ASP.NET 将生成一个特定的id 属性，该属性与服务器端控件的id 属性不同，因此您需要使用生成的值才能从jQuery.

【讨论】：

这对于分离资源并将客户端脚本与页面内容联系起来带来了真正的麻烦（请参阅：丑陋），尽管您可以开始以这种格式将参数传递给函数等，但仍然如此。
@Grant - 是的。 webforms 抽象泄漏的一部分:(
确实！一个“整洁”的技巧，但越早消失越好。 “虽然我们提供了一种向开发人员提供客户端 ID 的方法，但随着客户端脚本的增长，这个解决方案变得有些老套了。” weblogs.asp.net/asptest/archive/2009/01/06/…
@Grant - 我不能再同意了，但是对于那些坚持使用网络表单并希望使用客户端脚本操作服务器端控件的人来说，没有那么多其他选择（我想可以给每个此类控件都有一个唯一的类名，但这更加hacky）。
是的，我不再说“但是”了：在那种情况下，这对于 OP 来说是一个可信的答案。

【解决方案2】：

由于您要提供类名，我建议您直接使用这些名称。

$(function(){
    $(".dateTo, .dateFrom").datetimepicker();
});

或者，您可以为表单上的任何“日期”字段赋予“日期”类并使用它：

$(function(){
    $(".date").datetimepicker();
});

这是一种常见的客户端验证模式，还允许您通过 CSS 样式提供上下文线索。

【讨论】：

【解决方案3】：

如果您使用的是 .NET 4，则可以将 ClientIDMode 属性设置为 Static。这将防止框架更改元素的 ID：

<input type="text" id="dateTo" name="dateTo" runat="server" 
       ClientIDMode="Static" class="dateTo" value=""  />

【讨论】：

酷，我不知道这个！
@DaveBaghdanov - 是的，但是在您的示例中生成的 ID 仍然不太可能是 dateTo。这只是意味着它不太可能动态更改，以防您将客户端 ID 硬编码到您的 .js 文件中。

【解决方案4】：

当添加runat=server 时，ASP.NET 会将输入视为服务器端控件，这将导致这些输入的标识符经过转换，以便它们以容器前缀（类似于ctl00_）开头，因此 '打破'你的 jQuery 选择器。

如果您使用的是 .NET 4，则可以通过更改 ClientIDMode 来禁用这些转换。否则，您将需要在选择器中包含前缀，或者将选择器重构为独立于 ID 并且在通过其他方式选择时有所不同。

【讨论】：

【解决方案5】：

使用它来获取服务器控件的正确客户端 ID

$('[id$=dateTo]').datetimepicker();

【讨论】：