ViewState and Readonly Property of Textbox

Introduction

It has been under discussion for some time that ASP.NET textbox which has the Readonly property assigned true does not retain the server side or client side changes. The changes are getting ignored across postbacks.

Using the Code

Let’s understand both the scenarios:

When EnableViewState is Set to True

When EnableViewState is set to true, then readonly textbox does maintain the server side changes but it does not maintain client side changes.

Let us understand with an example.

Declare a readonly textbox and two buttons. As by default EnableViewState property is true, we have not set it for the textbox.

<asp:TextBox ID="TextBox1" runat="server" ReadOnly="true" /> 
<br /> 
<asp:Button ID="btnServer" runat="Server" 
	Text="Server Side" OnClick="btnServer_Click" /> 
<asp:Button ID="btnClient" runat="Server" Text="Client Side" 
	OnClientClick="return changevalue();" />

Put this JavaScript function in the head section which modifies the text box value on the client side which is called on btnClient button.

<script language="javascript" type="text/javascript"> 
function changevalue()
{
    document.getElementById('TextBox1').value = 'Modified Sample Text';
    return false;
}
</script>

Now, in the page load section, set the text box value.

protected void Page_Load(object sender, EventArgs e)
{
     if (!IsPostBack)
         TextBox1.Text = "Read only text box";
}

On btnserver_click, just display the value of text box using Response.write().

protected void btnServer_Click(object sender, EventArgs e)
{
     Response.Write(TextBox1.Text);
}

Now, just execute the program.

Initially text box is having "Read only text box" . Now click on the Client Side button and you will see that the textbox value is changed to "Modified sample Text". Now click on server side button. You will see the Server side value assigned to the textbox is displayed on the screen, not the client side value.

When EnableViewState is False

When EnableViewState is set to false, then readonly textbox does not maintain the server side changes and client side changes.

Let us understand with an example:

Declare a readonly textbox with EnableViewState= "false" and two buttons:

<asp:TextBox ID="TextBox2" runat="server" EnableViewState= "false" ReadOnly="true" /> 
<br /> 
<asp:Button ID="btnServer1" runat="Server" Text="Server Side" 
	OnClick="btnServer1_Click" /> 
<asp:Button ID="btnClient1" runat="Server" Text="Client Side" 
	OnClientClick="return changevalue1();" />

Put this JavaScript function in the head section which modifies the textbox value on the client side:

<script language="javascript" type="text/javascript"> 
function changevalue1()
{
    document.getElementById('TextBox2').value = 'Modified Sample Text';
    return false;
}
</script>

In the page load section, set the textbox value.

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
        TextBox2.Text = "Read only text box";
}

On btnserver_click, just display the value of textbox using Response.write().

protected void btnServer1_Click(object sender, EventArgs e)
{
     Response.Write(TextBox2.Text);
}

Now, just execute the program.

Initially textbox has "Read only text box" . Now click on the Client Side button and you will see that textbox value is changed to 'Modified sample Text". Now click on server side button. You will see that nothing is displayed on the screen. Textbox loses not only the client side value but also the server side value assigned to it.

One interesting thing is if you assign any value to the readonly textbox with EnableViewState= "false" at design time, it maintains that value. For example,

<asp:TextBox ID="TextBox3" runat="server" 
	EnableViewState= "false" ReadOnly="true" Text="Sample Text" /> 

Now Textbox will maintain this value assigned at design time even after postback.

Let's go back to our second scenario:

Now, the question here is whether there is any way to retrieve the value from the server once it is lost. Yes, there is...

protected void btnServer1_Click(object sender, EventArgs e)
{
     Response.Write(Request.Form[TextBox2.UniqueID]);
}

The line, Request.Form[TextBox2.UniqueID], will give the last modified (whether on server or on client) value of textbox.

As we saw, there are a number of concerns while using the readonly property. The best solution to avoid all these issues is in the code behind file. Within the Page_Load add the following line of code:

TextBox1.Attribute.Add("readonly","readonly");

Now you will notice that when you run the page, the client side changes you make in the TextBox (via the JavaScript) are retained across postback.

Check out these other references:

• ASP.NET 2.0 ReadOnly behavior change when EnableViewState is false
• Readonly Property of Textbox in ASP.NET

Enjoy!

History

• 24^th February, 2009: Initial post