HTML server controls are mainly enhanced standard HTML controls that ensure server operation. HTML controls are not processed by the server, but are sent to the browser for display, such as page title tags, link tags, and input elements.
By adding the runat = "server" attribute and an id attribute, they can be specifically converted into a server control for use in server-side processing.
For example, HTML input control:
<input type="text" size="40">It can be converted into a server control by adding runat and id attributes:
<input type="text" id="testtext" size="40" runat="server">Although ASP.NET server controls can do everything that HTML server controls do, HTML controls still have advantages in the following situations:
Use static expressions for layout purposes.
Convert an HTML page to run under ASP.NET.
The following table describes HTML server controls:
| Control name | HTML 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&t; element |
| HtmlGenericControl | All HTML controls not listed |
The following example uses a basic HTML table for layout. It uses boxes for getting input from the user such as name, address, city, state, etc., and a button control that when clicked gets the user data displayed in the last row of the table.
The page should look like this in Design view:
The code for the content page shows the use of HTML table elements 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> <tr> <td>Name:</td> <td> <asp:TextBox ID="txtname" runat="server" > </asp:TextBox> </td> </tr> <tr> <td>Street</td> <td> <asp:TextBox ID="txtstreet" runat="server" > </asp:TextBox> </td> </tr> <tr> <td>City</td> <td> <asp:TextBox ID="txtcity" runat="server" > </asp:TextBox> </td> </tr> <tr> <td>State</td> <td> <asp:TextBox ID="txtstate" runat="server"> </asp:TextBox> </td> </tr> <tr> <td> </td> <td></td> </tr> <tr> <td></td> <td ID="displayrow" runat ="server"> </td> </tr> </table> </div> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Click" /> </form> </body></html>The code behind the button control is:
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 following statements:
Standard HTML tags have been used for page layout.
The last row of the HTML table is used for data display. It requires server-side processing, so add ID attributes and runat attributes to it.