Static content of UpdatePanel disappear after partial postback

Question

I have searched for this issue but questions already on this issue doesn't help me. First of all I am diving into the Ajax area and am not very familiar with it. I have created a very simple WebUserControl which is basically a contact form. The html for the user control is,

<telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server">
<AjaxSettings>
    <telerik:AjaxSetting AjaxControlID="btnSubmitContactForm">
        <UpdatedControls>
            <telerik:AjaxUpdatedControl ControlID="upContactForm" LoadingPanelID="RALP_ContactForm" />
        </UpdatedControls>
    </telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManagerProxy>


<telerik:RadAjaxLoadingPanel ID="RALP_ContactForm" runat="server" Transparency="5">
                <img src="images/cf_animation.GIF" alt="Processing Request..." />
</telerik:RadAjaxLoadingPanel>

<asp:UpdatePanel ID="upContactForm" runat="server">
<ContentTemplate>
    <div id="form-main">
        <div id="form-div">
            <p class="name">
                <asp:TextBox ID="txtContactName" runat="server"></asp:TextBox>
            </p>
            <p>
                <asp:TextBox ID="txtContactEmail" runat="server"></asp:TextBox>
            </p>
            <p>
                <asp:TextBox ID="txtContactComment" TextMoe="MultiLine" runat="server"></asp:TextBox>
            </p>
            <p><asp:Label ID="lblMessage" runat="server" Visible="false"></asp:Label></p>
            <div>
                <asp:Button ID="btnSubmitContactForm" runat="server"
                    Text="SEND" OnClick="btnSubmitContactForm_Click" />
            </div>
        </div>
    </div>

As you can see that the control is very simple. I call the control on my main page,

<uc1:FooterContactForm ID="FooterContactForm" runat="server"></uc1:FooterContactForm>

Now it is functioning absolutely fine when it is rendered. When I click the SEND button then loading image is displayed and on server side form content are sent via an email to me.

When this process is completed then suddenly footer gets disappear. This is not only in-case of user control but when I implemented it without user control the content of UpdatePanel disappear. When I put the following code line after email is sent on the server side then the content is visible and does not disappears.

upContactForm.Update();

This full fill the contact form disappearence problem. But when I try to reset the TextBoxes it gives me error that for updating the update panel I have to set the UpdateMode to conditional. When I set the UpdateMode to conditional then the error is gone but contact form again disappear after postback.

Experts kindly help me with this as I have no clue what is happening here.

Answer 1

You must not nest AJAX settings from RadAjaxManager/RadAjaxManagerProxy/RadAjaxPanel with an UpdatePanel, as nesting update panels can be unpredictable.

Here is a setup that should work fine:

        <telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="btnSubmitContactForm">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RALP_ContactForm" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManagerProxy>

        <telerik:RadAjaxLoadingPanel ID="RALP_ContactForm" runat="server" Transparency="5">
            <img src="images/cf_animation.GIF" alt="Processing Request..." />
        </telerik:RadAjaxLoadingPanel>

        <asp:Panel ID="Panel1" runat="server">
            <div id="form-main">
                <div id="form-div">
                    <p class="name">
                        <asp:TextBox ID="txtContactName" runat="server"></asp:TextBox>
                    </p>
                    <p>
                        <asp:TextBox ID="txtContactEmail" runat="server"></asp:TextBox>
                    </p>
                    <p>
                        <asp:TextBox ID="txtContactComment" TextMoe="MultiLine" runat="server"></asp:TextBox>
                    </p>
                    <p>
                        <asp:Label ID="lblMessage" runat="server" Visible="false"></asp:Label>
                    </p>
                    <div>
                        <asp:Button ID="btnSubmitContactForm" runat="server"
                                    Text="SEND" OnClick="btnSubmitContactForm_Click" />
                    </div>
                </div>
            </div>
        </asp:Panel>