Controls

This chapter is from the book

MCAD Developing and Implementing Web Applications with Microsoft Visual Basic .NET and Microsoft Visual Studio .NET Exam Cram 2 (Exam Cram 70-305)

Learn More Buy

This chapter is from the book

This chapter is from the book 

MCAD Developing and Implementing Web Applications with Microsoft Visual Basic .NET and Microsoft Visual Studio .NET Exam Cram 2 (Exam Cram 70-305)

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. In the HTML source for your page, Web server controls are represented as XML tags rather than as HTML elements. But remember, the browser receives standard HTML in any case.

Web server controls have a number of advanced features:

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

• Web server controls have built-in automatic browser detection capabilities. They can render their output HTML correctly for both uplevel and downlevel browsers.

• Some Web server controls have the capability to cause an immediate postback when users click, change, or select a value.

• Some Web server controls (such as the Calendar and AdRotator controls) provide richer functionality than is available with HTML controls.

Web server controls are declared in HTML explicitly by prefixing the classname of the Web server control with asp: and of course including the runat="server" attribute in its definition, creating an XML tag in the asp namespace. For example, a Label Web server control can be declared in code as <asp:Label runat="server">. If you are using Visual Studio .NET, you can just drag and drop these controls on a Web Form using the Web Forms tab of the Visual Studio .NET Toolbox.

Most of the Web server controls derive their functionality by inheriting from the WebControl class of the System.Web.UI.WebControls namespace. However, some Web server controls such as the Repeater and XML controls do not get their functionality from the WebControl class; they instead derive directly from the Control class of the System.Web.UI namespace.

Table 3.1 lists some of the common properties that all Web server controls derive from the WebControl class.

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

Common Web Server Controls

The following sections discuss some simple but commonly used controls. These controls have a small number of properties, and they are usually rendered as a single HTML element.

The Label Control

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

The TextBox Control

A TextBox control provides an area that the user can use to input text. Depending on how you set the properties of this Web server control, you can use it for single or multiline text input, or you can use it as a password box that masks the characters entered by the user with asterisks or bullets, depending on the browser. Thus, this server control can be rendered as three different 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

The Image Control

The Image Web server control can display images from BMP, 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

The CheckBox and RadioButton Controls

A CheckBox control allows you 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. The RadioButton controls that need to be set mutually exclusive should belong to the same group specified by the GroupName property. 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.

The RadioButton class inherits from the CheckBox class, and both of them share the same members, except for 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

The Button, LinkButton, and ImageButton Controls

There are three types of button Web server controls. Each of these controls is different in its appearance and is rendered differently on the Web page:

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

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

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

All three of these controls post the form data to the Web server when they are clicked. 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

All three button controls can behave in two different ways—as a submit button or as a command button. 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 controls also become a command button.

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

Event Handling with Web Server Controls

One key feature of many ASP.NET Web applications is the easy interactivity that they offer to the user. In most cases, handling events plays an important part in this interactivity. Although the user is working with the rendered HTML in his own browser, Web Server controls allow you to handle events with code that's executed on the server.

Web server controls have a set of intrinsic events available to them. The name and number of these events depend on the type of the Web server control. By convention, all events in the .NET Framework pass two arguments to their event handler—the object that raised the event and an object containing any event-specific information.

Code on the server can't execute until the page is sent back to the server, which is known as postback. Some events are cached and are fired on the Web server at a later stage when the page is posted back as a result of a click event. Some Web server controls (for example, the DropDownList) 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.

Some advanced Web server controls such as the DataGrid control can also contain other controls such as a Button. DataGrid controls usually display dynamically generated data, and if each row of DataGrid contains a Button, you might end up having a variable number of Button controls. Writing an individual event handler for each Button control in this case is a very tedious process. To simplify event handling, controls such as DataGrid support bubbling of events in which 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.

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

The List Controls

The category of list controls consists of the DropDownList, ListBox, CheckBoxList, and RadioButtonList controls. These controls display a list of items from which the user can select. These controls inherit from the abstract base ListControl class. The class provides the basic properties, methods, and events common to all the list controls. 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 the list of items in different styles and support different selection modes.

A DropDownList Web server control allows you to select only a single item from the drop-down list. The DropDownList Web server control is rendered as a <select> HTML element, and its items are added as <option> elements within the HTML <select> element. The default value of the SelectedIndex property is 0, which means that the first item is selected in the drop-down list. This overrides the default of the general ListControl class.

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

• Rows—This property represents the number of rows to be displayed in the list box. The default value is 4. The value of this property must be between 1 and 2000.

• SelectionMode—This property indicates the mode of selection allowed in the list box. It can be one of the ListSelectionMode values—Multiple or Single (default).

The CheckBoxList and RadioButtonList Web server controls display lists of check boxes and radio buttons, respectively, where each check box or radio button represents a CheckBox or RadioButton Web server control. The CheckBoxList control allows you to select multiple check boxes in the list. The RadioButtonList control allows you to select only a single radio button from the list of radio buttons. CheckBoxList and RadioButtonList 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 selected.

The PlaceHolder and Panel Controls

A PlaceHolder Web server control allows you to hold an area on a Web page. The PlaceHolder control allows you to add controls dynamically in a Web page in the area reserved by the PlaceHolder control. This control inherits from the System.Web.UI.Control class and does not share the common properties shared by the Web server controls that inherit from the WebControl class. The control does not define any new properties, events, or methods. It does not render any HTML element for itself.

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

The Panel Web server control is rendered as a <div> HTML element on the Web page. Table 3.7 summarizes the important members of the Panel class with which you should be familiar.

Table 3.7 Important Members of the Panel Class

The Panel control is especially useful when you want to create controls dynamically. To see how this works, follow these steps:

1. Add a new Web Form to your Web Application.

2. Place a TextBox control, a Button control, and a Panel control on the Web Form. Set the ID property of the TextBox control to txtCount. Set the ID property of the Button control to btnCreate. Set the ID property of the Panel control to pnlDynamic.

3. Double-click the Button control. This will open the code view of the Web Form and display a blank event handler for the Button control's Click event. Add this code to the Click event:

Private Sub btnCreate_Click( _
 ByVal sender As System.Object, _
 ByVal e As System.EventArgs) _
 Handles btnCreate.Click
  ' Parse the TextBox contents into an integer
  Dim intControls As Integer = _
   Convert.ToInt32(txtCount.Text)
  ' Create that many TextBox controls
  Dim i As Integer
  Dim txt(intControls) As TextBox
  For i = 1 To intControls
    txt(i) = New TextBox()
    ' Set the id property of the textbox
    txt(i).ID = String.Format("DynamicBox{0}", i)
    ' Add the textbox to the panel
    ' if you omit this step, the textbox is
    ' created but not displayed
    pnlDynamic.Controls.Add(txt(i))
  Next
End Sub

4. Click the Save button on the Visual Studio .NET toolbar to save the Web Form.

5. Select Debug, Start to open the Web Form in a browser.

6. Enter a numeral in the TextBox and click the Button control. The form will post back to the server. After a brief delay, the server will deliver the new page with the dynamic controls on it.

The Table, TableRow, and TableCell Controls

You can use the Table, TableRow, and TableCell controls to build a table on the Web page. The Table control is rendered as a <table> HTML element on the Web page. Table 3.8 summarizes the important members of the Table class with which you should be familiar.

Table 3.8 Important Members of the Table Class

The TableRow class represents a row in a Table control. The TableRow class is rendered as a <tr> HTML element on the Web page. Table 3.9 summarizes the important members of the TableRow class with which you should be familiar.

Table 3.9 Important Members of the TableRow Class

The TableCell Web server control represents a cell in a Table control. The Table Web server control is rendered as a <td> HTML element on the Web page. Table 3.10 summarizes the important members of the TableCell class with which you should be familiar.

Table 3.10 Important Members of the TableCell Class

The AdRotator Control

The AdRotator Web server control provides a convenient mechanism for displaying advertisements randomly selected from a list on a Web page. It fetches the images from a list stored in an Extensible Markup Language (XML) file and randomly loads an image in the AdRotator control every time the page is loaded. It allows you to specify a Web page whose contents will be displayed in the current window when the AdRotator control is clicked. The ad files used by the AdRotator control follow this format:

<?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>
    </Ad>
  <Ad>
   ...
   </Ad>
   ...
</Advertisements>

The AdRotator control is rendered as an anchor HTML element, <a>, with an embedded image HTML element, <img>, to display the image on the Web page.

The Calendar Control

The Calendar Web server control displays a calendar on the Web page. It allows you to select a day, a week, a month, or even a 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 when the visible month is changed in the Calendar control. The Calendar control is rendered as a <table> HTML element on the Web page.

Tables 3.11 and 3.12 summarize the important properties and events of the Calendar class, respectively.

Table 3.11 Important Properties of the Calendar Class

Table 3.12 Important Events of the Calendar Class