I’m having a hard time wrapping my head around how to merge jQuery / clientside javascript and asp.net and the whole page life cycle model. Let’s take a concrete example.
I have the following 3 lists, they could be a gridview, a listbox or a custom control.
List 1 - a list of search results
List 2 - an empty list
List 3 - an empty list
Now I want the ability to drag a search result from List 1 into List 2 or 3, furthermore I’d like the ability to drag a search result from List 2 into 3, or List 3 into 2.
The problem is not actually making that functionality with jQuery, the problem comes when it is time to submit, a submit could be done when you actually drop an item, or there could be a dedicated button for performing the submit.
If you just do a postback, the viewstate of the serverside controls will override the values jQuery added to the controls on clientside and when the page renders again everything is forgotten.
How do you go by tying the entire clientside together with the serverside?
A possible solution would be to store the values in a hidden field and have the postback utilize this hidden field for restoring what values it had, but I find this solution bloated, considering that in the “old days” you would just make a post to a page with the correct post data.
The problem is that you have state in your DOM, maintained by your jQuery scripts, but you lose that state on a roundtrip to the server.
To retain that state information you would have to put it in hidden field (or cookie, or even HTML5 offline storage), but a better solution would be to avoid postbacks altogether and allow your controls to interact with the server via AJAX calls. Then your client-side state is retained even when you interact with the server.