ViewState Compression and AJAX, ASP.NET

Posted: September 17, 2008 in AJAX, ASP.NET
Tags: ,

I have found many articles and blog posts out there that talk about ViewState and how to handle it when it becomes too large. A large ViewState slows down your user’s browsing experience due to larger page sizes. There are many ways to address this issue: decreasing your use of ViewState, storing the ViewState in Session or elsewhere, HTTP compression, and the topic of my post, compressing the ViewState hidden field value.

At my last project we had been using ViewState compression, and it had worked just fine for them for a couple of years. The client was using the same solution that I’m sure 90% of the community was, where you override the two Page methods:

LoadPageStateFromPersistenceMedium
SavePageStateToPersistenceMedium

and store the compressed ViewState in a hidden form field. Here’s an example from one such article:

public partial class MyPage : System.Web.UI.Page
{
protected override object LoadPageStateFromPersistenceMedium()
{
string viewState = Request.Form["__VSTATE"];
byte[] bytes = Convert.FromBase64String(viewState);
bytes = Compressor.Decompress(bytes);
LosFormatter formatter = new LosFormatter();
return formatter.Deserialize(Convert.ToBase64String(bytes));
}
protected override void SavePageStateToPersistenceMedium(object viewState)
{
LosFormatter formatter = new LosFormatter();
StringWriter writer = new StringWriter();
formatter.Serialize(writer, viewState);
string viewStateString = writer.ToString();
byte[] bytes = Convert.FromBase64String(viewStateString);
bytes = Compressor.Compress(bytes);
ClientScript.RegisterHiddenField("__VSTATE", Convert.ToBase64String(bytes));
}
}

Note that Compressor is a custom class that you would write to do the compression/decompression. See the article above for sample code using Microsoft’s built-in compression libraries.

On our new endeavor of using third-party controls that used AJAX we noticed a problem. It seems these controls do not like the ViewState being ‘moved’ to a different form field (here it was moved to __VSTATE instead of the standard __VIEWSTATE). There must be some hard-coded references to this field name, and they cannot properly track their own state. The controls loaded fine but most of the AJAX calls would not run all of the correct events on the server.

After some searching I came across a solution that still compresses the ViewState but does so in an AJAX-friendly manner by leaving it in the __VIEWSTATE field. Since it was a hard-to-find forum post I thought it warranted a little more visibility and discussion.

In ASP.NET 2.0, Microsoft added a class called PageStatePersister, which is also exposed a property on the Page class itself. The page events mentioned above are still there and used, but now they hand off the dirty work to the PageStatePersister. The PageStatePersister is responsible for loading and saving ViewState.

There are a couple of ways you can implement ViewState compression using these events and/or PageStatePersister. One way is that you could you write your own persister and override the PageStatePersister property on the Page to use your class instead.

In my case I decided to override the two Page events above and now work with the PageStatePersister within the events. First, let’s look at the LoadPageStateFromPersistenceMedium event:


protected override object LoadPageStateFromPersistenceMedium()
{
String alteredViewState;
byte[] bytes;
Object rawViewState;
LosFormatter fomatter = new LosFormatter();
this.PageStatePersister.Load();
alteredViewState = this.PageStatePersister.ViewState.ToString();
bytes = Convert.FromBase64String(alteredViewState);
bytes = Compressor.Decompress(bytes);
rawViewState = fomatter.Deserialize(Convert.ToBase64String(bytes));
return new Pair(this.PageStatePersister.ControlState, rawViewState);
}

You see we first tell the PageStatePersister to Load itself with the ViewState. We then decode it as a base64 string and decompress. It is then deserialized and placed into a Pair object with current control state. The Pair is what is returned.

And now for the SavePageStateToPersistenceMedium event:

protected override void SavePageStateToPersistenceMedium(object viewStateIn)
{
LosFormatter fomatter = new LosFormatter();
StringWriter writer = new StringWriter();
Pair rawPair;
Object rawViewState;
String rawViewStateStr;
String alteredViewState;
byte[] bytes;
if (viewStateIn is Pair)
{
rawPair = ((Pair)viewStateIn);
this.PageStatePersister.ControlState = rawPair.First;
rawViewState = rawPair.Second;
}
else
{
rawViewState = viewStateIn;
}
fomatter.Serialize(writer, rawViewState);
rawViewStateStr = writer.ToString();
bytes = Convert.FromBase64String(rawViewStateStr);
bytes = Compressor.Compress(bytes);
alteredViewState = Convert.ToBase64String(bytes);
this.PageStatePersister.ViewState = alteredViewState;
this.PageStatePersister.Save();
}

Here we take the viewStateIn, which is the normal ViewState and instead compress it before saving to the PageStatePersister.

Now our ViewState is compressed and stored in the standard __VIEWSTATE field and our AJAX-enabled controls should be happy!

Advertisements
Comments
  1. Naveen says:

    Its very nice job..

    Regards
    Naveen

  2. Simon says:

    nice one

    Thanks..

  3. Siva says:

    Its too good.

  4. Ricardo says:

    I had the same problem, now it’s working!

    thanks 🙂

  5. Dave says:

    Brilliant work! Thanks mate

  6. Fatih Sahin says:

    wow! that worked like a charm!! Thank you for sharing this

  7. Matt Nel says:

    Thanks, nice one – works like a perfectly!

  8. Luciano Castro says:

    Tks a Lot, works fine

  9. martin shing says:

    just wanted to ask why the this.PageStatePersister.ControlState is saved into the viewstate along with the compressed viewstate as it seems to be working fine without it and becomes a lot smaller

  10. martin shing says:

    nevermind, i found the answer after some googling 😛

  11. Really a nice post, was helpfull to a great extend.

  12. Arjen says:

    I have tested this code with two labels on a page and found that the viewstate is bigger with compression than without!

  13. crazybert says:

    Thanks man!

  14. Tayseer Joudeh says:

    Thank you, works great with Telerik Controls.

    @Arjen, you do not need to compress pages with small view state, try this on huge page with Grid view and you will notice difference.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s