ASP .NET Server-Side controls

This article has been excerpted from book "A Programmer's Guide to ADO.NET in C#".

The Microsoft.NET Framework provides a rich set of server-side controls for developing Web applications. You can add these controls to WebForms 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 control, and user controls.

HTML Server controls

HTML developers must 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. These control names start with Html. Table 7-1 defines some of these controls.

Table 7-1. HTML server Controls

CONTROL	DESCRIPTION
HtmlForm	Create an HTML form control, used as a place holder of other controls
HtmlInputText	Creates an input text box control used to get input from user
HtmltextArea	Creates multiline text box control
HtmlAnchor	Creates a Web navigation
HtmlButton	Creates a button control
HtmlImage	Creates an image control, which is used to display an image
HtmlInputCheckBox	Creates a check box control
HtmlInputRadioButton	Creates a radio button control
HtmlTable	Creates a table control
HtmlTableRow	Creates a row within a table
HtmlTableCell	Creates a cell with in a row

Web Server Controls 

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, text box, label, and checkbox, ASP.NET provides some more powerful controls such as DataGrid, DataList, and Calendar. I'll use these controls throughout this article. Table 7-2 describes some of these controls.

Table 7-2. Web Server controls

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

I'll show how to use these controls in example applications through out this article 

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 as required field, a value, a range, a pattern of characters, and so on Table 7-3 describes validation controls.

Table 7-3. Validation Controls

CONTROL	DESCRIPTION
RequiredFieldValidator	Makes sure that the user doesn't 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 with in a certain range
RegularExpressionValidator	Checks if the user's input matches a defined pattern
CustomValidator	Create your own customer logic

User Controls

Besides HTML serve 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 data grid control with check boxes, combo boxes, calendars, and date controls, you can create a custom control derived from the available controls and the 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 namespace 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. Some major namespace of the Web series are System.Web, System.Web.UI, System.Web.UI.HtmlControls, System.Web.UI.WebControl, 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 file uploaded by 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 provide classes to create Web Forms pages and controls. The control is the mother of all Web control classes and provides methods and properties for HTML, web or user controls. The page class represents 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 article. 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, which I've discussed in the "HTML Server Controls" section of this article. Some of these namespace 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 article. Some of the classes are AddRotator, Button, Calendar, CheckBox, DataGrid, DataList, DropDownList, Hyperlink, Image, Label, ListBox, ListControl, Panel, Table, TableRow, and TextBox. Besides control classes, it also contains control helper classes. For example, the DataGridItem, DataGridColumn, and TableRow, TableCell, TableCellCollection, TableHeaderCell, and TableItemsStyle 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. System.Web.Service and its three helper namespaces  System.Web.Service.Description, System.Web.Services.Discovery, and System.Web.Service.Protocol – provides classes to build Web services. 

Why are Web Forms Controls called server-side controls?

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

When a client (Web browser) makes a call for Web control such as a Button or a DataGrid, The runat ="Server" (Discussed later in more detail) tells the Web server that the controls will be executes 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 (also referred as a web page). You can either use the VS .NET IDE to add server Controls or you can add controls manually by typing code using the <asp:> syntax.

Adding server control 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 article, you create a new ASP.NET Application project, open the toolbox, drag and drop controls from the 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 that you write the code manually. VS.NET writes the code in the background foe you when you drop a control from the toolbox to Web form.

To add server controls manually, you create a text file and save it with an .aspx extension .NET utilizes XML tags to write server controls. A tag should a low XML syntax. Every ASP.NET control starts with asp: and a control name. For example, the following line a text box control:

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

In this line, I created a text box server control. Event control has 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 that you can write the same code without the closing tag:

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

Listing 7-4 shows the ASP.NET version of your first ASP.NET application (From figure 7-12). You can see the ASP.NET version using the HTML mode of the designer. 

As you can see from listing 7-4, asp:Button, asp:TextBox, and asp:ListBox are three ever controls added using ASP.NET. In listing 7-4, you'll see some unfamiliar items 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. You use the codebehind directive to separate the code from the ASP.NET page. You can define a C# or VB.NET page as codebehind, which will host the code foe ASP.NET controls for the page. As you can see from listing 7-4, WebForm1.aspx.cs is a C# class, which hosts code for the WebForm1 page.

Listing 7-4. ASP.NET version of my first ASP.NET application

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="firstaspnet._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Untitled Page</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:Button ID="Button1" runat="server" Text="Button" BackColor="#3366FF" Font-Bold="True"

            ForeColor="Yellow" /><br />

        <br />

        <asp:TextBox ID="TextBox1" runat="server" BorderColor="#66CCFF" BorderStyle="Groove"

            Height="32px" Width="198px"></asp:TextBox>

        <br />

        <asp:ListBox ID="ListBox1" runat="server" BackColor="#CCFF99" Height="209px" Width="310px">

        </asp:ListBox>

        <font size="5"><strong>My First ASP.NET Application</strong></font>

        <p>

            <font><strong>Click Add button to add contents of text box to the list box</strong></font>

        </p>

     </div>

     </form>

</body>

</html>

Conclusion

Hope this article would have helped you in understanding ASP .NET Server-Side controls.

This essential guide to Microsoft's ADO.NET overviews C#, then leads you toward deeper understanding of ADO.NET.