Overview Of ViewState In ASP.NET

You will get the following answers here.

  • What is ViewState?
  • How to store the value in ViewState?
  • How to retrieve the value from ViewState?

    • Example 1
      ListBox EnableViewState property example

    • Example 2 
      Manually ViewState storing.

What is ViewState?

ViewState is a client side mechanism. It stores the value in the page itself. Preserving the value of page controls between client to server and server to client is called "roundtrip". It stores the page or control value in the mode of hidden fields. Viewing the source of the page allows you to find the ViewState signature but stores the value in encrypted format even though any programmer can de-encrypt the value.

Storing the value between postbacks is great, but it stores the data in the page itself, that’s why the page becomes very heavy to load or takes time to render.

The ViewState is a dictionary kind of object which stores the value on the basis of KEY/VALUE.

By default, the ViewState is enabled, but we can enable or disable ViewState on Page level or Control level.

There are two properties on Page Level

  1. ViewStateMode
  2. EnableVIewState
  3. ViewStateEncryptionMode = “Always” / “Auto” / “Never”

    Example
    1. <%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"EnableViewState="true"ViewStateMode="Enabled"ViewStateEncryptionMode="Always"%>  

For more details about the above properties, please visit here.

There is one property on Control Level.

  1. EnableViewState = “True” / “False”

    Example

    I took a list control on the page and switched to Properties of ListBox named “lstPostBackDetail”.

    You can see there is a property called EnableViewState = True/False.

    ViewState

How to store the value in ViewState?

ViewState stores the value in a Key/Value pair basis.

Syntax

ViewState[“KeyName”] = Object / String .etc.

Example

  1. ViewState[“PageStartedDateTime”] = DateTime.Now;  
  2. Create a new WebSite project project called“ ViewStateExample”  
ViewState

Right click on project and select Add-->Add New Item and select WebForm.

ViewState

ViewState

Example 1

After successfully adding a new webform, now double click on Default.aspx file in Solution Explorer and add four controls on the webpage.
  1. ListBox
  2. Button
Server Control Server Control ID Description
ListBox lstViewStateEnabledList In this control EnableViewState="True"property is true, that's why control retains the value of control during postbacks.
Button btnViewStateEnabled Button to postbacks
ListBox lstViewStateDisabledList In this control EnableViewState="False"property is false, that's why control doens't retain the value of control during postbacks.
Button btnNormal Button to postbacks

By default, the first time page is executed on browser display it looks like this.

Both the listboxes display the same datetime while rendering for the first time on the browser.

ViewState

Check the ViewState functionality

Now, click on ViewState enabled ListBox Side Submit button.

You can see that it behaves in an additive attitude, which means it adds the datetime value in the listbox because this listbox control's  ViewState setting is ON by a property called

EnableViewState="True"

ViewState

Now, click on ViewState Disabled ListBox Side Submit button.

You can see that its ViewState disabled list box is empty on every postback and it can stores only one entry, not more because this listbox control's ViewState setting is OFF by a property called

EnableViewState="False"

ViewState
Example 2

In this example, we are storing the first time page load datetime value in ViewState and getting back the value from viewstate and displaying it in label control on button click.

Right click on project and select Add-->Add New Item and select WebForm

ViewState

Insert a new webform item.

ViewState

Server Control Server Control ID Description
Label lblPageLoadTime To display first time page load datetime which is stored during page load event.
Label lblCurrentDateTime To display current datetime
Button btnGetFirstLoadTime Click on Button to get the current datetime and display page load datetime.

ViewState

Happy coding.


Similar Articles