preserve UI state of asp.net controls after button click

Question

I have an ASP.NET web app with a dropdown list and a number of ASP.NET textboxes/labels. when the user chooses a particular item from the dropdownlist the labels change text and some of them are hidden etc using jquery. However after clicking on a button the controls are being changed back as when the page is first loaded.

Please suggest

1. How i Can preserve the new labels name etc?
2. Should i put the same jquery code i wrote for the dropdownlist on change event also in the on document load event?
3. Should i use hidden fields to store the value?

Answer 1

1: How i Can preserve the new labels name etc?

Yes,

You can use hidden field to store.

2: Should i put the same jquery code i wrote for the dropdownlist on change event also in the on document load event?

No,

On page_load access hidden field, extract and use values.

3: Should i use hidden fields to store the value?

Yes,

You can use hidden field to store changes you made in GUI control using jQuery. Make that hidden field server accessible by making it runat server. On server end when you get postback access the hidden field, extract and assign values to respective controls. You can see how it would work in this post .

Answer 2

As you might be knowing , after clicking the button if it is submit type it will do the postback to the server , as HTTP is stateless , it is your responsbility to generate the label text and value again. Generally ASP.NET viewstate take care of doing so for input texts, but for labels you have to do by yourself. I can suggest the solution like this

1) Have a javascript method which will have the logic to change the value of label and hidden field based on the selected value of the dropdown

     function MyFunction ( ddlSelectedValue)
     {
      if(ddlSelectedValue == "1")
       {
           $("#LABELID").html('YOUR VALUE');
           // rest other logics
       }
     }

2) ASP.NET viewstate will help you to preserve the dropdown state after button click . So on add this jquery script on the page top

      $(document).ready(function(){
       var ddlSelectedValue = $("#DDLID").val();
       MyFunction(ddlSelectedValue);

      });

3) attach the the point 1 method to onchange of the dropdown also.

4) Using the hidden field is Ok , because hidden fields will serve your requirement in using in the server side as they will also be posted back.