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:
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:
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.
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.
private const string AGE = “Age”;
/// The Property returns an age if the age
/// doesn’t exists it returns -1.
public int Age
if (ViewState[AGE] == null)
ViewState[AGE] = -1;
ViewState[AGE] = value;
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.
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
For further reading about ViewState I recommend the article of Scott Mitchell.