How to extend a Web Form control to work with the validation controls by using Visual Basic .NET or Visual Basic 2005 (310082)

SUMMARY

You cannot use all Web Form controls in conjunction with the validator controls. To use controls with the validation controls, the control must have a ValidationProperty attribute. The ValidationProperty attribute specifies against which value the validation controls should validate. This article demonstrates how extend a Web Form control to work with the validation controls.

The Calendar control is one of the controls that cannot be validated in its original state. In many cases, however, you must be able to validate the user selection in the Calendar control. There are two solutions to this problem:

• Write a custom validator control.
• Extend the Calendar control so that you can use it with the built-in validation controls.

This article addresses the second solution. To write a custom validation control, please refer to the help topic in the References section.

NOTE: This article demonstrates 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 many HTML controls are used to build the Calendar control, no single HTML control contains the selected value for the Calendar control. Thus, client-side validation is not appropriate for the Calendar control.

back to the top

Extend the Calendar Control

To extend the Calendar control, you can create 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 that is suitable for the validation controls.

To allow the control to be used with the RequiredFieldValidator control, you return an empty string if the SelectedDate property of the Calendar control is set to "01-Jan-0001" because "01-Jan-0001" is the date that is returned if no date is selected. In all other cases, you return a string that contains the date in the yyyy/MM/dd format that the RangeValidator control can use.

1. Open Microsoft Visual Studio .NET or Microsoft Visual Studio 2005, and then create a new Visual Basic ASP.NET Web Application project.
2. From the Project menu, add a new class to your application as follows:

   <ValidationProperty("Text")> Public Class VCalendar
   
       Inherits System.Web.UI.WebControls.Calendar
   
       Public ReadOnly Property Text()
           Get
               Dim DateString As String = Me.SelectedDate.ToString("yyyy/MM/dd")
               If DateString = "0001/01/01" Then
                   Return ""
               Else
                   Return DateString
               End If
           End Get
       End Property
   
   End Class
   						

   NOTE: In the date format above, "MM" must be uppercase to return the month because the lowercase "mm" returns minutes. If you return the date in this format, you can use string comparison to check range.
3. Save the file, and click Build on the Build menu to build the application.

back to the top

Add the Control to a Web Form

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 that you use in the HTML.

1. Add an .aspx page to the project.
2. At the top of the page, use the <%@ register %> directive to register the control as follows:

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

   NOTE: You must change "Namespace" to match the namespace that is used in the class file and "Assembly" to match the project name of your application.
3. Add a VCalendar control inside the <FORM runat="server"></FORM> tag as follows:

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

4. Switch to Design view. The Calendar control should appear on the Web Form. If the Calendar control does not appear, verify that the "Namespace" and "Assembly" settings are correct.

back to the top

Link to Validator Controls

The sample code in this section demonstrates how to add a RangeValidator and RequiredFieldValidator control to the Web Form and how to link them to the VCalendar control.

1. Add a RangeValidator and RequiredFieldValidator control to the Web Form, and set the properties of these controls as follows to link these controls to the Calendar control:
   
   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 control to the page.

back to the top

Test the Web Page

1. Click Build on the Build menu to build the application.
2. In Solution Explorer, right-click the Web Form, and then click View in Browser.
3. You should see a page that contains a Calendar control and a button. Click the button. You should receive the RequiredFieldValidator error message.
4. Select a date outside the range of 01-Oct-2001 to 31-Oct-2001, and then click the button. The RequiredFieldValidator error message should disappear, and you should receive the RangeValidator error message.
5. Select a date in the range of 01-Oct-2001 to 31-Oct-2001, and then click the button. Neither validator message should appear.

back to the top