asp.net - Div is hidden after submit in UpdatePanel

Question

I have a div inside an UpdatePanel, this div is shown when a use click on an edit link. The submit buttons to save are inside this div. Now when the use click on the submit button everything is fine except that this div is automatically hidden! the visibility is changed client side using jQuery's show().

Why is the UpdatePanel hiding my div even though it was shown by me? I have tried to set the runat='server' and enableing viewstate but I am getting the same result.

How do I just tell the UpdatePanelto leave thediv` as it is prior to the submit?

Here is a mini project that shows the problem:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                <a href="#" id="edit-link">edit</a>
            </div>
            <div id="edit-div" style="display:none; border: 2px black solid;">
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

<script>
    $(document).ready(function(){
        $('#edit-link').on('click', function () {
            $('#edit-div').show();
        });
    });
</script>

The code for the submit button:

protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = DateTime.UtcNow.ToString();
}

Answer 1

The simplest solution to this problem would be: -

1. don't use jQuery to show edit-div
2. make edit-div a server control
3. convert your <a href="#" id="edit-link">edit</a> to an <asp:LinkButton> control, and in its server-side click event, show your edit div

The problem is that the UpdatePanel is restoring the original state as per the markup for the page; edit-div is not a server control and you are showing it via client script, the UpdatePanel is unaware of this and will always return you the original markup.

There are ways to get jQuery to play nice with UpdatePanels in these scenarios, but it is more involved than the simple solution above.

Hope that helps.