Web Controls

controls, but the way you program with these controls is unified across these controls.

Basics of Web Form Controls

Web server controls are a close cousin to the HTML server controls covered in Chapter 4. At first glance, you may not understand why Web form controls (also known as Web controls) exist and you may get the two confused. Just like HTML controls, Web controls are HTML elements that can be processed on the server. This processing can occur before sending the Web page to the user and/or when the page is posted back to the server. Unlike HTML controls, Web controls do not always map directly to an HTML element. Also, a Web control's properties are not identical to the representative HTML element's attribute.

Seeing the high-level differences and similarities between Web server controls and HTML server controls (especially the overlap of representation for HTML elements), you should ask, "Why Web controls?" The answer is "uniformity and ease of use." Web server controls use consistent naming conventions and programming models across the controls in the namespace for Web controls. The Web controls wrap common HTML elements and give a consistent interface (hiding the programmers from the inconsistencies that cause a longer learning curve for Web development).

Web controls are defined in the System.Web.UI.WebControls namespace. Web forms have a slightly different convention than HTML

controls. Web controls all have the ASP namespace prefix in front of every control in the System.Web.UI.WebControls namespace. Like an HTML control, each tag needs to contain the RUNAT="Server" attribute within it. You also want to give each Web control a unique ID attribute, so that you have a way to reference the control in your serverside code.

You can set attributes for the Web controls to set properties of the control and handle events. Property attributes configure how the control will appear and behave as an HTML element on a Web page. As for handling events, you mark up events as attributes on a Web control. This gives you the ability to map a Web control's event to a procedure that will process the event. For example, when working with the ASP:ImageButton control, you can add an attribute onServerClick to map to a function that is called when the user clicks the button.

When working with Web controls, you may find the syntax foreign if you have not previously worked with XML. The requirement for the notation is similar to building well-formed XML documents (like closing all tags). For all HTML server controls, you should make sure that the HTML tags are properly closed and cleanly nested (overlapping tags are not allowed).

Working with Web Controls

The System.Web.UI.WebControls namespace has a few controls that enable you to have better control over your HTML page display. Because you can systematically create many of these controls when the page is loading, you can work with the ASP:Placeholder control to specify where on the Web page the controls should be placed. Another feature that controls the layout of a Web page is the ASP:Panel control. This control acts as a container for other controls and can be shown and hidden using code.

Classifications of Web Controls

Web controls overlap with the HTML controls by representing many of the same HTML elements that are available with HTML controls, but Web controls also have a list of very rich controls like the ASP:Calendar control. These rich controls are usually made up of many HTML elements that can collectively render the rich control. There are many Web controls to choose from and they can be classified as Basic, Rich, List, Data List, and Validation controls. The following tables summarize these controls:

WORK WITH WEB CONTROLS

WEB CONTROLS

List Web Controls

CLASS

BRIEF DESCRIPTION

CheckBoxList

Multiselection check box group.

DropDownList

Drop-down list which allows the user to select a single item.

ListBox

List box control that allows single or multiple item selection.

RadioButtonList

List control that encapsulates a group of radio button controls.

Data List Web Controls

CLASS

BRIEF DESCRIPTION

DataGrid

Data-bound list control that displays the items from a data source in a table.

DataList

Data-bound list control that displays items using templates.

Rich Web Controls

CLASS

BRIEF DESCRIPTION

Displays an advertisement banner on a Web page.

AdRotator

Calendar

Displays an advertisement banner on a Web page.

Displays a single month calendar that enables the user to select dates and move to the next or previous month.

Basic Web Controls

CLASS

DRSCRIPTICN

HTML EQUIVALENT

Button

Push button control.

<button></button>

CheckBox

Check box that enables the user to select a true or false condition.

<input type="checkbox"/>

RadioButton

Radio button control (derived from CheckBox class).

<input type="radio"/>

HyperLink

Hyperlink used to link to another resource.

<a></a>

Image

Image.

<img></img>

ImageButton

Image that responds to mouse clicks (derived from Image).

<input type="image"/>

Label

Label control.

<span></span>

LinkButton

Displays a hyperlink style button control on a Web page.

<a><img/></a>

Panel

Represents a control that acts as a container for other controls.

<div></div>

Table

Constructs a table and defines its properties.

<table></table>

TableCell

Represents a cell in a Table control.

<td></td>

TableRow

Represents a row in a Table control.

<tr></tr>

TextBox

Constructs a text box and defines its properties.

<input type="text"/> or <input type="password"/> or <textarea></textarea>

You can place a control on your Web forms for users to click in order to submit a form to the Web server for processing. Developers use button controls most frequently for this purpose. This chapter also looks at the LinkButton Web control and the ImageButton control, which you can use for the same purpose.

Buttons are the natural choice for a control that needs to submit form data back to a server. The

ASP:Button control, <ASP:BUTTON ID="cmdButton" TEXT="Continue" RUNAT="Server" />, generates an HTML Input

Submit Button tag, <input type="submit" name="cmdButton" value="Continue"

id="cmdButton" />, in the client's browser. With this Web server control, you have all the capabilites of the standard HTML input submit button plus the extended properties and state management that is avaliable for server controls.

This section demonstrates how to create a form that uses the Button Web control to forward users to the second step in a process. This section uses client-side code to create a rollover behavior for the button. When the user clicks the button, the browser sends a message letting the user know the process is continuing to the next step. At this point, you can redirect the user to the next page in the process.

CREATE A BUTTON FOR POSTING DATA

CREATE A BUTTON FOR POSTING DATA

Q Open the L0 Add a Button Web

WebWelcomeTemplate.aspx control on the page for the template from the Code user to click.

Templates directory.

LH Set the TEXT attribute equal to Continue.

—Q Set an initial style for the button.

Q Open the L0 Add a Button Web

WebWelcomeTemplate.aspx control on the page for the template from the Code user to click.

Templates directory.

LH Set the TEXT attribute equal to Continue.

—Q Set an initial style for the button.

WORK WITH WEB CONTROLS

The Button Web control has a couple of additional properties that you can use to handle some of the programming problems you have with standard HTML 4.0 Buttons. If you have more than one button, the CommandName and Argument are useful attributes that can store information that is associated with the button and can be used in the event handler.

Example:

<SCRIPT LANGUAGE="C#" RUNAT="Server">

void Button_OnClick(object Source, EventArgs e) {

labelMessage.Text="You are continuing to Step 2..." + "</BR>" + "Your Command Name was 11 + buttonContinue.CommandName + ".</BR>" + "Your Command Argument was 11

+ buttonContinue.CommandArgument + ".</BR>"; }

<ASP:BUTTON ID="buttonContinue" TEXT="Continue" STYLE="height=30;width:100"

onMouseOver="this.style.backgroundColor='Silver'"

onMouseOut="this.style.backgroundColor='White'"

onClick="Button_OnClick"

CommandName="Move"

CommandArgument="Homepage"

RUNAT="Server"/>

Planetary Weight Visual Basic Code

LH Add the onClick event to call the

Button OnClick function.

Q Save the file and request it from the Web server.

• Click the Continue button. A message appears.

-0 Add the code for the onMouseOver event to set the background color of the button to silver.

L0 Add the code for the onMouseOut event to set the background color for the button back to white.

LH Add the onClick event to call the

Button OnClick function.

Q Save the file and request it from the Web server.

Note: See pages 20 to 25 for instructions on saving a file to the Web server and then requesting the file using the IIS Admin.

• Click the Continue button. A message appears.

Was this article helpful?

0 0

Post a comment