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

Question

我目前正在尝试使用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中，但是我在那也得到了相同的红色框。

Answer 1

在此答案中发现了一个非常相似的问题。 当我没有在其中包含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日历，从而解决了原始问题。