ViewState For TextBox in ASP.Net

Introduction

This article explains the uses of ViewState for TextBoxes. One of the common interview question is “Explain the use of ViewState for TextBox?” and the most popular and common answer for this question is view state will maintain the text property value of the TextBox after a PostBack of the page.

Let us see with some practical examples what the correct answer is. Go through the following procedure and validate your answer.

Step 1

Open Visual Studio and create a webpage. Drag and drop one TextBox and one button control to that page.

<div>
       Name<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
       <br />
       <asp:Button ID="btnSubmit" runat="server"
           Text="Submit" />
</div>

Step 2

Right-click on the TextBox and select EnableViewState to false and ViewStateMode="Disabled" for TextBox.

 

 

Then the HTML of the TextBox will be like:

Name<asp:TextBox ID="TextBox1" runat="server"
            EnableViewState="False" ViewStateMode="Disabled"
 ></asp:TextBox>

Step 3

Run the page. Then enter some value inside the TextBox and click on the button to submit the page. 

Now notice that we are not losing the data, even if the ViewState is disabled for the TextBox. Now a big question arises.

Where the data for the TextBox is coming from when EnableViewState is False

When EnableViewState is false the data for the TextBox is coming from the System.Web.UI.WebControls.TextBox class, that is one of several classes that implement the IPostBackDataHandler interface. This interfac requires the LoadPostData method. After page initialization is completed but before the Load event loading of ViewState data is invoked (LoadViewState), then if the control implements IPostBackDataHandler, the loading of the form data is invoked (LoadPostData). The Text property of a TextBox control can therefore be set even if the View State mechanism is disabled.

Completely disable the View State mechanism for TextBox controls and the like

The View State mechanism for TextBox controls and the like cannot be completely disabled. For example, View State is useful when the TextChanged event is handled (for comparing the current and previous values). It can also be used when the value that is being set is other than the one related to the Control's value (for example ForeColor, FontSize and so on).

All controls that implement IPostBackDataHandler load their values even if ViewState is off.

Here's a list of controls that implement IPostBackDataHandler:

• CheckBox
• CheckBoxList
• DropDownList
• ListBox
• RadioButtonList
• TextBox

The use of ViewState for the TextBox

The ViewState is not only used for maintaining the state of data inside a control, there are also many other state management that has been done for ViewState for a control like ForeColor, BackColor and so on. Now take a close look at following example in which I am setting the background and forground color of the TextBox when the user selects the Radio buttons.

First design the web form like the following.

<table class="style1">
            <tr>
                <td>
                    BackColor
                </td>
                <td>

                    <asp:RadioButtonList ID="rbLBackColor" runat="server" AutoPostBack="True"
                        onselectedindexchanged="rbLBackColor_SelectedIndexChanged"
                        RepeatDirection="Horizontal">
                        <asp:ListItem>Red</asp:ListItem>
                        <asp:ListItem>Green</asp:ListItem>
                        <asp:ListItem>Blue</asp:ListItem>
                    </asp:RadioButtonList>
                </td>
            </tr>
            <tr>
                <td>
                    ForeColor
                </td>
                <td>

                    <asp:RadioButtonList ID="rbLForeColor" runat="server" AutoPostBack="True"
                        onselectedindexchanged="rbLForeColor_SelectedIndexChanged"
                        RepeatDirection="Horizontal">
                        <asp:ListItem>Red</asp:ListItem>
                        <asp:ListItem>Green</asp:ListItem>
                        <asp:ListItem>Blue</asp:ListItem>
                    </asp:RadioButtonList>
                </td>
            </tr>
            <tr>
                <td>
                    Name
                </td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server" EnableViewState="False"
                        ViewStateMode="Disabled"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>

                </td>
                <td>
                    <asp:Button ID="btnSubmit" runat="server" Text="Submit" EnableViewState="False" OnClick="btnSubmit_Click" />
                </td>
            </tr>
</table>

Keep in mind that you use EnableViewState="False" ViewStateMode="Disabled" for TextBox.

Now double-click the radio button list to generate the event handler for that and write the following code for each radioButtonList.

protected void rbLBackColor_SelectedIndexChanged(object sender, EventArgs e)
{
    if(rbLBackColor.SelectedItem.Value.Equals("Red"))
    {
        TextBox1.BackColor =Color.Red ;
    }
    else if(rbLBackColor.SelectedItem.Value.Equals("Green"))
    {
        TextBox1.BackColor = Color.Green;
    }
    else if(rbLBackColor.SelectedItem.Value.Equals("Blue"))
    {
        TextBox1.BackColor = Color.Blue;
    }
}

protected void rbLForeColor_SelectedIndexChanged(object sender, EventArgs e)
{
    if (rbLForeColor.SelectedItem.Value.Equals("Red"))
    {
        TextBox1.ForeColor = Color.Red;
    }
    else if (rbLForeColor.SelectedItem.Value.Equals("Green"))
    {
        TextBox1.ForeColor = Color.Green;
    }
    else if (rbLForeColor.SelectedItem.Value.Equals("Blue"))
    {
        TextBox1.ForeColor = Color.Blue;
    }
}

Now run the page and you will get the following output.

Now select each radio button to get the change in the color of the TextBox like:

Until then everything is normal. Now click the button and you will notice that the TextBox ForeColor and BackColor state we are losing after postback. So here viewState comes into the picture. If we enable view true for the TextBox like:

<asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>

Now if we click the button even if after a postback then the Forecolor and BackColor state for that TextBox will be the same as the selected Radio Buttons.

This is small but tricky things for view state in ASP.NET control.

Summary

In this illustration you came to understand the basics of ViewState with ASP.NET controls. Feel free to leave any feedback on this article. If you have any questions, please do not hesitate to ask me here.