Question

While there are similar questions here, none gave a complete answer, so I am posting a new one.

I have a paged grid – jqgrid – which receives data from server by ajax, N rows (10, 20 and so on, depending on the user selection) each time. There is a boolean value in the grid row model, which is transformed into a checkbox in the displayed row.

When user checks the checkbox and then navigates to the next grid page, the state of the checkbox is obviously lost. What is the best approach to save it? Neither of the possibilities that I see fully satisfies me:

I can save the ids of the selected instances into a global javascript object on checkbox click. Thus when new dataset is obtained, I can iterate through all received instances looking for already selected ones. However this can mean a lot of javascript operations and possible slowdown for the final user, if there are a lot of selected instances.

I can store the selection on the server (session, database, whatever else). This way each time the model is generated, I will populate its boolean parameter with an adequate value. However, this can mean that when the user navigates away from my page without submitting the changes and then returns back, the record states will be restored. I am not sure whether this is good. Generally, I am strongly against storing anything on the server side before user submits the form.

So, what would you choose / offer?

I am using ASP.NET MVC 2.0, C# 4.0, if that matters.

Answer 1

Your question is essentially about preserving state in an ajax scenario that does not involve the evil webforms viewstate.

However, there is nothing wrong with viewstate when it is used to preserve state in the kind of scenarios you are working on (as opposed to providing a means to pretend a web page is a winform).

So, why not go for the best of both worlds and store the values in an encrypted hidden field, a sort of lean, mean, smart man’s viewstate?

When you request the next page of data, pass back to the server the existing “viewstate” (if any) plus the new checked items, decrypt the viewstate on the server, see what is in there and if it is relevant to the next page, add the new list of checked items, encrypt that and send the new “viewstate” back to the user.

I haven’t done this, so it is just an idea. However, it is logically feasible, and very practical. I say I haven’t done this with a grid, but I have done it, with huge success, to design a wizard framework that works a dream.

My wizards preserve their state whilst the user is filling in the forms and only in the final step does anything get persisted (if at all, depending on what the app requires).

This framework is based on the wizard described in Steve Sanderson’s book, but extended to work seamlessly with or without ajax. And with a very simple API for controllers derived from my wizard controller.

The code that makes this viewstate work is called from an OnActionExecuting method:

protected override void OnActionExecuting(ActionExecutingContext filterContext)
{
   var serialized = Request.Form["wizardData"];            
   if (serialized != null) // Form was posted containing serialized data
   {
      WizardData = (TModel)new MvcSerializer().Deserialize(serialized);
   }
}

And then in the ViewResult returned to the user:

<%= Html.Serialize("wizardData", Model)%>

In your case, as you are just paging data, you would need to serialize and encrypt the equivalent of the wizardData object and send this back with the JSON data to store somewhere in a hidden field.

This is a bit vague, as a wizard is a not a grid of paged data. But the principles (essentially, roll your own viewstate) do apply to both scenarios.