Jul 01
A very common requirement that comes up when building a form with lot of fields is resetting the controls back to their original state. In this article, we will explore how to do this task using both ASP.NET and Javascript. I assume you know how to build web pages in asp.net 2.0.
Using ASP.NET
Step 1: Drag and drop a few controls like textboxes, radio buttons, checkboxes etc. on to the form
Step 2: Add a button to the form and rename its Text property as “Clear all controls using ASP.NET”. Rename its id property to be “btnClearASP”.
Step 3: Double click the button. In its click event, call a method that will clear the content of the controls on a Page.
protected void btnClearASP_Click(object sender, EventArgs e)
{
ResetFormControlValues(this);
}
Step 4: Write code for this method
private void ResetFormControlValues(Control parent)
{
foreach (Control c in parent.Controls)
{
if (c.Controls.Count > 0)
{
ResetFormControlValues(c);
}
else
{
switch(c.GetType().ToString())
{
case “System.Web.UI.WebControls.TextBox”:
((TextBox)c).Text = “”;
break;
case “System.Web.UI.WebControls.CheckBox”:
((CheckBox)c).Checked = false;
break;
case “System.Web.UI.WebControls.RadioButton”:
((RadioButton)c).Checked = false;
break;
}
}
}
}
The above function is a recursive function that clears the controls values on a page. I am not sure if this will work for a collection control like a RadioButtonList or similar. But I hope you have got some idea of how to write a function to reset contents on a page.
Using Javascript
Step 1: Drag and drop a few controls like textboxes, radio button, checkboxes etc. on to the form.
Step 2: Drag and drop a html button on the form. Rename it to “Clear All Controls Using Javascript”. Add an ‘OnClick’ attribute and point it to a function “ClearAllControls()” as shown below
<input id=”Button1″ type=’button’ onclick=’ClearAllControls()’ value=’Clear All Controls Using Javascript’/>
Step 3: Write code for this function ‘ClearAllControls()’.