There are certain scenarios where Textbox webcontrols will not post the Text value enter by the user back to the server. To understand these scenarios I created the following form consisting of 4 textboxes. On the first textbox (ReadOnlyTextBox) I set the ReadOnly property to true using the properties window. On the second textbox (DisabledTextBox) I set the enabled property to false using the properties window. On the next two textboxes I did not set the ReadOnly or Eanbled properties, but I did add attributes via C# code in the Form_Load event as will be highlighted later. Here is the complete form.
<p>
<asp:TextBox ID="ReadOnlyTextBox" ClientIDMode="Static" runat="server" ReadOnly="True"></asp:TextBox>
</p>
<p>
<asp:TextBox ID="DisabledTextBox" ClientIDMode="Static" runat="server" Enabled="False"></asp:TextBox>
</p>
<p>
<asp:TextBox ID="ReadOnlyByAttributeTextBox" ClientIDMode="Static" runat="server"></asp:TextBox>
</p>
<p>
<asp:TextBox ID="DisabledByAttributeTextBox" ClientIDMode="Static" runat="server"></asp:TextBox>
</p>
<p>
<asp:Button ID="SubmitButton" runat="server" OnClick="SubmitButton_Click" Text="Submit" />&nbsp;
<asp:Button ID="ClearButton" runat="server" Text="Clear Fields" OnClick="ClearButton_Click" />
</p>
<p>
<asp:Button ID="PopulateFieldsButton" runat="server" Text="Populate Fields (ServerSide)" OnClick="PopulateFieldsButton_Click" />
<input type="button" value="Populate Fields (ClientSide)" onclick="Populate();" />
</p>
<asp:Literal ID="OutputDisplay" runat="server"></asp:Literal>
I also added a basic javascript function to the page to set the Text value of the 4 text boxes for comparing the difference in postback results when the textboxes are populated via server side code or client side code.
<script type="text/javascript">
function Populate() {
var readOnly = document.getElementById("ReadOnlyTextBox");
var disabled = document.getElementById("DisabledTextBox");
var readOnly2 = document.getElementById("ReadOnlyByAttributeTextBox");
var disabled2 = document.getElementById("DisabledByAttributeTextBox");
readOnly.value = "ReadOnly By Property";
disabled.value = "Disabled By Property";
readOnly2.value = "ReadOnly By Atribute";
disabled2.value = "Disabled By Attribute";
}
</script>
Here is the C# code for the ASP.NET page. In the Page_Load event the readonly and disabled attributes are set for the relevant two textboxes. When the form is submitted the values of the tesxtboxes are read and displayed in a Literal webcontrol. There is also a PopulateFieldsButton_Click event to populate the tesxtboxes from server side.
protected void Page_Load(object sender, EventArgs e)
{
ReadOnlyByAttributeTextBox.Attributes.Add("readonly", "readonly");
DisabledByAttributeTextBox.Attributes.Add("disabled", "disabled");
// uncomment below to compare effect of populating TextBoxes in form load at server side
//SetTextBoxes();
}
protected void SubmitButton_Click(object sender, EventArgs e)
{
var output = new StringBuilder();
output.Append("Posted Values<br/>");
output.AppendFormat("ReadOnly By Property TextBox: {0}<br/>", ReadOnlyTextBox.Text);
output.AppendFormat("Disabled By Property TextBox: {0}<br/>", DisabledTextBox.Text);
output.AppendFormat("ReadOnly By Attribute TextBox: {0}<br/>", ReadOnlyByAttributeTextBox.Text);
output.AppendFormat("Disabled By Attribute TextBox: {0}<br/>", DisabledByAttributeTextBox.Text);
OutputDisplay.Text = output.ToString();
}
protected void PopulateFieldsButton_Click(object sender, EventArgs e)
{
SetTextBoxes();
}
protected void ClearButton_Click(object sender, EventArgs e)
{
DisabledTextBox.Text = String.Empty;
ReadOnlyTextBox.Text = String.Empty;
ReadOnlyByAttributeTextBox.Text = String.Empty;
DisabledByAttributeTextBox.Text = String.Empty;
}
private void SetTextBoxes()
{
ReadOnlyTextBox.Text = "ReadOnly By Property";
DisabledTextBox.Text = "Disabled By Property";
ReadOnlyByAttributeTextBox.Text = "ReadOnly By Attribute";
DisabledByAttributeTextBox.Text = "Disabled By Attribute";
}
On to the tests.
Test 1 – Populate server side.
- Ensure the fields are empty by clicking the Clear Fields button
- Click the Populate Fields (ServerSide)
- Click the Submit Button
The results show the Text value was posted back to all except the textbox with the disabled attribute set by C# code.
ReadOnly By Property TextBox: ReadOnly By Property
Disabled By Property TextBox: Disabled By Property
ReadOnly By Attribute TextBox: ReadOnly By Attribute
Disabled By Attribute TextBox:
Test 2 – Populate client side
- Ensure the fields are empty by clicking the Clear Fields button
- Click the Populate Fields (ClientSide)
- Click the Submit Button
The results show the Text value was posted back to the server only on the textbox with the readoly attribute set by C# code.
ReadOnly By Property TextBox:
Disabled By Property TextBox:
ReadOnly By Attribute TextBox: ReadOnly By Atribute
Disabled By Attribute TextBox:
So, if you want the Text value of the textbox to be posted to the server and you do not want the user to modify the contents of the textbox use C# code to set the ReadOnly attribute.
Like this:
Like Loading...
You must be logged in to post a comment.