Aesthetic Properties for the Validation Web Controls


As we have seen numerous times in this hour, when a user enters invalid input, the appropriate validation control's ErrorMessage is displayed. In all of the examples, this error message has been displayed in a red font. However, the look and feel of the error message can be specified by setting the various aesthetic properties of the validation Web controls.

As with all Web controls, the validation Web controls contain the typical aesthetic propertiesBackColor, BorderColor, BorderStyle, Font, and so on. In addition to these standard aesthetic properties, the validation controls also contain a Display property.

The Display property specifies how the ErrorMessage property is displayed when the user provides invalid input. Specifically, the Display property can accept one of three values:

  • None

  • Static (the default)

  • Dynamic

Setting Display to None causes the ErrorMessage property not to be displayed ever, even if a user's input is invalid. When Display is set to Static, the error message takes up the same amount of space on the web page when it isn't displayed as when it is displayed. On the other hand, when Display is set to Dynamic, the validation control's error message does not take up space when not being displayed.

To illustrate the difference between the Static and Dynamic settings, create a new ASP.NET page named DynamicVsStatic.aspx. In the web page, add two TextBox Web controls, one right beneath the other. After each TextBox Web control, type in the text This text appears right after a text box. Figure 12.20 shows the Visual Web Developer designer at this point.

Figure 12.20. Two TextBox Web controls have been added to the designer.


Next, between each of the TextBox Web controls and the entered text, drop a RequiredFieldValidator control. Set the RequiredFieldValidator control's ControlToValidate properties to the ID values of the two TextBox Web controls. Set the ErrorMessage property to the value This demonstrates the differences between Static and Dynamic Display. Finally, set one of the two RequiredFieldValidator's Display properties to Dynamic, leaving the other's as Static.

Finally, add a Button Web control beneath both TextBox Web controls. Take a moment to make sure your screen looks similar to Figure 12.21.

Figure 12.21. Two RequiredFieldValidators have been added to the mix.


Now, view the DynamicVsStatic.aspx ASP.NET page through a browser. Notice that for the RequiredFieldValidator whose Display property was left as Static, the text "This appears right after a text box" is far from the right side of the text box. This gap represents the space where the RequiredFieldValidator's error message will be displayed.

For the RequiredFieldValidator whose Display property was set to Dynamic, however, the text "This appears right after a text box" appears immediately after the text box. Figure 12.22 shows the DynamicVsStatic.aspx when viewed through a browser.

Figure 12.22. The apparent gap is due to the RequiredFieldValidator whose Display property is set to Static.


Now, click the button on the web page without entering any input into either of the text boxes. This will cause the error message to display for each of the RequiredFieldValidators. Figure 12.23 shows the page after both error messages are displayed. For the RequiredFieldValidator whose Display property was set to Dynamic, the text "This appears right after a text box" was dynamically moved to the right to accommodate the error message.

Figure 12.23. The page after the button has been clicked.


Table 12.2 contains a summary of the validation Web controls' aesthetic properties.

Table 12.2. The Aesthetic Properties of the Validation Web Controls

Property

Description

BackColor

Specifies the background color of the error message.

BorderColor

Specifies the color of the error message's border.

BorderStyle

Specifies the style of the error message's border.

BorderWidth

Specifies the width of the error message's border.

Display

Specifies how the error message should be displayed.

Font

Specifies the font properties for the error message. Recall that the Font property has a number of subproperties, such as Name, Size, Bold, and so on.

ForeColor

Specifies the color of the error message. (Defaults to red.)





Sams Teach Yourself ASP. NET 2.0 in 24 Hours, Complete Starter Kit
Sams Teach Yourself ASP.NET 2.0 in 24 Hours, Complete Starter Kit
ISBN: 0672327384
EAN: 2147483647
Year: 2004
Pages: 233

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net