Gil Fink on .Net

Fink about IT

News

Microsoft MVP

MCPD Enterprise Applications Developer

Gil Fink

My Linkedin profile

Locations of visitors to this page

Creative Commons License

Blog Roll

Hebrew MSDN Articles

Index Pages

My OSS Projects

ASP.NET Client Side State Management - ViewState

ASP.NET Client Side State Management - ViewState

What is ViewState?
The ASP.NET ViewState is a client side state management technique which
enables web pages to persist their state during postbacks.
In the life cycle of a page, the current state of the page is hashed to a string and is
saved into a hidden field. When opening a page with the View Source operation
you can find the ViewState's hidden field by searching __VIEWSTATE keyword.
An example of a ViewState on a web page can look like that:

   <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 
      value="/wEPDwUBMA9kFgJmD2QWAgIDD2QWBgI" />

How ViewState Works?
To understand how ViewState works you need to understand the concept of
page life cycle. Every time a page is requested it is going through the same
phases of the page life cycle. You can take a look at the events of the page life
cycle in the following figure that is taken from a MSDN article
of Scott Mitchell - Understanding ASP.NET View State:

Page Life Cycle

The two phases which are connected to the ViewState are called LoadViewState
and SaveViewState. In the LoadViewState (occurs only after postbacks) all the
data is retrieved from the ViewState hidden field and the hashed value is converted
back to values that are populated into the control hierarchy of the page.
In the SaveViewState the state that must be maintained during postbacks is collected
from the page's controls by calling SaveViewState of each control. Then, the values
are combined into a string that is being hashed and the result is stored in the
ViewState hidden field.

EnableViewState Property
ViewState is enabled for every control by default. You can disable the ViewState
of a control by putting false value in the EnableViewState property of the control.
This action decrease your page size and also reduce the process time on the server
side. Pay attention that if you need to save your state and you disable ViewState
it is your responsibility to save the state somehow.

When to Disable ViewState?
When you have a read only controls. Also, when you have controls like GridView
that use a lot of records. The drawback is that you will have to bind your controls
in every postback. The gain is a smaller page, less bandwidth usage by your page
and less process time of the server.

Page ViewState Property
ViewState is not only found on controls it's also a property of the Page class.
You can use it to store custom ViewState data. When you have a small value
(can be every serialized object) and you need to track it in every postback, you
can use the ViewState. This is a temporary storage because when the user leaves
the page the ViewState of the page is disposed and a new ViewState is built for
the new page.

How to Use ViewState?
The next example will answer the question.
Be aware! always check first if the ViewState object exists before making a cast.

        #region Consts

        private const string AGE = "Age";

        #endregion

        #region Properties

        /// <summary>

        /// The Property returns an age if the age

        /// doesn't exists it returns -1.

        /// </summary>

        public int Age

        {

            get

            {

               if (ViewState[AGE] == null)

               {

                    ViewState[AGE] = -1;

               }

               return (int)ViewState[AGE];

            }

            set

            {

               ViewState[AGE] = value;

            }

        }

        #endregion

In the example I have an Age property that I want to save in the ViewState.
In the get operation I Check if the ViewState contains a value for age and if not
I put a -1 to indicate that there is no age currently.
After the check I'll always have a value for age in the ViewState (because I put
-1 as default value) and therefore I return the value with a cast. 
The set operation is simple just put the value in the ViewState.

Summary
Lets sum up the post.
Today I explained the first technique for client side state management - the ViewState.
The technique is commonly used but you should be familiar with the aspects of over 
using the technique and the drawbacks of the technique (page size, consume server 
process time and so on). In the next post I'll continue to explain the client side state
management
.
For further reading about ViewState I recommend the article of Scott Mitchell.

Comments

Gil Fink's Blog said:

In this post I describe the query string technique of the ASP.NET client side state management.

# May 17, 2008 12:45 PM

Gil Fink's Blog said:

In this post I describe the hidden field technique of client side state management.

# May 17, 2008 8:33 PM

Gil Fink's Blog said:

This is another post in the series of ASP.NET client side state management. In this post I explain what are cookies and how to use them.

# May 23, 2008 4:34 PM

Gil Fink's Blog said:

In the post I introduce the ASP.NET server side state management.

# June 13, 2008 5:46 PM

Gil Fink's Blog said:

In this post I explain the control state client side state management and how to use it.

# June 13, 2008 6:06 PM

Gil Fink's Blog said:

In this post I describe the hidden field technique of client side state management.

# July 10, 2008 9:08 PM