New Document
ASP.NET HTML Server Controls

The HTML server controls are basically the original HTML controls but enhanced to enable server side processing. The HTML controls like the header tags, anchor tags and input elements are not processed by the server but sent to the browser for display.

By default, HTML elements within an ASP.NET file are treated as literal text and are programmatically inaccessible to page developers. To make these elements programmatically accessible, you can indicate that an HTML element should be parsed and treated as a server control by adding a runat="server" attribute.

The unique id attribute allows you to programmatically reference the control. Attributes are used to declare property arguments and event bindings on server control instances.

HTML server controls must reside within a containing < form> tag with the runat="server" attribute.

ASP.NET does not require literal (not dynamic) HTML content to be well formed, but it does require that all HTML elements be properly closed (with either a trailing "/" or a closing tag) and cleanly nested (overlapping tags are not allowed). If HTML elements are not closed properly, ASP.NET will not recognize the element. The element will either be ignored or a compilation error will occur, depending on how the element is formed.

You can create an instance of any Web Forms control in three distinct ways: as an element in an HTML document, in a Rapid Application Development (RAD) environment that allows you to drag controls onto a page, or programmatically in a code declaration block or code-behind file.

In This Section

Describes the properties common to all HTML server controls.

1.Describes the HtmlAnchor control. The HtmlAnchor control allows you to programmatically access the HTML < a> tag on the server.

2.Describes the HtmlButton control. The HtmlButton control allows you to programmatically access the HTML < button> tag on the server.

3.Describes the HtmlForm control. The HtmlForm control allows you to programmatically access the HTML

tag on the server.

4.Describes the HtmlGenericControl control. The HtmlGenericControl class allows you to programmatically access HTML server control tags that are not represented by a specific .NET Framework class, such as < span>, < div>, < body>, and < font>.

5.Describes the HtmlImage control. The HtmlImage control allows you to programmatically access the HTML < img> tag on the server.

6.Describes the HtmlInputButton control. The HtmlInputButton control allows you to programmatically access the HTML < input type= button>, < input type= submit>, and < input type= reset> tags on the server.

7.Describes the HtmlInputCheckBox control. The HtmlInputCheckBox control allows you to programmatically access the HTML < input type= checkbox> tag on the server.

8.Describes the HtmlInputFile control. The HtmlInputFile control allows you to programmatically access the HTML < input type= file> tag on the server.

9.Describes the HtmlInputHidden control. The HtmlInputHidden control allows you to programmatically access the HTML < input type=hidden> tag on the server.

10.Describes the HtmlInputImage control. The HtmlInputImage control allows you to programmatically access the HTML < input type= image> tag on the server.

11.Describes the HtmlInputRadioButton control. The HtmlInputRadioButton control allows you to programmatically access the HTML < input type= radio> tag on the server.

12.Describes the HtmlInputText control. The HtmlInputText control allows you to programmatically access the HTML < input type= text> and < input type= password> tags on the server.

13.Describes the HtmlSelect control. The HtmlSelect control allows you to programmatically access the HTML < select> tag on the server.

14.Describes the HtmlTableCell control. The HtmlTableCell control allows you to programmatically access the HTML < td> and < th> tags on the server.

15.Describes the HtmlTableRow control. The HtmlTableRow control allows you to programmatically access the HTML < tr> tag on the server

16.Describes the HtmlTextArea control. The HtmlTextArea control allows you to programmatically access the HTML < textarea> tag on the server.


They are specifically converted to a server control by adding the attribute runat="server" and adding an id attribute to make them available for server-side processing.

For example, consider the HTML input control:

<input type="text" size="40">

It could be converted to a server control, by adding the runat and id attribute:

<input type="text" id="testtext" size="40" runat="server">
Advantages of using HTML Server Controls

Although ASP.Net server controls can perform every job accomplished by the HTML server controls, the later controls are useful in the following cases:

  • Using static tables for layout purposes

  • Converting a HTML page to run under ASP.Net

The following table describes the HTML server controls:

Control NameHTML tag
HtmlHead <head>element
HtmlInputButton <input type=button|submit|reset>
HtmlInputCheckbox <input type=checkbox>
HtmlInputFile <input type = file>
HtmlInputHidden <input type = hidden>
HtmlInputImage <input type = image>
HtmlInputPassword <input type = password>
HtmlInputRadioButton <input type = radio>
HtmlInputReset <input type = reset>
HtmlText <input type = text|password>
HtmlImage <img> element
HtmlLink <link> element
HtmlAnchor <a> element
HtmlButton <button> element
HtmlButton <button> element
HtmlForm <form> element
HtmlTable <table> element
HtmlTableCell <td> and <th>
HtmlTableRow <tr> element
HtmlTitle <title> element
HtmlSelect <select> element
HtmlGenericControl All HTML controls not listed
Example:

The following example uses a basic HTML table for layout. It uses some text boxes for getting input from the users like, name, address, city, state etc. It also has a button control, which is clicked to get the user data displayed on the last row of the table.

The page should look like this in the design view:

ASP.NET Server Controls

The code for the content page shows the use of the HTML table element for layout.

<%@ Page Language="C#" AutoEventWireup="true" 
                       CodeBehind="Default.aspx.cs" 
                       Inherits="htmlserver._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>
<style type="text/css">
   .style1
   {  
       width: 156px;
   }
   .style2
   {
      width: 332px;
   }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width: 54%;">
<tr>
<td class="style1">Name:</td>
<td class="style2">
<asp:TextBox ID="txtname" runat="server" Width="230px">
</asp:TextBox>
</td>
</tr>
<tr>
<td class="style1">Street</td>
<td class="style2">
<asp:TextBox ID="txtstreet" runat="server" Width="230px">
</asp:TextBox>
</td>
</tr>
<tr>
<td class="style1">City</td>
<td class="style2">
<asp:TextBox ID="txtcity" runat="server" Width="230px">
</asp:TextBox>
</td>
</tr>
<tr>
<td class="style1">State</td>
<td class="style2">
<asp:TextBox ID="txtstate" runat="server" Width="230px">
</asp:TextBox>
</td>
</tr>
<tr>
<td class="style1"> </td>
<td class="style2"></td>
</tr>
<tr>
<td class="style1"></td>
<td ID="displayrow" runat ="server" class="style2">
</td>
</tr>
</table>
</div>
<asp:Button ID="Button1" runat="server" 
            onclick="Button1_Click" Text="Click" />
</form>
</body>
</html>

The code behind the button control:

protected void Button1_Click(object sender, EventArgs e)
{
	string str = "";
	str += txtname.Text + "<br />";
	str += txtstreet.Text + "<br />";
	str += txtcity.Text + "<br />";
	str += txtstate.Text + "<br />";
	displayrow.InnerHtml = str;
}

observe the followings

  • The normal HTML tags has been used for the page layout.

  • The last row of the HTML table is used for data display. It needed server side processing, so an ID attribute and the runat attribute has been added to it.

  • The HTML server controls are Hypertext Markup Language (HTML) elements that include a runat=server attribute. The HTML server controls have the same HTML output and the same properties as their corresponding HTML tags. In addition, HTML server controls provide automatic state management and server-side events. HTML server controls offer the following advantages:


    The HTML server controls map one to one with their corresponding HTML tags.

    When the ASP.NET application is compiled, the HTML server controls with the runat=server attribute are compiled into the assembly.

    Most controls include an OnServerEvent for the most commonly used event for the control. For example, the control has an OnServerClick event.

    The HTML tags that are not implemented as specific HTML server controls can still be used on the server side; however, they are added to the assembly as HtmlGenericControl.

    When the ASP.NET page is reposted, the HTML server controls keep their values.


    The System.Web.UI.HtmlControls.HtmlControl base class contains all of the common properties. HTML server controls derive from this class.


    To use an HTML server control, use the following syntax (which uses the HtmlInputText control as an example):




Previous                                                                                                                                                       Next

Back to Top