This tutorial will show you how to use Validation Controls inside an UpdatePanel Control C#

In this tutorial we will use validation controls inside an UpdatePanel control to perform validation in the browser.
The example is a simplified appointment query system. It allows users to specify a date and the number of people attending. When they submit the page, the page indicates whether an appointment is available.

Here is a snap-shot of what it will look like:

All controls that accept user input are placed within an UpdatePanel control. To ensure that the users enter only valid values, we will need to add validation controls inside the Update control. This way if what the user entered is valid, the UpdatePanel control performs an asynchronous postback. This control allows you to validate values within each UpdatePanel control.

To start, open Visual Studio 2008. File > New > Web Site > ASP.NET Web Site and name it ValUpPanel or whatever you want. Switch to Design View. Locate AJAX Extensions tab and double-click the ScriptManager control within the Toolbox. Then double-click on UpdatePanel.

Now from the standard tab of the toolbox, drag in this order, textbox, calendar, textbox, button and label controls inside the UpdatePanel control.

Before the first textbox type in “Select or enter a date”. Before the second textbox type in “Select number of tickets (1-10). Select the Button control and set its Text property to “Check
Availability”. Finally, select the label control and clear its text property.

Now double-click the Calendar control and add this event handler to the SelectionChanged event.

Now double-click the button control and add an event handler for its click event. This will set the text of the Label control during an asychronous postback.

Above is where you might want to add custom code for your own appointment application. Save and Run.

Now let’s add validation for the input controls.
Switch to Design View. From the Validation tab of the Toolbox, drag a CompareValidator (ControlToValidate = “tbxTextBoxOne”, ErrorMessage=”Pick a Date in the Future”, Operator=”GreaterThanEqual”, Type=”Date”, Display=”None”) and a RequiredFieldValidator (ControlToValidate = “tbxTextBoxOne”, ErrorMessage=”Date is required” control to the UpdatePanel control.

These two validation controls validate the user’s input in the first TextBox control. The validation controls ensure that the user enters a value and that the date represents a date in the future.

Again, from the validation tab of the toolbox, drag a RangeValidator (ControlToValidate = “tbxTextBoxTwo”, ErrorMessage = “Number of people is out of range”, Min=”1”, Max=”10”) and a RequiredFieldValidator (ControlToValidate=”tbxTextBoxTwo”, ErrorMessage=”Number of people is required”) control to the UpdatePanel control.

These validate user input in the second TextBox control. It makes sure that the users enter a value and it’s between 1 -10.

Now drag over a ValidationSummary into the UpdatePanel from the Toolbox under Validation. Double-click anywhere outside of the UpdatePanel to add a handler for the page load event. Then add code to the handler:

The code above sets the ValueToCompare property of the CompareValidator control to today’s date. Then add the following script to the markup for the ScriptManager control.

Next, Switch to Design View and select the button control and set the OnClientClick property to ClearLastMessage(‘lblLabelOne’). This will cause the button to call the script function ClearLastMessage, which we just defined, and pass it the name of the element to clear.

It should look similar to this:

Just in case here is the complete mark-up for ValUpPanel

And the code behind:

Download Source Files