Controls

This chapter is from the book

MCAD Developing and Implementing Web Applications with Microsoft Visual C# .NET and Microsoft Visual Studio .NET Exam Cram 2 (Exam Cram 70-315)

Learn More Buy

This chapter is from the book

This chapter is from the book 

MCAD Developing and Implementing Web Applications with Microsoft Visual C# .NET and Microsoft Visual Studio .NET Exam Cram 2 (Exam Cram 70-315)

Learn More Buy

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.