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

View products that this article applies to.

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.

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.

Create a new C# ASP.NET Web application in Microsoft Visual Studio.

In Microsoft Visual Studio 2005, follow these steps:
1. Start Visual Studio 2005.
2. On the File menu, point to New, and then click Web Site.
3. In the New Web Site dialog box, click ASP.NET Web Site, click Visual C# in the Language list, and then click OK.
  
  Note By default, a new Web site that is named WebSite1 is created, and the Default.aspx page is displayed in Source view.
In Visual Studio .NET, on the Project menu, click Add Class.

In Microsoft Visual Studio 2005, click Add New Item on the Website menu.
In the Add New Item dialog box, click Class, click Add, and then click Yes.

Note By default, a new class that is named Class1 is created, and the Class1.cs file is displayed in Source view.

Replace the existing code in the Class1.cs file by using the following code.

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 uppercase to return the month. The lowercase "mm" returns minutes. Returning the date in this format allows for range checking through string comparison.

On the File menu, click Save All, and then click Build Solution on the Build menu.

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.

Add an .ASPX page to the project.
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.
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.

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.

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
Add a Web form button to the page.

Testing the Web Page

Build the application: from the Build menu, click Build Solution.
Right-click the Web form in the Solution Explorer, and then click View in Browser.
You should see a page with a Calendar control and a button on it. Click the button. You should see the RequiredFieldValidator message.
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.
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