ViewState and Readonly Property of Textbox

Virendradugar
Posted by in ASP.NET category on for Intermediate level | Views : 7586 red flag

This article helps in understanding how the readonly property behaves when viewstate is enabled or disabled for 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.

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" /> 
<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 set to 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" /> 
<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:

Conclusion

Next time, take care when you are working with readonly property.

Enjoy...

Page copy protected against web site content infringement by Copyscape

About the Author

Virendradugar
Full Name: Virendra Dugar
Member Level: Silver
Member Status: Member,MVP
Member Since: 8/11/2009 4:14:05 AM
Country: India

http://jquerybyexample.blogspot.com
Virendra Dugar is experienced Senior Software Developer with over 5 years of hands-on experience working with Microsoft .NET technology (ASP.NET, C#, VB.NET,SQL Server). He is always keen to learn new technology. He holds a Master's Degree in Computer Application & Information technology from Gujarat University in india.In free time, he loves to listen music, read books, play games and do blogging etc. Visit his blogs : http://jquerybyexample.blogspot.com

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)