Geek Answers Handbook

Asp.net webforms and jquery: how to save / restore jquery state between postbacks?

I am creating an asp.net webforms (3.5 sp1) application using jquery where I can animate the user interface, change its state. It did a great job until I started doing postbacks where the user interface is clearly reset.

So my question is: what are the best methods to save and restore jquery / UI state between postbacks?

Thanks, Egil.

Update: Thank you very much guys, a great contribution, bad, I can not mark more than one answer as an "answer".

+4
source share
4 answers

I usually store things like menu state or filter (set of inputs to div) visibility etc. server-side in a session through AJAX. When the menu expands or a filter is displayed, the click handler fires an AJAX event for the web service, which will record the status of the menu or filter the visibility in the user's session. In postback, I use session variables corresponding to each menu / filter to set its initial state using CSS. I believe this is the best user interface since the page does not blink when it is updated with javascript after loading if you make changes on the client side.

An example - since I'm on the road, this is not the actual code from the project and may be incomplete. Uses jQuery. The url for the web service will depend on how you implement the web services. I use ASP.NET MVC (mostly), so mine would be a controller action.

<script type='text/javascript'> $(document).ready( function() { $('#searchFilter').click( function() { var filter = $(this); var filterName = filter.attr('id'); var nowVisible = filter.css('display') === 'none'; if (nowVisible) { filter.show(); } else { filter.hide(); } $.post('/controller/SetFilterVisibility', { name: filterName, visibility: nowVisible } ); }); }); </script> <div id='searchFilter' <%= ViewData["searchFilterVisibility"] %> > ... </div>

Server code

 [AcceptVerbs( HttpVerbs.POST )] [Authorization] public ActionResult SetFilterVisibility( string name, bool visible ) { Session[name] = visible; return Content( string.Empty ); // not used... } [AcceptVerbs( HttpVerbs.GET )] [Authorization] public ActionResult SomeAction( int id ) { ... ViewData["searchFilterVisibility"] = Session["searchFilter"]; ... return View(); }
+5
source

I think you mean saving the state of the ui widget between postbacks (rather than saving user settings).

Many of this state applies only to specific widgets for a specific user after a certain series of interactions (for example, expand this node tree, click on this grid line, etc.). This material does not need to go into the database or even into the session if you do not need to restore the state between page loads.

All these things that I incline towards an object or two, for example:

 treeState.expandedNodeId = 'foo'; gridState.selectedRowIndex = 3;

Then I periodically save it in a hidden field:

 $('.treeState').val(Sys.Serialization.JavaScriptSerializer.serialize(treeState));

and etc.

The value is sent back with the result of the postback, and I just deserialize and restore my widgets from the saved values. Annoying, but working well.

+5
source

You have two options:

  • client side cookie
  • Save user interface server settings through callbacks or webmethod calls

The second option will require a lot of effort, but will allow you to provide "portable" user interface parameters that can be applied to the user regardless of the client machine. If the settings are "throw-away", I would go for cookies on the client side.

How to work with javascript and cookies:

http://techpatterns.com/downloads/javascript_cookies.php

I usually store the server side of the user interface settings in the database via postbacks, however, if users change their interface through jQuery and you want to save these changes, I would probably think about this:

  • add script manager to aspx page
  • set EnablePageMethods = "true"
  • create WebMethod in your code.
  • in your jQuery methods that update the user interface add a call to your WebMethod and return the user interface settings.
  • save any settings transferred to WebMethod in the database
  • then the next time the user visits the page, either select the settings, or fill as many servers on the server side as you can, or use the jQuery ready method to call another web method that retrieves the user interface settings from the database, transfers them back to jQuery, allowing you to populate controls.

Here is a decent article on jQuery and WebMethod calls:

http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

The problem you need to know about is EventValidation; you will get into a problem if you get control values ​​outside the page life cycle area and then expect to use these parameters for postback. For example, adding values ​​to the drop-down list using the web method will result in a return error if these values ​​are not added to the drop-down list when creating the page.

+4
source

I use HTML5 storage, you can choose the save method (local storage or browser session). If you are not worried about HTML5, you can use Amplify.Storage. The downside is that you need to write code to invoke save / read. I am looking for a way to automate this, if anyone has any ideas please tell me. Thanks.

0
source

More articles:


All Articles