日期选择器问题答案

【问题标题】：Date Picker Problem日期选择器问题
【发布时间】：2011-10-20 23:58:24
【问题描述】：

我开始使用日期选择器，非常喜欢它。但现在我面临一个问题。我有一个 ASP.Net 应用程序。我有一个母版页、一个 Default.aspx 页面和几个用户控件（.ascx 页面）。在其中一个用户控件中，我有一个带有包含日期的文本框的 GridView。这些文本框使用日期选择器。 GridView 位于 UpdatePanel 中。我为 GridView 使用自定义分页。当例如我需要转到下一页，UpdatePanel 已更新。问题是当我从初始页面转到另一个页面时，日期选择器消失了。这是我的代码：在母版页底部：

<script type="text/javascript"> 
$(document).ready(function() {
    $("input.date").datepicker({ 
        showButtonPanel: true, 
        dateFormat: 'mm/dd/y', 
        changeYear: true, 
        closeText: 'X' 
    });
});
</script>

在 GridView 中：

<asp:TextBox ID="txtWFHCDate" runat="server" Text='<%#Eval("StrHCDate") %>' BorderStyle="None" Width="80%" CssClass="date" ></asp:TextBox>

为初始GridView页面生成的html：

<input id="ctl00_CPHDefault_tcTPS_TPProd_ctl01_tcProduction_TPWorkflow_WorkflowGridView_ctl05_txtWFHCDate" class="date hasDatepicker" type="text" style="border-style:None;width:80%;" value="10/18/11" name="ctl00$CPHDefault$tcTPS$TPProd$ctl01$tcProduction$TPWorkflow$WorkflowGridView$ctl05$txtWFHCDate">

改变GridView页面后生成的html：

<input id="ctl00_CPHDefault_tcTPS_TPProd_ctl01_tcProduction_TPWorkflow_WorkflowGridView_ctl05_txtWFHCDate" class="date" type="text" style="border-style:None;width:80%;" value="10/18/11" name="ctl00$CPHDefault$tcTPS$TPProd$ctl01$tcProduction$TPWorkflow$WorkflowGridView$ctl05$txtWFHCDate">

我尝试将脚本从母版页移动到 Default.aspx 页面和 .ascx 页面，但没有任何帮助。

你能帮忙吗？谢谢。

【问题讨论】：

我不认为我们在这里看到了全貌。 “问题是当我从初始页面转到另一个页面时，日期选择器消失了。”那么所有这 3 个页面上都有 JS 吗？加载新页面时需要初始化JS。
当我在那里说“页面”时，我并不是指 aspx 页面。我只是说我的 GridView 的自定义分页。例如。默认情况下，GridView 显示前 100 条记录，当我按下 Next 按钮时，UpdatePanel 被更新，GridView 现在显示下 100 条记录（日期选择器不再工作）等等。脚本在母版页的底部，但是我也尝试了aspx页面和GridView所在的ascx页面（用户控件）。

标签： c# jquery asp.net

【解决方案1】：

在页面加载期间，您的 ready() 函数会调用 datepicker() 以将必要的绑定添加到您的文本输入中。当您更改 GridView/UpdatePanel 中的“页面”时，这些文本输入将被丢弃并替换为新的。

UpdatePanel 加载下一个“页面”后，您需要再次调用 datepicker() 以重新绑定文本输入。您也许可以将其集成到 .ascx 控件中，或者使用 here 中描述的 UpdatePanel 回调。

【讨论】：

谢谢，我使用了 UpdatePanel 回调，当我把它放到 .aspx 页面的底部时它就起作用了。我想知道为什么它在母版页的底部不起作用。