Project Cool

ASP.NET 2.0 TextBox Ready Only losing client side changes, values across postback?

Well, this has been under discussion for sometime and I knew this was a known issue although it was a design change in ASP.NET 2.0.

I am talking about the TextBox which has the Read Only property assigned true not retaining the values or client side changes getting ignored across postbacks.  There are certain blogs / articles which talk about it but for the benefit of those who get stuck with this, I am giving herebelow the steps to reproduce and the resolution for the same.

ASP.NET 2.0 had a design change by which a an <asp:TextBox> control if marked with its ReadOnly property as true, would ignore client side changes and would lose the same across postback.  So if you tried modifying the text box value or add a value to the text box using Javascript you wouldnt be able to retireve the value in the code behind or simply the value will be lost across postback.

Try doing this

Declare a TextBox

<asp:TextBox ID="TextBox1" runat="server" Text="Sample Text" ReadOnly="true" />

Add the following Button

<asp:Button ID="Button1" runat="Server" Text="Submit" OnClick="Button1_Click"  />

The purpose of the above button is to invoke a code behind method, the click event where we can do a Response.Write of the TextBox value.

So, in the code behind, add the following method

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

then add the following button

<input type="Button" name="Button2" onclick="changevalue()" />

The purpose of the input type button is to execute a client side javascript.

The client side script is as follows:-

 <script language="javascript">
        function changevalue()
        {
        this.form1.TextBox1.value = "Modified Sample Text";
       
        }
   
    </script>

Place the above script before the </head> tag in your HTML Source.

Now, if you click on the input type button you will see that the TextBox value changes to "Modified Sample Text". 

However, when you click on the button "Submit" which is an <asp:Button>, a server control, you will see that the text that it writes to the browser is again "Sample Text".  You will also see that the TextBox has the value reset to "Sample Text".

This is independent of whether you set the EnableViewState property for the TextBox to true or false.  In fact the EnableViewState property for a TextBox doesnt make a difference since the values in a TextBox are maintained and retrieved from the Form's Collection and not from the ViewState.

However, there is a work around for the same.  Instead of setting the "Read Only=true" property in the design you can enable the ReadOnly property of the TextBox through the Attributes collection in the code behind.  To do that, remove the ReadOnly property from the TextBox declaration above.  Then, in the code behind file, within the Page_Load add the following line of code:-

TextBox1.Attributes.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) is retained across postback.

This behaviour is by design in ASP.NET 2.0 and it has been designed with the idea that a ReadOnly TextBox shouldnt be modified in the client side by a malicious code.

For more information check http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.textbox.readonly.aspx

Cheers !!! 

posted @ Thursday, May 10, 2007 9:23 AM