How to extend a Web form control to work with the validation controls by using Visual C# (310145)

SUMMARY

This step-by-step article shows you how to extend the Calendar control for server-side validation.

Not all Web form controls can be used in conjunction with the validation controls. In order to be used with the validation controls, the control must have a ValidationProperty attribute. The ValidationProperty attribute tells the validation controls the value to validate against.

The Calendar control is one of the controls that cannot be validated in its original state. In many cases, however, it is necessary to be able to validate the user selection in the Calendar control.

There are two solutions to this problem. The first is to write a custom validation control. The second is to extend the Calendar control so that it can be used with the built-in validation controls. This article addresses the second solution. For information on writing a custom validation control, refer to the "References" section of this article.

NOTE: This article shows you how to extend the Calendar control for server-side validation only. For client-side validation to occur, the validation controls hook up to the corresponding HTML control's Value property. Because the Calendar control is built through the use of many HTML elements, there is no single HTML control that contains the selected value for the Calendar control, so client-side validation is not appropriate for the Calendar control.

back to the top

Extending the Calendar Control

You can extend the Calendar control by creating a class that inherits from the existing Calendar control. To allow the control to interact with the validation controls, you add the ValidationProperty attribute and a property that returns the selected date in a format suitable for the validation controls.

To allow the control to be used with the RequiredFieldValidator, your code will return an empty string if the Calendar's SelectedDate property is set to 01-Jan-0001 because this is the date that is returned if no date is selected. In all other cases, it will return a string that contains the date formatted as yyyy/MM/dd, which can be used by the RandgeValidator control.

1. Create a new C# ASP.NET Web application in Microsoft Visual Studio.
2. From the Project menu, add a new class to your application:

   using System;
   using System.Web.UI;
   using System.ComponentModel;
   
   namespace ExtendCalendar
   {
   	[ValidationProperty("Text")]
   	public class VCalendar : System.Web.UI.WebControls.Calendar
   	{
   		public string Text 
   		{
   			get
   			{
   				string dateString = this.SelectedDate.ToString("yyyy/MM/dd");
   				if (dateString=="0001/01/01") return "";
   				return dateString;
   			}
   		}
   	}
   }
   						

   NOTE: In the date format, "MM" must be upper case in order to return the month. The lowercase "mm" returns minutes. Returning the date in this format allows range checking through string comparison.
3. Save the file and build the application: from the Build menu, click Build.

back to the top

Adding the Control to a Web Form

In order to add a custom control to a Web form, you must add a reference to the top of the Web page. This defines the namespace and tag you use in the HTML.

1. Add an .ASPX page to the project.
2. Register the control at the top of the page by using the <%@ register %> directive.

   <%@ Register TagPrefix="Custom" Namespace="ExtendCalendar" Assembly="csExtendCalendar" %>
   						

   You must change the namespace to match the namespace used in the class file and the assembly name to match the project name of your application.
3. Add a vCalendar control inside the <FORM runat=server></FORM> tag.

   <CUSTOM:VCALENDAR id="MyCalendar" runat="server"></CUSTOM:VCALENDAR>
   						

   Switch to Design view, and you should see the Calendar control on the Web form. If not, you should check that the namespace and assembly settings are correct.

back to the top

Linking to Validator Controls

This step adds both a RangeValidator and a RequiredFieldValidator control to the Web form and links them to the VCalendar control.

1. Add a RangeValidator and a RequiredFieldValidator control to the Web form and link them to the Calendar control by setting their properties as follows.RangeValidator:

   ControlToValidate: MyCalendar
   ErrorMessage: Date must be between 10/1/2001 and 10/31/2001
   MinimumValue: 2001/10/01
   MaximumValue: 2001/10/31
   EnableClientScript: False

   RequiredFieldValidator:

   ControlToValidate: MyCalendar
   ErrorMessage: Please enter a Date!
   EnableClientScript: False

2. Add a Web form button to the page.

back to the top

Testing the Web Page

1. Build the application: from the Build menu, click Build.
2. Right-click the Web form in the Solution Explorer, and then click View in Browser.
3. You should see a page with a Calendar control and a button on it. Click the button. You should see the RequiredFieldValidator message.
4. Select a date outside the range of 01-Oct-2001 to 31-Oct-2001, and then click the button. You should see the RequiredFieldValidator message disappear and be replaced by the RangeValidator message.
5. Select a date in the range 01-Oct-2001 to 31-Oct-2001, and then click the button. Neither validator message should appear.

back to the top