There are many cases where we may need to implement complex forms that contain multiple sections that can be hidden or shown depending on the user’s entries.
The issue we encounter in such scenarios is that the section we want to hide or show may contain validators that must be disabled in order to let the form to post back. This can be easily achieved using a server side code, but it involves a round trip to the server which we would like to avoid for performance reasons.
This control is all about making all this work transparently to the developer. The only thing developers will need to do is to add this to their form and embed all the controls and their validators in it. It then handles all the necessary enabling/disabling of nested validators and also, shows/hides all controls in it.
For example, consider the following form:
When the user clicks on the check button, we would like the second part of the form to be displayed as well:
Knowing that the three new displayed fields are mandatory, if we do not disable their validators when we hide the bottom part of the form, it won’t post back, and actually, it won't even display the validation error messages since those will be contained in a hidden
Using the code
From the client side perspective
To make a control AJAX enabled, we must implement the
ScriptControlDescriptor for this control is pretty simple as it contains the following properties:
Validators: an array of all validator IDs.
GroupName: an arbitrary string used to group sections together in one page and make their appearance exclusive (when one section is shown, all others with the same group name are hidden).
ShowHideControl: This is an
ShowControl: A reference to a radio button that will show the section if checked.
HideCoontrol: A reference to a radio button that will hide the section if checked.
Following is the code that implements the
ScriptControlDescriptor desc =
new ScriptControlDescriptor("SABBEL.Web.Controls" +
string validatorsArray = new string[_validators.Count];
if (HideControl != null)
if (ShowControl != null)
yield return desc;
ScriptReference reference = new ScriptReference(
yield return reference;
SABBEL.Web.Controls.Ajax.CollapsibleFormSection” class has a few methods. The most important one is the
ShowHide that will show or hide the section depending on the first parameter value. This method will, in turn, call “
ResetValidators” to either enable them or disable them depending on whether we are showing or hiding the section.
Another method “
InitializeCollapsibleForms” is registered to start as soon as the AJAX Toolkit is loaded. This is done by calling the
That is, once the whole page is loaded, it will check all the sections in the page, and hide or show them initially depending on the state of the controls (check boxes or radio buttons) that control them.
Signature of the JS function
function showHideForm(showHideControl, collapsableSectionId)
From the server side perspective
On the server side, this control parses all child controls looking for any validator. All validator client IDs will be kept in an array and passed to the AJAX object reference through its ‘
Validators’ property. If the property “
Recursive” is set to
true, the control will parse child controls recursively. This may have a performance impact, and for this reason, the
Recursive property is set to
false, by default.
And, that’s it. As you can see, most of the work is done on the client side with the AJAX component, as described above.
How to use this control
In the page, just surround your form section that you want to hide and show on demand by the
AjaxCollapsibleFormSection control, and specify which control will trigger the show and/or hide event; in the example below, the control is the
Text="show this section" ID="checkbox1" />
ErrorMessage="First Name is mandatory"
First Name: <asp:TextBox runat="server" ID="firstName">
ErrorMessage="Last Name is mandatory"
Last Name: <asp:TextBox runat="server" ID="lastName">
runat="server" ErrorMessage="Street address is mandatory"
Street Address: <asp:TextBox runat="server" ID="address">
In the sample application, there are examples of the usage of exclusive sections and recursive controls for the case when you have a nested user control in the section.
This is a good example of what we can achieve using AJAX enabled controls. There is much to say about AJAX controls, but hopefully, this one can be a good starting point.
One enhancement would be to decouple this control from check boxes and radio buttons, and allow any other web control to trigger it; for instance, we could have a link that will show the section, and another link on the page that will hide it. Or it could be a button, an image…