Persist dynamic inserted content accross postback

I have a div lets say :

<div id="foo">
</div>

Now I inserted some html content inside this div on some button click(without postback) . Now when I perform a postback on some action say on server control submit button , I want the html(which I inserted via javascript) be persisted in the foo div. Right now I am thinking to take an hidden input server control and when the form will be submitted I will insert the content of foo div in that hidden control, the next time when the page loads after the postback I will fill the foo div with the content inside the hidden field. Am I going with correct approach or is their any other good approach whi开发者_JAVA技巧ch I should opt ?

A better approach I think would be to use a asp panel for 'foo' instead of a div, and then wrap this in an update panel with your button as the trigger. This will allow you to set the content of the panel on the server side with an ajax postback.

However if you do decide to use the approach you mentioned, you can likely do something like below:

Markup:

  <asp:Hidden ID="hdnContent" Value="" runat="server"/>
  <div id="foo"></div>

Script:

$(document).ready(function() {

    $('#foo').html($('#<%= hdnContent.ClientID %>').val());

    $('#trigger').click(function() {

         var content = loadSomeContent();

         $('#foo').html(content);
         $('#<%= hdnContent.ClientID %>').val(content);

    });

});

Here is an update panel possible solution:

Markup:

<asp:UpdatePanel runat="server">
    <ContentTemplate>

        <div id="foo">
            <asp:Literal ID="litFoo" runat="server"/>
        </div>

        <asp:Button ID="btnContent" Text="Insert Content" OnClick="btnContent_OnClick" runat="server"/>
    </ContextTemplate>
</asp:UpdatePanel>

Serverside:

protected void btnContent_OnClick(object sender, EventArgs args)
{
    litFoo.Text = loadContent();
}