May 17, 2009

The Asp.Net TextBox control contains two properties "Enabled" and "ReadOnly" that are kind of similar. Both the controls can be used to prevent a user from entering a value. The properties can be set in a TextBox control as follows.

<asp:TextBox ID="TextBox1" runat="server" Text="xyz" Enabled="false"></asp:TextBox>

<asp:TextBox ID="TextBox2" runat="server" Text="abc" ReadOnly="true"></asp:TextBox>

When the Enabled property is set to false, the disabled attribute of the html output is set to disabled. When the ReadOnly property is set to true, the ReadOnly property of the html output is set to ReadOnly.
<input name="TextBox1" type="text" value="xyz" id="TextBox1" disabled="disabled" />
<input name="TextBox2" type="text" value="abc" readonly="readonly" id="TextBox2" />
Both the properties, Enabled and ReadOnly prevents the user from the entering content on the text boxes, but the values can be updated by using javascript or from code-behind. This can be done by setting the TextBox's Text property.

When the values are updated programmatically, when a postback occurs, the value in a disabled TextBox is retained. That is, the control's Text property is posted back to the server. If the value is updated using javascript, the value is not posted back to the server during a postback. The value retained in the ViewState is the last value before the control was disabled or set from the server side.

For a readonly textbox, the value is posted back to the server regardless of whether the Text property is updated from client or server side. However, does not process a readonly textbox. This can be demonstrated by using setting a required field validation on the readonly control. While using a required field validator, the controls value is set to "".

Code used to demonstrate the above is below.
aspx page:

<head runat="server">

<title>Untitled Page</title>

<script type="text/javascript" language="javascript">

function testClick()


document.getElementById("TextBox1").value = "text2";

document.getElementById("TextBox2").value = "text2";

document.getElementById("TextBox5").value = "text2";

document.getElementById("TextBox1").disabled = true;

document.getElementById("TextBox2").readonly = true;


</script> </head>


<form id="form1" runat="server">


Enabled="false" : <asp:TextBox ID="TextBox1" runat="server" Text="xyz" ></asp:TextBox><br

ReadOnly="true" : <asp:TextBox ID="TextBox2" runat="server" Text="abc" ></asp:TextBox><br />

<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /><br />

<asp:ButtonID="Button2"runat="server" Text="Button2" /><br />

<asp:Button ID="Button3" runat="server" Text="Button3" onclick="Button3_Click" /><br/>

<asp:LabelID="Label1" runat="server"Text="Label" EnableViewState="false"></asp:Label>

<input id="Button4" type="button" value="button" onclick="testClick()" />

<asp:TextBoxID="TextBox5" runat="server" ReadOnly="true"></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" errorMessage="RequiredFieldValidator" ControlToValidate="TextBox5"></asp:RequiredFieldValidator>

</div> </form> </body>

Code behind:

protected void Button1_Click(object sender, EventArgs e)

TextBox1.Text =
TextBox2.Text =

protected void Button3_Click(object sender, EventArgs e)

Label1.Text = TextBox1.Text +
"<br/>" +
TextBox2.Text +
"<br/>" +
TextBox5.Text ;



sawyer lin said...

Thanks for your post

Reference: Shahed Kazi at