Controls for MCAD Exam 70-315

Date: Nov 13, 2003

Return to the article

Chapter 3:Controls

Terms you'll need to understand:

• Cascading Style Sheets
• Client-side event handling
• HTML controls
• HTML server controls
• Server-side event handling
• Validation controls
• Web server controls

Techniques you'll need to master:

• Knowing how to use the common HTML and Web forms controls available in the Visual Studio .NET toolbox
• Understanding how to handle events for Web forms controls and getting comfortable with client-side and server-side event handling techniques
• Understanding how to create controls dynamically
• Working thoroughly with validation Web server controls and answering questions that ask you to choose the most appropriate validation control for a given scenario
• Knowing how to create and apply Cascading Style Sheets for consistent formatting of Web pages

Controls are the building blocks of a GUI. In this chapter, you'll work with HTML controls, HTML server controls, Web server controls, and validation controls to create the user interface for a Web application. You will also learn about user controls, composite controls, and custom controls, which enable you to extend the existing controls to achieve custom functionality.

HTML Controls

HTML controls represent common HTML elements and are available through the HTML tab of the Visual Studio .NET toolbox. You can drag these controls to a Web form and set their properties in the Properties window. An HTML control, such as Text Field or Label, is converted to its appropriate HTML equivalent, such as the <INPUT> and <DIV> element, respectively, in the source code of the ASPX file. All the HTML controls are automatically placed inside an HTML <FORM> element.

HTML controls are only of little use in ASP.NET programs because they can't be accessed from the server-side code. ASP.NET provides two other sets of controls that are much better suited for server-side programming: HTML server controls and Web server controls.

HTML Server Controls

HTML server controls are similar to HTML controls with the added feature of server-side availability. You can convert any HTML control to run as an HTML server control by adding a runat="server" attribute to its declaration. You can accomplish the same task visually by right-clicking an HTML control and selecting Run As Server Control from the shortcut menu.

Web Server Controls

Web server controls provide a higher level of abstraction than HTML server controls because their object model matches closely with the .NET Framework rather than matching with the requirements of HTML syntax.

The Web server controls have several advanced features, including

• Web server controls provide a rich object model that closely matches with the rest of the .NET Framework.

• Some Web server controls provide richer functionality, such as the Calendar control, AdRotator control, and so on, not available with HTML controls.

• Web server controls have advanced features such as automatic browser detection, automatic postback, and event bubbling.

Web server controls are declared in code explicitly by prefixing the class name of the Web server control with the namespace asp and separating both with a colon (:), as well as including the runat="server" attribute in its definition. For example, a Label Web server control can be declared in code as <asp:Label runat="server"/>.

Most Web server controls derive their functionality from the WebControl class of the System.Web.UI.WebControls namespace.

Table 3.1 lists some of the important properties inherited by Web server controls that derive from the WebControl class.

Table 3.1 Important Properties of the System.Web.UI.WebControls.WebControl Class

Common Web Server Controls

This section discusses some simple but commonly used controls available in the Visual Studio .NET toolbox. These controls are simple because they are usually rendered as single HTML elements and have only a few properties. Later in this chapter, you will learn about some advanced controls that provide myriad properties and render big chunks of HTML code.

Label Controls

A Label control is used to display read-only information to the user, label other controls, and provide the user with any useful messages or statistics. It exposes its text content through the Text property, which can be used to manipulate its text programmatically. The control is rendered as a <span> HTML element on the Web browser.

TextBox Controls

A TextBox control provides an area the user can use to input text. Depending on how you set the properties of this Web server control, you can either use it for multiline text input or use it like a password box that masks the characters entered by the user. Thus, this server control can be rendered as three types of HTML elements: <input type="text">, <input type="password">, and <textarea>. Table 3.2 summarizes the important members of the TextBox class.

Table 3.2 Important Members of the TextBox Class

Image Controls

An Image Web server control displays images from bitmap, JPEG, PNG, and GIF files. The control is rendered as an <img> HTML element on the Web page. Table 3.3 summarizes the important properties of the Image class.

Table 3.3 Important Members of the Image Class

Checkbox and RadioButton Controls

A CheckBox control enables the user to select one or more options from a group of options, and a group of RadioButton controls is used to select one out of several mutually exclusive options. If you want to place two groups of RadioButton controls on a form and have each group allow one selection, radio button controls of each group should individually set their GroupName property to indicate the group to which they belong. The check box and radio button Web server controls are rendered as <input type="checkbox"> and <input type="radio"> HTML elements on the Web page, respectively.

The RadioButton class inherits from the CheckBox class, and both of them share the same members—except the GroupName property available in the RadioButton class.

Table 3.4 summarizes the important members of the CheckBox and RadioButton classes.

Table 3.4 Important Members of the CheckBox and RadioButton Classes

Button, LinkButton, and ImageButton Controls

A button is used to initiate a specific action when clicked by the user. Each of the three button controls is different in its appearance and therefore is rendered differently on the Web page. They include

• Button—This control is displayed as a push button on the Web page and is rendered as an <input type="submit"> HTML element.

• LinkButton—This control is displayed as a hyperlink on the Web page and is rendered as an <a> HTML element.

• ImageButton—This control is displayed as an image button on the Web page and is rendered as an <input type="image"> HTML element.

All three button Web server controls behave in the same way: They all post the form data to the Web server when they are clicked. However, the LinkButton control works only if client-side scripting is enabled in the Web browser.

Table 3.5 summarizes the important members that are applicable to the Button, LinkButton, and ImageButton classes.

Table 3.5 Important Members of the Button, LinkButton, and ImageButton Classes

By default, any type of button Web server control is a submit button. If you specify a command name via the CommandName property, the button control then becomes a command button.

A command button raises the Command event when it is clicked. The button passes the CommandName and CommandArgument properties encapsulated in a CommandEventArgs object to the event handlers. The Command button is useful when you want to pass some event-related information to the event handler.

The following example creates a Web form that uses some of the common Web server controls discussed in the previous sections. Do the following:

1. Launch Visual Studio .NET and create a new Visual C# Project based on the ASP.NET Web Application template. Specify the location of the project as http://localhost/ExamCram/315C03.

2. Add a new Web form to the project and name it Example3_1.aspx. Delete the default form, WebForm1.aspx, from the project.

3. Use the Web Forms controls to create a user interface similar to Figure 3.1.

Figure 3.1 Example3_1.aspx uses Web server controls to create the user interface.

4. Set the ID property of the Subscribe button to btnSubscribe and set the ID property of the Name text box to txtName.

5. Before the Name label and text box on the page, place a Label Web server control and set its ID property to lblMessage.

6. Double-click the Subscribe button. You are taken to Code view, where an event handler for the btnSubscribe's Click event is added. Add the following code in the event handler:

private void btnSubscribe_Click(object sender, System.EventArgs e)
{
  // Display a personalized thank you message 
  lblMessage.Text = txtName.Text + 
    ", thank you for subscribing to \"" +
    ddlNewsletter.SelectedItem + "\".";
}

7. Run the project; then fill in details in the Web page and click the Subscribe button.

You can note from the btnSubscribe_Click() method that Web server controls provide a very consistent model for programming. The text of the Label control can be accessed using the obvious Text property rather than the InnerText property, as is the case with HTML server controls.

Event Handling for Web Server Controls

The following list summarizes the features of event handling as it relates to Web server controls:

• Intrinsic events—Web server controls have a set of intrinsic events available to them. Some simple controls such as Button provide only two intrinsic events—Click and Command—whereas advanced controls such as DataGrid provide as many as nine intrinsic events.

• Event arguments—By convention, all events in the .NET Framework pass two arguments to event handlers—the object that raised the event and an object containing any event-specific information. Most events do not have any event-specific information; therefore, they just pass an object of type System.EventArgs as the second argument. Some Web server controls, however, pass event-specific data to their event handlers using a type extended from System.EventArgs. One such example is the ImageButton Web server control in which the second argument is of the type ImageClickEventArgs. The ImageClickEventArgs objects encapsulate information about the coordinates at which the user has clicked the ImageButton.

• AutoPostBack—Usually, the change events of server controls are cached and fired on the Web server at a later stage when the page is posted back as a result of a Click event of button controls. Some Web server controls, such as DropDownList, CheckBox, and so on, have a property named AutoPostBack. When this property is set to true, it causes an immediate postback of the page when the value of the control is changed. This enables the Web server to immediately respond to change events without waiting for a Click event to cause a page postback. In HTML, only a few controls inherently submit a form; to enable other controls to cause a postback, ASP.NET attaches a small client script with the control.

• Bubbled events—Some advanced Web server controls, such as DataGrid, can also contain other controls (such as a button). DataGrid controls usually display dynamically generated data, and if each row of the DataGrid contains a button, you might have a variable number of button controls. Writing an individual event handler for each button control in this case is a tedious process. To simplify event handling, controls such as DataGrid support bubbling of events. In bubbling, all events raised at the level of child control are bubbled up to the container control, where the container control can raise a generic event in response to the child events.

Client-side Event Handling for Web Server Controls

ASP.NET provides a set of validation controls that enable you to easily validate user input without manual client-side programming or frequent round trips to the server. However, you might still want to use some amount of client-side programming in your code, especially to handle frequently occurring events such as MouseMove or KeyPress.

ASP.NET already uses client-side event handling to perform automatic postback operations; therefore, the preferred way to add client-side event handling code for Web server controls is via the Attributes property of the Web server controls. For example, the following code fragment attaches the someClientCode() client-side method to the onMouseOver attribute of the btnSubmit button:

btnSubmit.Attributes.Add("onMouseOver", "someClientCode();")

The List Controls

The category of list controls includes the DropDownList, ListBox, CheckBoxList, and RadioButtonList controls. These controls display a list of items from which the user can select, and they inherit from the abstract base ListControl class. Table 3.6 summarizes the important members of the ListControl class with which you should be familiar.

Table 3.6 Important Members of the ListControl Class

Although these controls inherit their basic functionality from the ListControl class, they display lists of items in different styles and enable single or multiple modes of selection.

A DropDownList Web server control allows you to select only a single item from the drop-down list. This Web server control is rendered as a <select> HTML element, and its items are added as <option> elements in the <select> element.

A ListBox Web server control allows you to select single or multiple items from the list of items displayed in the list box. It is rendered as a <select> or <select multiple="multiple"> HTML element depending on whether single or multiple selection is allowed. The items are added as <option> elements in the <select> element. The ListBox class adds two more properties to enable it to select multiple items, as shown in Table 3.7.

Table 3.7 Important Members of the ListBox Class

The CheckBoxList and RadioButtonList Web server controls display lists of check boxes and radio buttons, respectively. The CheckBoxList and RadioButtonList controls render each list item as <input type="checkbox"> and <input type="radio"> HTML elements, respectively. The list items are displayed in a table or without a table structure, depending on the layout sel-ected.

Table 3.8 summarizes the important properties of the CheckBoxList and RadioButtonList classes that relate to the formatting capabilities of these Web server controls.

Table 3.8 Important Formatting Properties of the CheckBoxList and RadioButtonList Classes

This example shows how to use the list controls:

1. In the project 315C03, add a new Web form named Example3_2.aspx.

2. Add a Label control on the form and change its Text property to Tourist Interests Survey. Set the font size to Large. Then add another Label control and change its Text property to Which national parks are you interested in visiting?. Set the font size to Medium.

3. Drag a ListBox control onto the form and change its ID to lbParks. Using the Properties window, select the Items property and click the ellipse button (...). This opens the ListItem Collection Editor. Enter names for a few national parks. Set the SelectionMode property of the lbParks list box to Multiple.

4. Drag a CheckBoxList control (cblActivities) and a RadioButtonList control (rblVacation) to the form. Set the RepeatColumn property for both controls to 2. Add a couple of label controls and arrange the controls as shown in Figure 3.2.

Figure 3.2 Example3_2.aspx uses list controls to accept user input.

5. Place an ImageButton control (ibSubmit) on the Web form and set its ImageUrl property to a GIF file representing a button. Place a Label control (lblSummary) at the bottom of the form (refer to Figure 3.2).

6. Add the following using directive at the top of the code-behind file:

using System.Text;

7. Double-click the ibSubmit image button to attach an event handler with its Click event. Add the following code to the event handler:

private void ibSubmit_Click(object sender, 
  System.Web.UI.ImageClickEventArgs e)
{
  // Create a StringBuilder object that you
  // will use to efficiently concatenate messages
  StringBuilder sb = new StringBuilder();
  sb.Append("<h3>Thank You! The following data ");
  sb.Append(" entered by you has been recorded</h3>");
  sb.Append("<h4>Selected Parks: </h4>");

  // Because the SelectionMode property of lbParks is Multiple, 
  // you need to iterate through its Items collection to 
  // individually gather the selected national parks
  foreach (ListItem li in lbParks.Items)
    if (li.Selected)
      sb.Append(String.Format("{0}<BR>", li.Text));

  sb.Append("<h4>Selected Activities: </h4>");
  // Multiple activities can be selected by the user. Therefore, 
  // you need to iterate through the complete Items collection to 
  // individually find the selected activities
  foreach (ListItem li in cblActivities.Items)
    if (li.Selected)
      sb.Append(String.Format("{0}<BR>", li.Text));

  sb.Append("<h4>Average Vacation Size: </h4>");
  // Only one item can be selected from a RadioButtonList
  sb.Append(rblVacation.SelectedItem.Text);

  // Copy the messages to the bottom label control
  lblSummary.Text = sb.ToString();
}

8. Set Example3_2.aspx as the start page of the project, build the project, and then run it. Fill the form and submit the details by clicking the Submit image button. You should see a summary message displaying all the selected items at the bottom of the form.

In the previous example, to find the selected items in the list controls in which multiple items can be selected, you must iterate through the ListItemCollection object corresponding to the list control. For those controls in which only single selection is allowed, you can simply use the SelectedItem property to find the selected item.

PlaceHolder and Panel Controls

A PlaceHolder Web server control enables you to reserve an area on a Web page. It also allows you to add controls dynamically in a Web page at the area it has reserved.

The PlaceHolder Web server control inherits from the System.Web.UI.Control class and does not share the common properties that Web server controls from the WebControl class do. The control also does not define any new properties, events, or methods and does not render any HTML element for itself.

A Panel Web server control acts as a container for other controls in the Web page and can be used to organize controls in the Web page. It can be used to hide or show controls contained in the panel in the Web page. Controls can also be added programmatically to the panel. The Panel Web server control is rendered as a <div> HTML element on the Web page.

This example shows how to use a Panel control to load controls dynamically on a form at runtime:

1. Add a new Web form (Example3_3.aspx) to the project.

2. Place a Label control on the form. Set its Text property to Travel Expense Calculator and set the font size to Medium. Place a horizontal rule after the label.

3. Place two more Label controls on the form, setting their Text properties to Associate Name and Number of days, respectively. Add a TextBox control and set its ID property to txtName.

4. Add a DropDownList control, setting its ID property to ddlDays and its AutoPostBack property to true. Use the ListItem Collection Editor to add values from 0 to 5 in the drop-down list.

5. At the bottom of the form, place a Panel control and set its ID property to pnlDynamic.

6. Switch to Code view and add the following code in the Page_Load() event handler:

// Use the Page_Load event to load the dynamically created controls
// so that they are available prior to rendering
private void Page_Load(object sender, System.EventArgs e)
{
  // Get the value selected by the user in the drop-down list
  int intDays = Convert.ToInt32(ddlDays.SelectedItem.Value);
  // Create text boxes to allow entering the travel expenses
  for (int i = 1; i <= intDays; i++)
  {
    LiteralControl lcExpenseCaption = new LiteralControl();
    lcExpenseCaption.Text =
     String.Format("Travel Expense for Day-{0} ", i);
    // Create a text box control
    TextBox txtExpense = new TextBox();
    // Set the ID property of the text box
    txtExpense.ID = String.Format("Expense{0}", i);
    HtmlControl lcBreak = new HtmlGenericControl("br");
    pnlDynamic.Controls.Add(lcExpenseCaption);
    // Add the text box to the panel. if you omit this step, 
    // the text box is created but not displayed
    pnlDynamic.Controls.Add(txtExpense);
    pnlDynamic.Controls.Add(lcBreak);
  }
  // Display a link button that allow users to post
  // the expenses after they have entered the data
  if(intDays>0)
  {
    LinkButton lbtnSubmit = new LinkButton();
    lbtnSubmit.Text = "Submit Expenses";
    // Add an event handler to the dynamically created link button
    lbtnSubmit.Click += new EventHandler(lbtnSubmit_Click);
    pnlDynamic.Controls.Add(lbtnSubmit);
    HtmlControl lcBreak = new HtmlGenericControl("br");
    pnlDynamic.Controls.Add(lcBreak);
  }
}

7. Add another method that handles the Click event for the dynamic link button:

// Handles the Click event for the dynamically created link button
private void lbtnSubmit_Click(object sender, System.EventArgs e)
{
  double dblExpenses = 0;
  int intDays = Convert.ToInt32(ddlDays.SelectedItem.Value);
  // Find sum of all expenses
  for (int i = 1; i <= intDays; i++)
  {
    // Find control in the collection of controls 
    TextBox txtExpense = (TextBox)
      pnlDynamic.FindControl(String.Format("Expense{0}", i));
    dblExpenses += Convert.ToDouble(txtExpense.Text);
  }
  // Display the results
  Label lblResults = new Label();
  lblResults.Text = String.Format("{0}, a sum of ${1} has been " +
    "credited to your account.", txtName.Text, dblExpenses);
  pnlDynamic.Controls.Add(lblResults);
}

8. Set Example3_3.aspx as the start page and run the project. Enter a name for the associate and select 3 from the drop-down list. You'll see that three text box controls have been created for you to enter travel expenses. A link button enables you to post the expenses to the Web server. Enter some values for the expenses and click the link button. Note that the expenses were all summed and a message is displayed.

The AdRotator Control

The AdRotator Web server control provides a convenient mechanism for displaying advertisements randomly on a Web page. The advertisements are detailed in an Extensible Markup Language (XML) file. The following listing shows a partial sample advertisement file:

<?xml version="1.0" ?>
<Advertisements>
  <Ad>
    <ImageUrl>que.gif</ImageUrl>
    <NavigateUrl>http://www.quepublishing.com
    </NavigateUrl>
    <AlternateText>Que Publishing</AlternateText>
    <Impressions>40</Impressions>
    <Keyword>Books</Keyword>
    <Specialization>Certification Books</Specialization>
   </Ad>
   ...
</Advertisements>

The advertisements are individually stored in <Ad> elements, which specify the information for each advertisement by a collection of elements.

The AdRotator control is rendered as an <a> anchor HTML element with an embedded <img> image HTML element for displaying the image on the Web page. Table 3.9 summarizes the important members of the AdRotator class with which you should be familiar.

Table 3.9 Important Members of the AdRotator Class

The AdCreated event passes an object of type AdCreatedEventArgs that contains event-related data. The object consists of the following four properties: AdProperties, AlternateText, ImageUrl, and NavigateUrl. AdProperties contains a collection of key/value pairs representing all the elements (including custom) defined for the current <Ad> element.

The Calendar Control

The Calendar Web server control displays a calendar on the Web page and enables you to select a day, week, month, or range of days. You can customize the appearance of the control and even add custom content for each day. The control generates events when a selection changes or the visible month is changed in the Calendar control. The Calendar control is rendered as a <table> HTML element on the Web page. Please refer to the Microsoft .NET Framework documentation for the complete list of properties and events for the Calendar control.

User Input Validation

ASP.NET provides a set of Web server controls called validation controls that provide sophisticated validation on both the client side and the server side depending on the validation settings and the browser's capabilities.

ASP.NET validation controls derive their basic functionality from the BaseValidator abstract class available in the System.Web.UI.WebControls. Table 3.10 lists some of the important members of the BaseValidator class.

Table 3.10 Important Members of the BaseValidator Class

Using the Page.Validate() Method and Page.IsValid Property

As you can see in Table 3.10, each validation control maintains an IsValid property that indicates the status of the validation test. The Page control that hosts the Web controls also contains a property called IsValid that indicates the status of the validation for the whole page. When all the validation controls on the Web form set their IsValid properties to true, Page.IsValid also becomes true. If the validation fails on any of the validation controls, Page.IsValid is false.

The Page class maintains a collection of the validation controls on a Web page that can be accessed through its Validators property. The Page class also contains a Validate() method that invokes the Validate() method of all the validation controls in the page. The Page.Validate() method is used to perform validation programmatically on all the validation controls of a Web page.

ASP.NET validation is performed after page initialization—that is, after the Load event of the Page is raised but before the event-handling code is called. Therefore, you cannot know the status of the validation test in the Page_Load() event handler, and the data posted from the client should not be accessed at this stage of page processing. You should always try to use data posted from the client in event-handling code such as the Click event of the Button control. However, if you need to access client-posted data in the Page_Load() event handler, you can do so by calling the Page.Validate() method.

Validation Web Server Controls

ASP.NET provides the following validation controls that derive their functionality from the BaseValidator class: RequiredFieldValidator, RegularExpressionValidator, RangeValidator, CompareValidator, and CustomValidator.

These validation controls are usually associated with the input server controls on which the validation needs to be performed. For validation to work properly, the validation control and the input server control should be placed in the same container control. The validation controls are usually placed next to the associated input control so that you can display error messages or indicators next to the input control. You can associate any number of validation controls with an input server control. For example, the Date of Hire input field in an Add Employee form cannot be left empty (validated through the RequiredFieldValidator control) and should be less than or equal to the current date (validated through the CompareValidator control). You'll learn more about the validation Web server controls in the following sections.

The RequiredFieldValidator Control

The RequiredFieldValidator control can be used to check whether the input control contains an entry. It makes the associated input control a required field in the Web page and ensures that some input data is passed to it. The control also trims whitespace prior to checking for the required field entry.

The RequiredFieldValidator control contains a special property called InitialValue that can be passed the initial value of the associated input control. During validation, if the input control's validation property contains the same initial value or is empty, it sets IsValid to false, indicating that the validation failed. For example, a drop-down list might allow users to select a state and when the page loads, its initial value could be Select a State. If a RequiredFieldValidator control is associated with the drop-down list control, its InitialValue property can be set to the same initial value of the drop-down list—Select a State. When the validation occurs, the validation control ensures that the item selected in the drop-down list is not the item set in the InitialValue property of the validation control.

The RegularExpressionValidator Control

The RegularExpressionValidator control checks whether the associated input control's validation property matches a specified pattern. This pattern is specified by the ValidationExpression property using a regular expression. If you are not familiar with regular expressions, you can find more information in the Microsoft .NET Framework documentation.

The RangeValidator Control

The RangeValidator control is used to check whether the input control contains a value in the specified range. You can check the range of values against different data types such as String, Date, and Integer.

Table 3.11 shows the important properties of the RangeValidator class.

Table 3.11 Important Properties of the RangeValidator Class

The CompareValidator Control

The CompareValidator control is used to compare the input server control's value against another value. The CompareValidator control can compare against a value specified to the validator control or against the value of another input control. The comparison can be made with different comparison operators such as equal, greater than, and so on. A special comparison operation can be used to verify that the associated input control's value is in the specified data type. You can make comparisons against various data types, such as String, Date, Integer, and so on.

Table 3.12 shows the important properties of the CompareValidator class.

Table 3.12 Important Properties of the CompareValidator Class

This example shows how to use the RangeValidator and CompareValidator controls on a Web form:

1. Add a new Web form (Example3_4.aspx) to the project.

2. Insert a table by selecting Table, Insert, Table. This opens the Insert Table dialog box. Create a table of two rows and two columns with a border size of 0 in the form. Add two Label controls and two TextBox controls (txtDate and txtTickets) to the table. Drag three Label controls and a Button control (btnSubmit) onto the Web form and arrange the controls.

3. Place one RangeValidator control (rvDate) on the table next to the txtDate control. Set its ControlToValidate property to txtDate, its Type property to Date, its MinimumValue property to 09/01/2003, its MaximumValue property to 09/30/2003, and its ErrorMessage property to an appropriate error message.

4. Place one CompareValidator control (cvTickets) on the table next to the txtTickets control. Set its ControlToValidate property to txtTickets, its Type property to Integer, its Operator property to GreaterThanEqual, its ValueToCompare property to 2, and its ErrorMessage property to an appropriate error message.

5. Set the ASPX page as the start page; then build and run the project. Enter an invalid date and an invalid number of tickets and click the Submit button. You will see the error messages from the RangeValidator and CompareValidator controls (see Figure 3.3). Enter valid values and click the Submit button. The form posts back successfully.

The CustomValidator Control

The CustomValidator control allows you to build a validation control for a custom specification. You can perform any custom validation both at the server side and at the client side with the help of this validation control.

This control exposes a property called ClientValidationFunction that specifies the name of the client script function to be executed for validation on the client side. This custom validation function is passed two arguments: The first one is the custom validator control, and the second argument is an object that contains two properties—IsValid and Value. The Value property contains the value that is to be validated, and the IsValid property is used to set the result of the validation.

At the server side, during the validation on the server, the validation control fires a ServerValidate event. An event handler containing the custom validation code is added to this event to perform validation on the server. The event sends a ServerValidateEventArgs object containing event-related data. This object contains two properties: The Value property contains the value of the control that is to be validated, and the IsValid property is used to set the result of the validation.

The ValidationSummary Control

The ValidationSummary control is used to display a summary of all the validation errors of a Web page. It displays the ErrorMessage property of the validation controls in the summary. If the ErrorMessage property is not set, the Text property is displayed as error messages for all the validation controls whose validations fail.

Table 3.13 shows the important properties of the ValidationSummary class.

Table 3.13 Important Properties of the ValidationSummary Class

Cascading Style Sheets

A Cascading Style Sheet (CSS) contains style definitions that are applied to elements in an HTML document. The information inside a CSS defines how HTML elements are displayed and where they are positioned on a Web page. With CSS, you can store all the formatting information for a Web application in a single CSS file and then instruct all the Web forms to use that file for formatting settings. This offers the following advantages:

• Uniform look and feel

• Ease of maintenance

You can use the GUI-based CSS designer available in Visual Studio .NET to easily create the CSS files and attach them to your Web application. The Web form does not automatically read the information in CSS files, though; you need to link a CSS file with the ASPX page using the HTML <link> element.

CSS also enables you to define custom style classes. A custom style class is applied to a Web server control using the CssClass property and to an HTML server control using the Class property. For example, if you have the following definition in the CSS file associated with the ASPX page and you want to apply this style to a TextBox Web server control, you simply need to change the CssClass property of the TextBox Web server control to TextBoxStyle. Here's how you do so:

.TextBoxStyle
{
  border-right: blue double;
  border-top: blue double;
  font-size: medium;
  border-left: blue double;
  color: white;
  border-bottom: blue double;
  background-color: #6699cc;
}

Exam Prep Questions

Question 1

Your company has recently decided to upgrade its supplier evaluation system from ASP to ASP.NET. You want to convert old ASP pages to Web forms as quickly as possible. You have noticed that you can keep the existing user interface but want to move the business logic to code-behind files. Which of the following approaches provides the smoothest migration path?

1. Continue to use HTML controls on ASP.NET Web forms. In the code-behind files, rewrite all business logic using C#.

2. Apply the runat="server" attribute to all HTML controls. In the code-behind files, rewrite all business logic using C#.

3. Use ASP.NET Web server controls instead of HTML controls. In the code-behind files, rewrite all business logic using C#.

4. Continue to use HTML controls for labels and text boxes but convert all Button controls to Web server controls. In the code-behind files, rewrite all business logic using C#.

Answer B is correct. Use of HTML server controls provides the easiest migration path for an existing HTML-based user interface. It does not take much effort to convert an HTML control to an HTML server control because you only need to add a runat="server" attribute to it. Answers A and D are incorrect because HTML controls are not directly available to the ASP.NET pages. Answer C is incorrect because ASP.NET Web server controls do not map one-to-one with HTML controls and will require additional conversion efforts.

Question 2

SurveyComm, Inc., is a marketing company that organizes surveys on behalf of large consumer goods companies. The surveys involve a large number of participants. SurveyComm recently decided to put its surveys online. You work as a Web developer for SurveyComm, and your responsibility is to design one of the online survey forms using ASP.NET. One of the questions in the survey form has a large number of options, and users can select multiple options as an answer to this question. You have used the CheckBoxList Web server control to display the options. In the code, you want to get all the options selected by the user so that you can store them in a database. Which of the following techniques should you use?

1. Use the SelectedItem property of the CheckBoxList control.

2. Use the SelectedIndex property of the CheckBoxList control.

3. Use the DataValueField property of the CheckBoxList control.

4. Use the Items property of the CheckBoxList control.

Answer D is correct. You should use the Items property of the CheckBoxList control to iterate through the list items and then use the Selected property of the ListItem object to find out whether the item has been selected. Answers A and B are incorrect because the SelectedIndex and SelectedItem properties return only the index of the first selected item and the first selected item, respectively. Answer C is incorrect because DataValueField is the data source that provides the item value and is used for populating the contents of CheckBoxList.

Question 3

You want to create a client-side event handler for the click event of a Button Web server control. The client-side event handler is written in JavaScript and is executed by the Web browser. The name of the Button control is btnSubmit, and the name of the JavaScript event handler is GlowButton(). How should you accomplish this in your Web form?

<input id="btnSubmit" Type="Submit" Runat="Server"
    Value="Submit" onclick="GlowButton()"/>

<input id="btnSubmit" Runat="Server"
    Value="Submit" onclick="GlowButton();"/>

<asp:Button id="btnSubmit" Runat="Server"
      Value="Submit" onclick="GlowButton();"/>

btnSubmit.Attributes.Add("onclick", "GlowButton();")

Answer D is correct. The preferred way to add client-side event handling code for Web server controls is via the Attributes property of the Web server controls. Answers A, B, and C are incorrect because these techniques interfere with the client-side event handling code generated by ASP.NET to perform automatic postback operations.

Question 4

You are using a DropDownList Web server control on a Web page that allows users to select a country name. Based on the user's selection of country, you want to display the drop-down list showing states in the selected country and several other country-specific fields. You don't want users to click a button to submit country information to the Web server. All your users have JavaScript-enabled browsers. You want to write a minimum of code; which of the following techniques would you use?

1. Use an HTML server control instead of Web server controls.

2. m B. Write client-side code in JavaScript to cause a postback when the user selects the country.

3. m C. Set the AutoPostBack property to true.

4. m D. Set the AutoEventWireup attribute to true.

Answer C is correct. You can specify a SelectedIndexChanged event to cause a form postback by setting the AutoPostBack property of the DropDownList Web server control to true. This technique automatically generates the required client-side code that causes the page postback when a user changes the selection. Answers A and B are incorrect because they require you to write additional code. Answer D is incorrect because the AutoEventWireup attribute is different from the AutoPostBack property and is used to specify whether ASP.NET will automatically call event handlers based on their names.

Question 5

You are creating a Web page that collects information about the various sports activities that interest your users. You want to display a sorted list of activities using a CheckBoxList, as shown in Figure 3.4. Which of the following ways should you choose to declare the CheckBoxList Web server control in your Web page?

Figure 3.4 How should you declare the CheckBoxList to display its items in the way shown here?

<asp:CheckBoxList id="cblActivities" runat="server"
   RepeatColumns="2" RepeatDirection="Vertical"
   RepeatLayout="Table">
...
</asp:CheckBoxList>

<asp:CheckBoxList id="cblActivities" runat="server"
   RepeatColumns="2" RepeatDirection="Horizontal"
   RepeatLayout="Table">
...
</asp:CheckBoxList>

<asp:CheckBoxList id="cblActivities" runat="server"
   RepeatColumns="2" RepeatDirection="Vertical"
   RepeatLayout="Flow">
...
</asp:CheckBoxList>

<asp:CheckBoxList id="cblActivities" runat="server"
   RepeatColumns="2" RepeatDirection="Horizontal"
   RepeatLayout="Flow">
...
</asp:CheckBoxList>

Answer A is correct. The given list is sorted, and you want to organize the elements vertically in a table of two columns. To achieve this, you should set the RepeatColumns property to 2, the RepeatDirection property to Vertical, and the RepeatLayout property to Table. Answers B and D are incorrect because the value of the RepeatDirection attribute should be set to Vertical rather than Horizontal. Answer C is incorrect because the value of the RepeatLayout attribute should be set to "Table" instead of "Flow".

Question 6

In a Web page, you are dynamically generating numerous Button controls. Each Button control is titled either Add or Update. You want to write a single event handler to handle events for all the Button controls. Which of the following options would you choose to ensure that you could take different actions when the Add or Update button is clicked?

1. Write an event handler for the Click event. Use the event arguments passed to the event handler to determine whether an Add button or Update button was clicked, and take appropriate actions in the event handler.

2. Write an event handler for the Command event. Use the event arguments passed to the event handler to determine whether an Add button or Update button was clicked, and take appropriate actions in the event handler.

3. Set the CommandName property for each button to either Add or Update. Write an event handler for the Click event. Use the event arguments passed to the event handler to determine whether an Add button or Update button was clicked, and take appropriate actions in the event handler.

4. Handle all the events in a page-level event handler such as the Load event.

Answer B is correct. The Command event is raised when the Button control is clicked. You can use the CommandEventArgs object to find the CommandName and CommandArguments associated with the button that initiated the event. Answers A and C are incorrect because the event arguments for the Click event do not give you enough information to determine the name of the button that was clicked. Answer D is incorrect because the Load event also does not have enough information available through its event arguments.

Question 7

You want to keep consistent formatting for all the Web forms in your application. To achieve this, you have created a CSS named styles.css and have linked it to all the Web pages. You have defined a style class named TextBoxStyle in styles.css to format text boxes onto the Web forms. Which of the following property settings would you use with the TextBox Web server control to use the TextBoxStyle style class?

1. Class="TextBoxStyle"

2. CssClass="TextBoxStyle"

3. Class=".TextBoxStyle"

4. CssClass=".TextBoxStyle"

Answer B is correct. When you want a Web server control to use a style class defined in a CSS file, you use the CssClass property of the Web server control. Answers A and C are incorrect because the Class property is used only with HTML server controls and not with Web server controls. Answer D is incorrect because, although the style itself might be defined as .TextBoxStyle, in the CSS file, you only need to specify the name (for example, TextBoxStyle) with the CssClass property.

Question 8

You are a Web developer working for a state-run agency and are creating a Web site for senior welfare programs. To register with the program, seniors must enter both their name and date of birth. The Web site should register a user only if her age is 65 years or more. You want to minimize the amount of validation code. How would you set up validation in the Web form to achieve this objective? (Select all that apply.)

1. Use RequiredFieldValidator with the name.

2. Use RequiredFieldValidator with the date of birth.

3. Use CompareValidator with the date of birth.

4. Use RangeValidator with the date of birth.

5. Use CustomValidator with the date of birth.

Answers A, B, and C are correct. It is required that both the name and the date of birth be entered, so you must use the RequiredFieldValidator for both the fields. In addition to this, you need to compare the date of birth entered by the user with the current date to check whether she is 65 years or older. This can be easily done using the CompareValidator control by programmatically setting its ValueToCompare property. Answer D is incorrect because no fixed range has been specified for the age. Answer E is incorrect because it requires you to write additional validation code.

Question 9

You are developing a scheduling application for your company's intranet. You are using a Calendar control to enable easy and correct selection of dates. You want to mark holidays on the calendar so that users are aware of them while creating a schedule. For example, January 1 should be marked as New Year's Day. You want to display the description of the holiday in the same cell that displays the date. Which of the following calendar events would you use to achieve this?

1. DayRender

2. SelectionChanged

3. VisibleMonthChanged

4. Load

Answer A is correct. The DayRender event is raised when the Calendar control is rendered. The DayRender event is therefore the preferred place for writing additional messages along with a day. Answers B and C are incorrect because these events are fired on a user action only after the Calendar control has been displayed. Answer D is incorrect because the Load event is fired prior to the actual rendering of the control.

Question 10

You are designing a Web site that allows users to file their taxes online. Users log on to the Web site using their tax identification number and a personal identification number. You want to ensure that users do not include spaces with the tax identification number. You want to achieve this by writing the minimum amount of code. Which of the following validation controls would you choose?

1. RequiredFieldValidator

2. RangeValidator

3. RegularExpressionValidator

4. CustomValidator

Answer C is correct. The RegularExpressionValidator control is the best choice for performing validations that require you to match the control's value against a specific pattern. Answer A is incorrect because the RequiredFieldValidator only ensures whether a value is entered. Answer B is incorrect because no specific range of values has been specified. Answer D is incorrect because the CustomValidator control requires you to write additional code.

Need to Know More?

Kalani, Amit, et al. ASP.NET 1.0 with C# Namespace Reference. Hoboken, NJ: Wrox, 2002.

Liberty, Jesse and Dan Hurwitz. Programming ASP.NET. Sebastopol, CA: O'Reilly, 2002.

See the ASP.NET Server Controls Overview at http://support.microsoft.com?scid=kb;en-us;Q306459.

Visit the Microsoft Online Seminars on ASP.NET at http://www.microsoft.com/Seminar/MMCFeed/MMCDisplay.asp?Product=103362.

See The .NET Show: ASP.NET at http://www.msdn.com/theshow/Episode009.

See the MSDN TV: Client-Side Script in ASP.NET at http://www.msdn.com/msdntv/episode.aspx?xml=episodes/en/20030311ASPNETJC/manifest.xml.

See the MSDN ASP.NET Seminars at http://www.msdn.com/seminar/mmcfeed/mmcdisplayfeed.asp?Product=103362.

Read MSDN Magazine's "The ASP Column" at http://www.msdn.com/msdnmag/find/default.aspx?phrase=TheASPColumn.

Read about the .NET Framework Regular Expressions at http://www.msdn.com/library/en-us/cpguide/html/cpconcomregularexpressions.asp.

© 2024 Pearson Education, Pearson IT Certification. All rights reserved.

800 East 96th Street, Indianapolis, Indiana 46240