异步回发后，UpdatePanel 中的 Obout 日历混乱答案

【问题标题】：Obout Calendar in UpdatePanel messes up after asynchronous postback异步回发后，UpdatePanel 中的 Obout 日历混乱
【发布时间】：2012-09-12 13:30:42
【问题描述】：

我目前正在尝试使用 Obout 日历控件实现日期范围搜索功能。这个想法是用户可以从 Obout 日历中选择一个日期，然后在它旁边填充一个 asp:TextBox。表单中还有其他字段，但这是破坏的字段。我在表单底部还有一个 asp:Button，其功能是清除表单中的所有字段。它在后面的代码中这样做：

protected void btnClearFields_Click(object sender, EventArgs e)
{
    txtFrom.Text = "";
    txtTo.Text = "";
}

这里是相关的前端代码：

<table>
    <tr>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <td>
                    <asp:Label ID="lblFrom" runat="server" Text="From:"></asp:Label>
                    <br />
                </td>
                <td>
                    <asp:TextBox ID="txtFrom" runat="server"></asp:TextBox>
                </td>
                <td>
                    <obout:Calendar runat="server" ID="CalendarFrom" TextBoxId="txtFrom" StyleFolder="Calendar/styles/orbitz" ScriptPath="Calendar/calendarscript" DatePickerButtonText <IMG src='Images/calendar.gif' align=absMiddle border=0>" ShowYearSelector="true" DateMin="1/1/1900" AllowDeselect="false" DatePickerMode="true" />
                </td>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <td>
                    <asp:Label ID="lblTo" runat="server" Text="To:"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtTo" runat="server"></asp:TextBox>
                </td>
                <td>
                    <obout:Calendar runat="server" ID="CalendarTo" TextBoxId="txtTo" StyleFolder="Calendar/styles/orbitz" ScriptPath="Calendar/calendarscript" DatePickerButtonText <IMG src='Images/calendar.gif' align=absMiddle border=0>" ShowYearSelector="true" DateMin="1/1/1900" AllowDeselect="false" DatePickerMode="true" />
                </td>
            </ContentTemplate>
        </asp:UpdatePanel>
    </tr>
</table>

现在，我遇到的问题是，当我第一次加载页面时，一切都很好。我可以从日历中选择一个日期，它会按预期填充文本框。但是，如果我单击“清除字段”按钮，这会导致部分回发，那么事情就会出错。当我再次单击日历图标时（在清除字段后），弹出的日期选择器的格式被弄乱了。它的日历部分只是一个红色方块，不能选择任何日期。年份选择栏横跨整个屏幕，更改年份对日历没有任何作用。

我在研究中找不到任何类似的问题，所以我不确定该尝试什么。我曾尝试在整个表周围只使用一个 UpdatePanel，但后来我遇到了同样的问题。我还尝试在 UpdatePanels 中不包括日历，这不会“破坏”日历，但它会在我的网页上放置两个新的 TextBox 字段（它将接受日历中的任何新值）并且不会清除旧的。还尝试将按钮和包含日历的表格放在同一个 UpdatePanel 中，但我在那里也得到了相同的红色框。

【问题讨论】：

标签： c# asp.net updatepanel obout asynchronous-postback

【解决方案1】：

在this answer. 中发现了一个非常相似的问题，当我没有在其中包含 Obout 日历时，我遇到了我的 UpdatePanel 复制内容的问题。我通过将我的 UpdatePanels 移动到仅围绕 asp:TextBox 解决了这个问题，如下所示：

<td>
    <asp:Label ID="lblFrom" runat="server" Text="From:"></asp:Label>
    <br />
</td>
<td>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="txtFrom" runat="server"></asp:TextBox>
        </ContentTemplate>
    </asp:UpdatePanel>
</td>
<td>
    <obout:Calendar runat="server" ID="CalendarFrom" TextBoxId="txtFrom" StyleFolder="Calendar/styles/orbitz" ScriptPath="Calendar/calendarscript" DatePickerButtonText <IMG src='Images/calendar.gif' align=absMiddle border=0>" ShowYearSelector="true" DateMin="1/1/1900" AllowDeselect="false" DatePickerMode="true" />
</td>

这也意味着我不必更新 Obout 日历，从而解决了原来的问题。

【讨论】：