Normal HTML controls such as "h1", "a", and "input" are not processed by the server but are sent directly to the browser for display. Standard HTML controls can be exposed to the server and made available for server-side processing by turning them into HTML server controls.
To convert an HTML control to an HTML server control, simply add the attribute runat="server". In addition, you will probably want to add an id attribute, so the control contents can be accessed and controlled programmatically. For example, start with a simple input control:
You can convert it to an HTML server control by adding the id and runat attributes, as follows:
There are two main reasons for using HTML server controls rather than ASP.NET server controls:
Converting existing HTML pages to run under ASP.NET
To convert an HTML file to run under ASP.NET, all you need to do is change the extension of the file to .aspx. However, the HTML controls will run client side, not server side. To take advantage of server-side processing, including automatic maintenance of state, you must add the runat attribute.
Using HTML tables for page layout
Server-side controls consume server resources. For static tables commonly used to lay out the page, server-side processing is unnecessary unless you need to refer to one or more of the table elements in your code. The following example illustrates this point.
Create a new web site in VS2005. Call it HtmlServerControls. Drag an HTML table control from the Toolbox onto the Design surface. Give it two columns and six rows. Drag an HTML button onto the page below the table. Give the button ID and runat="server" attributes.
For the first row in the table, enter the text string Name in the first column and an Input (text) control in the second column. Give that input control an ID of txtName. The next three rows should be similar, with input controls named txtStreet, txtCity, and txtState. Leave the fifth row in the table as an empty spacer. Leave the second column in the last row empty but give it an ID of TDInnerHtml. The design should look something like that shown in Fig.31, where the controls are named as indicated.
Fig.31 HTML control page layout
Be certain that all the named controls also have the runat="server" attribute as well. However, all the other table elements on the page need neither an ID nor a runat attribute since they are used for static display and will not be processed on the server.
Double-click the button in Design view to bring up the event handler method in the code-behind page. Enter the following highlighted lines of code:
If you look at the HTML for the button on the Source view of Default.aspx, you will see that rather than the traditional onClick attribute used in conventional HTML or ASP pages, the button has an onServerClick attribute, telling the server what function to call when the Click event occurs:
onServerClick="btnDoIt_ServerClick"
You can have an onClick and an onServerClick attribute for the same control, in which case the client-side code will be run first, followed by the server-side code. This is demonstrated later in this chapter.
If you take a look at the Click event handler, which is executed every time the Do It! button is clicked, you'll see that an HTML string is constructed containing the values of the input text fields, interspersed with some HTML to control line breaks. This string is then assigned to the InnerHtml property of the table cell with the tdInnerHtml id attribute:
tdInnerHtml.InnerHtml = strHtml
If you use the InnerText property instead of the InnerHtml property, then the resulting page would display the < and > symbols. As written, however, the resulting page will look something like Fig.32, after values are entered in the text fields and the button is clicked.
Fig.32 HTML Server Controls with InnerHtml populated
Table 12 lists HTML tags and the category to which they belong. In the example shown in Fig.31 and 32, the two types of input controls are text fields and a button. Both happen to use the "input" HTML tag, though as you can see in Table 12, other input controls do not use those tags.
Table 12. HTML tags and their categories
Any HTML control can be converted to server-side processing with the addition of the runat="server" attribute. Those not listed in Table 12 will be treated as an HtmlGenericControl. As with any other container control, this allows programmatic access to the control's inner HTML.
All the HTML server controls derive from the System.Web.UI.Control class and are contained in the System.Web.UI.HTMLControls namespace. Fig.33 shows the HTML server control hierarchy.
Fig 33. The HTML server control object hierarchy
