Календарь Obout в UpdatePanel портится после асинхронной обратной передачи

Question

В настоящее время я пытаюсь реализовать функцию поиска по диапазону дат, используя элементы управления Obout Calendar. Идея состоит в том, что пользователь может выбрать дату в календаре Obout, которая затем заполнит asp:TextBox рядом с ней. В форме есть и другие поля, но это то, что ломается. У меня также есть кнопка asp: внизу формы, функция которой - очистить все поля формы. Это делается в коде с этим:

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 на мою веб-страницу (которые будут принимать любые новые значения из календаря) и не очистит старые. Также попытался поместить и кнопку, и таблицу, содержащую календарь, в одну и ту же панель обновления, но я тоже получил там красное поле.

Answer 1

Нашел очень похожую проблему в этом ответе. Я столкнулся с проблемой дублирования содержимого моей UpdatePanel, когда не включил в нее календарь Obout. Я исправил эту проблему, переместив свои 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, что решило исходную проблему.