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.
If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
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.
| protected void calCalendarOne_SelectionChanged(object sender, EventArgs e) { tbxTextBoxOne.Text = calCalendarOne.SelectedDate.ToShortDateString(); lblLabelOne.Text = ""; } |
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.
| protected void btnButtonOne_Click(object sender, EventArgs e) { lblLabelOne.Text = "Tickets are available as of " + DateTime.Now.ToString() + "."; } |
Above is where you might want to add custom code for your own appointment application. Save and Run.
We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!
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:
| protected void Page_Load(object sender, EventArgs e) { cvCompareValidatorOne.ValueToCompare = DateTime.Now.ToShortDateString(); } |
We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!
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:
| using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { cvCompareValidatorOne.ValueToCompare = DateTime.Now.ToShortDateString(); } protected void btnButtonOne_Click(object sender, EventArgs e) { lblLabelOne.Text = "Tickets are available as of " + DateTime.Now.ToString() + "."; } protected void tbxTextBoxOne_TextChanged(object sender, EventArgs e) { } protected void calCalendarOne_SelectionChanged(object sender, EventArgs e) { tbxTextBoxOne.Text = calCalendarOne.SelectedDate.ToShortDateString(); lblLabelOne.Text = ""; } } |
Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.
|
|