Performance with DropDownLists and ViewState

One problem I've noticed on a bunch of sites is a large amount of ViewState. I'm not going to sit here and explain all about ViewState. There are PLENTY of sources for information on that piece of technology. So in an extremely short description of what ViewState is I will say that, "ViewState is a way of preserving the state of the 'Viewed' elements of ASP.NET while the page is sent to the client and back to the server."

So what is the big deal? A little bit of extra information stored in a text file. That doesn't take long to download. Download speeds are really quick. WRONG! Sure, it does not take long to download a little bit of extra data, but ViewState is stored in an input control. This is how the data is able to get back to the server so it can reconstruct the previous state of things. This means clients will push the data up to the server. As many of you probably know upload speeds are much slower than download speeds.

OK, so I need to upload a little bit of extra data. How much are we talking about here? It can't be enough to matter.

I'll show you a bit of testing here. I'll create two ASP.NET pages.

Default.aspx

<form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="DropDownList1" runat="server" />
        <asp:Button id="Button1" runat="server" Text="Postback" />
    </div>
</form>

Default2.aspx

<form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="DropDownList1" runat="server" EnableViewState="false" />
        <asp:Button ID="Button1" runat="server" Text="Postback" />
    </div>
</form>

Default.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    // Create my data source (this would normally be data access or something similar)
    System.Collections.Generic.List<ListItem> myData = new System.Collections.Generic.List<ListItem>();
    for (int i = 0; i < 100; i++)
    {
        myData.Add(new ListItem("Element " + i.ToString(), i.ToString()));
    }
    DropDownList1.DataSource = myData;
    DropDownList1.DataBind();
}

Default2.aspx.cs

protected override void OnInit(EventArgs e)
{
    base.OnInit(e);
    // Create my data source (this would normally be data access or something similar)
    System.Collections.Generic.List<ListItem> myData = new System.Collections.Generic.List<ListItem>();
    for (int i = 0; i < 100; i++)
    {
        myData.Add(new ListItem("Element " + i.ToString(), i.ToString()));
    }
    DropDownList1.DataSource = myData;
    DropDownList1.DataBind();
}

Note: When you disable ViewState you'll want to be binding data to the control during Init otherwise you'll run into some problems, because you'll be binding your data after ViewState has been restored.

These are the only differences between the two pages. So how much of a difference is there? The the amount of data being used for ViewState for the page with ViewState enabled on the DropDownList is 3.07 KB and for the page without ViewState enabled on the DropDownList 52 Bytes. Ok so not too big a deal right? Well imagine if you had a few of these on the page, and maybe the page posts back more than once while being used. Perhaps the hosting server is already somewhat slow. Perhaps you have users on dialup. Keep in mind that if you're setting values from the code for most controls it will end up in viewstate.

Note: Basic form controls will not be using ViewState since they post their values back anyway.

Grab a ViewState Decoder. I use the ViewStateDecoder from Pluralsight. If you use a tool to Decode the ViewState from these pages, you'll notice that the values from the dropdownlist are stored within. It will contain 3 things for each row of the dropdownlist. You'll have the Name of the list item, the value of the list item, and a bool. In total 2 strings and a bit, but since ViewState is all strings anyway this is all stored in a string format.

The spark that formed this blog post. I recently took on some pages with far too much viewstate. They had plenty of stuff on them and none of it had ViewState disabled. I took a page that had html source of 256 KB of data, and I dropped it down to 190 KB of data. It started with 74 KB of ViewState (ouch!) and now has 8 KB of ViewState (w00t!). The page is much much faster. It loads instantly now and when it does a postback it doesn't feel like the application is dying. All it took was removing ViewState from a bunch of controls.