|
ASP.NET 2.0 ‘Easy To Do’ Series – Reset values of all controls using ASP.NET 2.0 and JavaScript
|
|
Rating: 43 user(s) have rated this article
Posted by: Suprotim Agarwal,
on 9/29/2007,
in category "ASP.NET 2.0 & 3.5"
Views: this article has been read 25537 times
Abstract: I recently received a request to cover some basic tips that could be useful for anyone using ASP.NET 2.0, in their projects. I am creating the 'ASP.NET 2.0 Easy To Do' series to cover such topics. In this article we will see how easy it is to use recursion and clear values of all controls on a page using ASP.NET 2.0 and JavaScript
Reset values of all controls using ASP.NET 2.0 and JavaScript
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.
C#
protected void btnClearASP_Click(object sender, EventArgs e)
{
ResetFormControlValues(this);
}
VB.NET
Protected Sub btnClearASP_Click(ByVal sender As Object, ByVal e As EventArgs)
ResetFormControlValues(Me)
End Sub
Step 4: Write code for this method
C#
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;
}
}
}
}
VB.NET
PrivateSub ResetFormControlValues(ByVal parent As Control)
ForEach c As Control In parent.Controls
If c.Controls.Count > 0 Then
ResetFormControlValues(c)
Else
SelectCase c.GetType().ToString()
Case"System.Web.UI.WebControls.TextBox"
CType(c, TextBox).Text = ""
Case"System.Web.UI.WebControls.CheckBox"
CType(c, CheckBox).Checked = False
Case"System.Web.UI.WebControls.RadioButton"
CType(c, RadioButton).Checked = False
EndSelect
EndIf
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()’. In the <head> section of the page, add a <script> tag and write the code for the function as shown below :
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Reset controls</title>
<script language="javascript" type='text/javascript'>
function ClearAllControls()
{
for (i=0; i<document.forms[0].length; i++)
{
doc = document.forms[0].elements[i];
switch (doc.type)
{
case "text" :
doc.value = "";
break;
case "checkbox" :
doc.checked = false;
break;
case "radio" :
doc.checked = false;
break;
case "select-one" :
doc.options[doc.selectedIndex].selected = false;
break;
case "select-multiple" :
while (doc.selectedIndex != -1)
{
indx = doc.selectedIndex;
doc.options[indx].selected = false;
}
doc.selected = false;
break;
default :
break;
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
// Other control come here
// Original Code frumbert
That’s it. Quiet simple, wasn’t it. I would encourage you to play with the code and add to it, by writing some of your own for the other controls on the page.
Happy coding!!
Conclusion
In this article, we saw how easy it was to reset controls on a page. If you require a specific tip, drop in a line to me at http://www.dotnetcurry.com/Contact.aspx or add your request as a comment on this page. Your comments will drive me to continue this series. I hope this article was useful and I thank you for viewing it.