Keep ASP.NET ViewState out of ASPX Page for Performance Improvement

Introduction
ASP.NET ViewState is a great mechanism that simplifies the life of ASP.NET developers. But, as everybody knows, the .NET Framework saves the ViewState data as a hidden field on your ASPX page. If your page has only a few controls, this is not a problem. But, if your page has some Panels and/or some DataGrids, with the technique demonstrated on this article, you could reduce dramatically the load time of the page.

We will start our analysis thinking where the Framework needs to work with the data saved on the ViewState hidden field. The answer is: only on the server side. The system doesn't need to work with the ViewState data on the client side, so, if we start to save this data on the server instead of carrying all this from the server to the client and from the client to the server again, we will save a lot of time while loading our documents. You probably won't note the difference while loading the page on the same computer that the application is installed, but, test it using a dial-up connection and you will see what happens. You cold also see the the size of the source code generated with and without this technique.

This example consist of a class that inherits the System.Web.UI.Page, and overrides the methods SavePageStateToPersistenceMedium and LoadPageStateFromPersistenceMedium. These methods are responsible for saving and loading the ViewState used by the controls on a page. What we do is intercept the call to these methods and, using some simple custom config keys on the Web.Config, set how this class should work. It can save the ViewState on the server using two destinations: Session and Cache, and, has the ability to work as the original class, saving the ViewState data to the ASPX page.

If you already have a project and want to start using this technique, all that you need to do is add a reference to the class that accompanies this example and inherit your "code-behind files" from it instead of the System.Web.UI.Page, and add the Config information to your Web.Config.

To develop this technique, I read a lot of articles over the internet, but, one really "opened my mind" of how this implementation could be done and the benefits of it. See more information on the Points of Interest Section.

I included a demo project that you could download and use to test the implementation. Note that the demo project saves the ViewState to the session, which I think is the best place to store it.

Using the code
As I said, the implementation is very easy. So, let's start with my Class code, and after discussing it, let's see the configuration of the Web.Config file.

 

Imports System.Configuration.ConfigurationSettings
Imports System.Diagnostics

Public Class VSPage
    Inherits System.Web.UI.Page

Now, let's see the method responsible for saving the ViewState data, called SavePageStateToPersistenceMedium. All that this method does is see if the ServerSideViewState on our Web.Config file is enabled (True). If no, the system will perform a normal ViewState save, storing it on the ASPX document. If yes, the system will check which is the ServerSideViewState method that you want to use: CACHE or SESSION. If you choose CACHE, the data will be stored on the cache and will expire after some time. If you choose SESSION, the data will be saved on the user session and will be discarded when the user session expires. When this option is used, the system automatically creates a DataTable that will be saved on the session and will hold all the ViewState data. The maximum number of ViewState data that could be held on the DataTable is defined by the Web.Config parameter ViewStateTableSize. The default value, 150, represents that the ViewState data of the last 150 postbacks will be available to the system. So, if the user clicks on the navigator's Back button 150 times (what is improbable to occur), the ViewState for that page will already be present to be used. This is a very good number...

    Protected Overrides Sub _
               SavePageStateToPersistenceMedium(ByVal viewState As Object)

        Dim VSKey As String
        'String that will hold the Unique Key
        'used to reference this ViewState data

        Debug.WriteLine(MyBase.Session.SessionID)

        'Create the key based on the SessionID, on the Request.RawUrl
        'and on the Ticks representated by the exact time
        'while the page is being saved
        VSKey = "VIEWSTATE_" & MyBase.Session.SessionID & "_" & _
                Request.RawUrl & "_" & Date.Now.Ticks.ToString

        'Check if the ServerSideViewState is Activated
        If UCase(AppSettings("ServerSideViewState")) = "TRUE" Then

            'Check were we will save the ViewState Data
            If UCase(AppSettings("ViewStateStore")) = "CACHE" Then

                'Store the ViewState on Cache
                    Cache.Add(VSKey, viewState, Nothing, _
                        Date.Now.AddMinutes(Session.Timeout), _
                        Cache.NoSlidingExpiration, _
                        Web.Caching.CacheItemPriority.Default, Nothing)

            'The ViewStateData will be Saved on the SESSION
            Else        

                Dim VsDataTable As DataTable
                Dim DbRow As DataRow

                'Check if the ViewState DataTable are on the Session
                If IsNothing(Session("__VSDataTable")) Then

                    'No, it's not. Create it...
                    Dim PkColumn(1), DbColumn As DataColumn
                    VsDataTable = New DataTable("VState")
                    'Create the DataTable

                    'Column 1 - Name: VSKey - PrimaryKey
                    DbColumn = New DataColumn("VSKey", GetType(String))
                    VsDataTable.Columns.Add(DbColumn)
                    PkColumn(0) = DbColumn
                    VsDataTable.PrimaryKey = PkColumn

                    'Column 2 - Name: ViewStateData
                    DbColumn = New DataColumn("VSData", GetType(Object))
                    VsDataTable.Columns.Add(DbColumn)

                    'Column 3 - Name: DateTime
                    DbColumn = New DataColumn("DateTime", GetType(Date))
                    VsDataTable.Columns.Add(DbColumn)

                Else
                    'The ViewState DataTable is already on the UserSession
                    VsDataTable = Session("__VSDataTable")

                End If

                'Check if we already have a ViewState saved with the same key.
                'If yes, update it instead of creating a new row.
                '(This is very dificult to happen)
                DbRow = VsDataTable.Rows.Find(VSKey)

                If Not IsNothing(DbRow) Then
                    'Row found!!! Update instead of creating a new one...
                    DbRow("VsData") = viewState
                Else
                    'Create a new row...
                    DbRow = VsDataTable.NewRow
                    DbRow("VSKey") = VSKey
                    DbRow("VsData") = viewState
                    DbRow("DateTime") = Date.Now
                    VsDataTable.Rows.Add(DbRow)
                End If

                'Check if our DataTable is OverSized...
                If Convert.ToInt16(AppSettings("ViewStateTableSize"))_
                                      < VsDataTable.Rows.Count Then
                    Debug.WriteLine("Deleting ViewState Created On " _
                           & DbRow(2) & ",ID " & DbRow(0))
                    VsDataTable.Rows(0).Delete() 'Delete the 1st line.
                End If

                'Store the DataTable on the Session.
                Session("__VSDataTable") = VsDataTable

            End If

        'Register a HiddenField on the Page,
        'that contains ONLY the UniqueKey generated.
        'With this, we'll be able to find with ViewState
        'is from this page, by retrieving these value.
        RegisterHiddenField("__VIEWSTATE_KEY", VSKey)

        Else

        'Call the normal process.
        MyBase.SavePageStateToPersistenceMedium(viewState)

        End If

    End SubAnd now, let's see the method responsible to load the ViewStateData, LoadPageStateFromPersistenceMedium:

    Protected Overrides Function LoadPageStateFromPersistenceMedium() As Object

        'Verifica se o ServerSideViewState est¿ ativado
        If UCase(AppSettings("ServerSideViewState")) = "TRUE" Then

            Dim VSKey As String 'ViewState UniqueKey
            VSKey = Request.Form("__VIEWSTATE_KEY")
            'Request the Key from the page and validade it.

                If Not VSKey.StartsWith("VIEWSTATE_") Then
                    Throw New Exception("Invalid VIEWSTATE Key: " & VSKey)
                End If

            'Verify which <SPAN id=BABID_Results7>modality was used to save ViewState
            If UCase(AppSettings("ViewStateStore")) = "CACHE" Then
                Return Cache(VSKey)

            Else

                Dim VsDataTable As DataTable
                Dim DbRow As DataRow
                VsDataTable = Session("__VSDataTable")
                DbRow = VsDataTable.Rows.Find(VSKey)

                    If IsNothing(DbRow) Then
                        Throw New Exception("VIEWStateKey not Found. " & _
                              "Consider increasing the ViewStateTableSize" & _
                              " parameter on Web.Config file.")
                    End If

                    Return DbRow("VsData")

            End If

        Else

            'Return the ViewState using the Norma Method
            Return MyBase.LoadPageStateFromPersistenceMedium()

        End If

    End Function

End ClassAnd now, this is what we need to insert on our config file Web.Config:

    <!-- application specific settings -->
    <appSettings>

        <!--ServerSideViewState: Defines if ViewState
                 will be saved on the Server: True|False-->
        <add key="ServerSideViewState" value="True"/>

        <!--ViewStateStore: Defines where we'll save the ViewState: Cache|Session-->
        <add key="ViewStateStore" value="Session" />

        <!--ViewStateCacheFSSize: Define the maximum Number
           of viewStates will be saved when ViewStateStore = Session -->
        <add key="ViewStateTableSize" value="150" />

    </appSettings>

hi rohanpandya

do we have the same code in C#?

A couple of ways
http://www.billrowell.com/2009/06/17/remove-viewstate-from-asp-net-page-to-improve-performance/
http://msdn.microsoft.com/en-us/magazine/cc163901.aspx
http://stackoverflow.com/questions/4718779/how-to-remove-or-compress-your-asp-net-viewstate

Here are some brief guidelines to a "Light" page:

1. Use raw text and HTML controls (HTML Tab of the control Toolbox) for things that don't require server side programming.
2. For ASP.NET controls that don't need it, set the property EnableViewState = false.
3. Avoid large datasets on the page. Instead use pagination where only a single page of data is displayed at a time.
4. Use AJAX update panels to avoid expensive POST Backs to the server.
5. Avoid trying to put too much into a single page. Some pages are best split-up into multiple pages that are more focused.
6. Avoid lots of large graphics.
7. Use server side caching strategies for significantly large data sets rather than view state or cookie based caching.

(I'm sure there are more, but this was a quick list off the top of my head and have served me well.)

good

I am trying to use this in Framework 4.0 using Visual Studio 2010. I am getting a couple of errors. Can you provide any help?


Example.jpg