HTML Controls | Microsoft ASP.NET Coding Strategies with the Microsoft ASP.NET Team (Pro-Developer)

The HTML controls are a set of HTML elements that expose server events and can participate directly in the control’s life cycle. The HTML server controls are primarily designed for moving existing HTML content to ASP.NET and for leveraging existing knowledge of HTML markup. These controls enable you to take advantage of the rapid application development features of ASP.NET without rewriting applications and losing the Web development efforts.

In Code Listing 2-2, HtmlControlsHelloWorld.aspx, we converted the code from HtmlHelloWorld.htm into HTML server controls.

Code Listing 2-2: HtmlControlsHelloWorld.aspx

 <html>
    <form runat="server">
        <input type="text" runat="server" value="Hello" />
        <input type="submit" runat="server" value="Go" />
    </form>
</html>

At first glance, the markup looks almost identical to the markup in Code Listing 2-1, except that we added the ‘runat=“server” attribute assignment to the form and input elements. The control tree has been changed more significantly. Figure 2-1 shows the control tree built from this page. The literal controls between HtmlForm, HtmlInputText, and HtmlInputSubmit are the carriage returns from the source file. Generally speaking, ASP.NET turns all elements that are not marked with ‘runat=“server” into literal controls and renders them to the client directly.

Figure 2-1: Control tree for HtmlControlsHelloWorld.aspx

You can see that the HTML server controls look like their familiar HTML counterparts, which facilitates the development of dynamic applications. The server controls expose events for which we can provide code. This event- driven programming model has been key to meeting the demands of rapid application development. Code Listing 2-3 adds to our previous example an event handler that is invoked when the user clicks the Submit button. In this example, we simply change the value of the text box from Hello to GoodBye when the form is submitted.

Tip

A certain amount of overhead is associated with all server controls. To preserve application performance when leveraging existing HTML content, do not turn HTML elements into HTML server controls unless you are taking advantage of server events.

Code Listing 2-3: HelloGoodbye.aspx

 <script runat="server" language="C#" >
protected void MySubmitHandler(object o, EventArgs e) {
    inputText.Value = "GoodBye";
}
</script>
<html>
    <form runat="server">
        <input  type="text" runat="server" 
            value="Hello" />
        <input type="submit" runat="server" value="Go" 
            onServerClick="MySubmitHandler"/>
    </form>
</html>

ASP.NET does not include HTML server control equivalents for all HTML elements. The purpose of the provided set of server controls is to enable the server-side code interactions you would benefit most from. The following are HTML elements for which there are corresponding HTML server controls:

<a>	<input type=button>
<button>	<input type=submit>
<form>	<input type=reset>
<img>	<input type=checkbox>
<select>	<input type=file>
<table>	<input type=hidden>
<td>	<input type=image>
<th>	<input type=radio>
<tr>	<input type=text>
<textarea>	<input type=password>

It is no coincidence that half of the HTML elements with HTML server control equivalents correspond to the input element. The input element expects data from the user, and the application typically must act on the user-supplied data.