Using ASP.NET Server-Side Controls

The Microsoft .NET Framework provides a rich set of server-side controls for developing Web applications. You can add these controls to Web Forms pages just as you add Windows controls to a form. Server-side controls are often called server controls or Web Forms controls. There are four types of server controls: HTML server controls, Web server controls, validation controls, and user controls.

HTML Server Controls

HTML developers will be familiar with old HTML controls, which they use to write GUI applications in HTML. These controls are the same HTML controls; you can run these controls on the server by defining the runat="Server" attribute. Note that if you do not set this attribute, the HTML control acts as a normal HTML control. You may prefer this in some situations, as the HTML controls work without requiring a round-trip to the server. These control names start with Html. Table 14-1 defines some of these controls.

Table 14-1: HTML Server Controls

CONTROL	DESCRIPTION
HtmlForm	Creates an HTML form control, used as a placeholder of other controls
HtmlInputText	Creates an input TextBox control used to get input from user
HtmltextArea	Creates a multiline TextBox control
HtmlAnchor	Creates Web navigation
HtmlButton	Creates a Button control
HtmlImage	Creates an Image control that is used to display an image
HtmlInputCheckBox	Creates a CheckBox control
HtmlInputRadioButton	Creates a RadioButton control
HtmlTable	Creates a Table control
HtmlTableRow	Creates a row within a table
HtmlTableCell	Creates a cell within a row

Web server controls are more powerful than HTML controls because they provide more functionality and are easier to use. Besides some of the basic controls such as Button, TextBox, Label, and CheckBox, ASP.NET provides some more powerful controls such as DataGrid, DataList, and Calendar. You'll use these controls throughout this chapter. Table 14-2 describes some of these controls.

Table 14-2: Web Server Controls

CONTROL	DESCRIPTION
Label	Represents a label
ListBox	Represents a list box
CheckBox	Represents a check box
Calender	Represents a calendar
ImageButton	Represents an image button
TableCell	Represents a table cell
Panel	Represents a panel
DateList	Represents a data list
TextBox	Represents a text box
Image	Represents an image
CheckBoxList	Represents a list box with check boxes
Button	Represents a button
HyperLink	Represents a hyperlink
TableRow	Represents a row of a table
RadioButtonList	Represents a list box with radio buttons
DataGrid	Represents a data grid
DropDownList	Represents a drop-down list
AdRotator	Represents an ad rotator
RadioButton	Represents a radio button
LinkButton	Represents a link button
Table	Represents a table
Repeater	Represents a repeater

You'll see how to use these controls in example applications throughout this chapter.

Validation Controls

Validating user input is one of the important needs for Web applications. These controls provide features to validate user input. Using these controls you can check a required field, a value, a range, a pattern of characters, and so on. Table 14-3 describes validation controls.

Table 14-3: Validation Controls

CONTROL	DESCRIPTION
RequiredFieldValidator	Makes sure that the user does not skip an entry
CompareValidator	Compares user input with a value using a comparison operator such as less than, greater than, and so on
RangeValidator	Checks if the user's input falls within a certain range
RegularExpressionValidator	Checks if the user's input matches a defined pattern
CustomValidator	Creates your own custom logic

User Controls

Besides HTML server controls, Web server controls, and validation controls, you can also create your own controls by embedding Web Forms controls. These controls are called custom controls. You create custom controls when the available controls can't provide the functionality you need. For example, if you want to create a DataGrid control with check boxes, combo boxes, calendars, and date controls, you can create a custom control derived from the available controls and then write the additional functionality.

Server Controls and the .NET Framework Library

The .NET Framework Library provides the System.Web and its 15 supporting namespaces to define Web classes. These namespaces reside in the System.Web.dll assembly. Before you use any Web namespaces, though, you need to add a reference to the System.Web.Dll assembly and include the required namespace in the application. The five major namespaces of the Web series are System.Web, System.Web.UI, System.Web.UI.HtmlControls, System.Web.UI.WebControls, and System.Web.Services.

The System.Web Namespace

The System.Web namespace contains browser-and server-related classes and interfaces. For example, the HTTPRequest and HTTPResponse classes provide functionality to make requests for HTTP to retrieve and post data on the server through a browser. The HttpApplication class defines the functionality of an ASP.NET application. This namespace also contains the HttpCookie and HttpCookieCollection classes for manipulating cookies. The HttpFileCollection class provides access to and organizes files uploaded by a client. You can use the HttpWriter class to write to the server through HttpResponse.

The System.Web.UI Namespace

The System.Web.UI namespace contains classes and interfaces that enable you to develop Web-based GUI applications similar to Windows GUI applications. This namespace provides classes to create Web Forms pages and controls. The Control class is the base class for all Web control classes and provides methods and properties for HTML, Web, or user controls. The Page class represents a Web page requested by the server in an ASP.NET application. It also has classes for data binding with the data-bound controls such as DataGrid and DataList. You'll see these classes in the examples in this chapter. In addition to these classes, it also includes state management, templates, and validation-related classes.

The System.Web.UI.HtmlControls Namespace

This namespace contains HTML control classes (discussed in the "HTML Server Controls" section). Some of this namespace's classes are HtmlButton, HtmlControl, HtmlForm, HtmlImage, HtmlInputText, HtmlTable, and so on.

The System.Web.UI.WebControls Namespace

This namespace contains classes related to server controls and their supporting classes, as discussed in the "Web Server Controls" section of this chapter. Some of the classes are AddRotator, Button, Calendar, CheckBox, DataGrid, DataList, DropDownList, HyperLink, Image, Label, ListBox, ListControl, Panel, Table, TableRow, and TextBox. Besides the control classes, it also contains control helper classes. For example, the DataGridItem, DataGridColumn, and DataGridColumnCollection classes are helper classes of the DataGrid control, and TableRow, TableCell, TableCellCollection, TableHeaderCell, and TableItemStyle are helper classes of the Table control.

The System.Web.Services Namespace

A Web service is an application that sits and runs on the Web server. The System.Web.Service and its three helper namespaces— System.Web.Service.Description, System.Web.Service.Discovery, and System.Web.Service.Protocol—provides classes to build Web services. Chapter 15 covers Web services in more detail.

Why Are Web Forms Controls Called Server-Side Controls?

Microsoft's .NET Framework consists of powerful Web controls. By using these Web controls you can write powerful Web GUI applications similar to desktop applications. You can write code for these controls manually, or you can use VS .NET. VS .NET supports the drag-and-drop design-time feature. In other words, you can drag and drop Web Forms controls onto a Web form, set properties by right-clicking a control, and even write event handlers by double-clicking the control as you'd do in Windows GUI applications such as VB.

When a client (a Web browser) makes a call for a Web control such as a Button or a DataGrid, the runat="Server" attribute (discussed later in more detail) tells the Web server that the controls will be executed on the server and they'll send HTML data to the client at run-time after execution. Because the execution of these control events, methods, and attributes happens on the server, these controls are server-side Web controls. The main functionality of these controls includes rendering data from the server to the client and event handling. (The controls fire events and handle those events.)

Adding Server-Side Controls to a Web Form

You have two ways to add server controls to a Web form. You can use the VS .NET IDE to add server controls, or you can add controls manually by typing code using the <asp:..> syntax.

Adding Server Controls Using VS .NET

Adding server controls using VS .NET is pretty simple. As you have seen in the "Developing Your First ASP.NET Web Application" section of this chapter, you create a new ASP.NET application project, open the Toolbox, drag and drop controls from Toolbox, set properties, and write event handlers for the control.

Adding Server Controls Using ASP.NET Syntax

The other method of adding server controls to an application is writing the code manually. To add server controls manually, you create a text file and save it with an .aspx extension. .NET utilizes Extensible Markup Language (XML)-like tags to write server controls. A tag should follow XML syntaxes. Every ASP.NET control starts with asp: and a control name. For example, the following line creates a TextBox control:

 <asp:textbox id=TextBox1 runat="Server" Text=""></asp:textbox> 

This line creates a TextBox server control. Every control has a unique ID. In this sample the ID is TextBox1. The runat="Server" attribute represents that the control will run on the server.

The following code shows you can write the same code without the closing tag:

 <asp:textbox id=Textbox1 runat="Server" /> 

OK, now let's get back to the first sample. Remember, you created your first application and added a TextBox, a Button, and a ListBox control to the Web page. Listing 14-2 shows the ASP.NET version of your first ASP.NET application (from Figure 14-12). You can see the ASP.NET version by using the HTML mode of the designer.

Listing 14-2: ASP.NET Version of Your First ASP.NET Application

 <%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="FirstWebApplication.WebForm1"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <title>First ASP.NET Web Application</title> <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0"> <meta name="CODE_LANGUAGE" content="Visual Basic 7.0"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/ intellisense/ie5"> </HEAD> <body> <form  method="post" runat="server"> <P> <asp:TextBox  style="Z-INDEX: 101; LEFT: 16px; POSITION: absolute; TOP: 80px" runat="server"></asp:TextBox> <asp:Button  style="Z-INDEX: 102; LEFT: 188px; POSITION: absolute; TOP: 79px" runat="server" Text="Add" Width="106px" Height="27px" Font-Names="Verdana" ForeColor="Yellow" BackColor="#0000C0"></asp:Button> <asp:ListBox  style="Z-INDEX: 103; LEFT: 14px; POSITION: absolute; TOP: 121px" runat="server" Width="284px" Height="170px"></asp:ListBox><FONT face="Verdana" size="4">My First ASP.NET Web Application</FONT></P> <P><FONT face="Verdana" size="2">Click Add button to add TextBox contents to ListBox</FONT></P> <P><FONT face="Verdana" size="2"></FONT>&nbsp;</P> </form> </body> </HTML> 

As you saw in Listing 14-2, asp:Button, asp:TextBox, and asp:ListBox are three server controls added using ASP.NET. In Listing 14-2, you probably noticed some unfamiliar keywords such as <%@Page, Language, and codebehind. The <%@Page Language is a page directive, which defines the language you're using in the page. You can use any .NET-supported language such as C# or VB .NET. The Codebehind directive separates code from the ASP.NET page. You can define a C# or VB .NET page as Codebehind, which hosts the code for ASP.NET controls for the page. As you can see from Listing 14-2, the WebForm1.aspx.vb file is a VB class, which hosts code for WebForm1 page.