ASP.NET and HTML

Many ASP.NET developers come from traditional Windows application development. In the Visual Studio.NET development environment, there is little difference in how ASP.NET and Windows applications are designed. In each, the programmer drags controls onto a form, sets properties, and writes event methods.

This approach, while familiar and powerful, disguises the fact that ASP.NET in fact produces HTML and JavaScript. Many problems arise in ASP.NET development because of misunderstanding the relationship between ASP.NET and HTML. This article will be the first in a series to explore this relationship.

Sample ASP.NET Application

A simple ASP.NET application demonstrates the relationship between ASP.NET and HTML. This application contains a Label, a TextBox, and a Button. In Visual Studio.Net, these controls are simply dragged onto the form (see Figure1).


In Visual Studio.NET, you can view a form in "Design" view, as in Figure 1, or in the rarely used "HTML" view, shown below. Note that I've adjusted some of the linebreaks to make the code fit and easier to read.

Example 1. VS.NET "HTML" View.
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs"
  AutoEventWireup="false" Inherits="testsuite.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
  <HEAD>
  <title>WebForm1</title>
  <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
  <meta name="CODE_LANGUAGE" Content="C#">
  <meta name="vs_defaultClientScript" content="JavaScript">
  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>

<body MS_POSITIONING="GridLayout">
  <form id="Form1" method="post" runat="server">

    <asp:TextBox id="TextBox1" style="Z-INDEX: 101; LEFT: 96px;
      POSITION: absolute; TOP: 32px" runat="server"></asp:TextBox>

    <asp:Label id="Label1" style="Z-INDEX: 102; LEFT: 40px;
      POSITION: absolute; TOP: 32px" runat="server">Label</asp:Label>

    <asp:Button id="Button1" style="Z-INDEX: 103; LEFT: 192px;
      POSITION: absolute; TOP: 72px" runat="server"
      Text="Button"></asp:Button>

  </form>
</body>
</HTML>

You can see each of the three controls on the page, defined as "asp:" elements. Notice also that these are contained in an HTML "form" element. Each control has the "runat" attribute, identifying these as ASP.NET server controls. It certainly looks like these are controls that will "runat" the server. And indeed, in server-side code, you can set properties and call methods on these controls. "Textbox1.Text" will return the text entered by the user into the textbox, for example.

View Source

When we run this application, Visual Studio.NET compiles the application and opens the page in Internet Explorer. When we right-click the page and "View Source", we see the following HTML code:

Example 2. Actual HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
  <HEAD>
  <title>WebForm1</title>
  <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
  <meta name="CODE_LANGUAGE" Content="C#">
  <meta name="vs_defaultClientScript" content="JavaScript">
  <meta name="vs_targetSchema"
    content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>

<body MS_POSITIONING="GridLayout">
  <form name="Form1" method="post" action="WebForm1.aspx" id="Form1">

    <input type="hidden" name="__VIEWSTATE"
    value="dDw2NjAyODY5ODQ7Oz5e7BRSozIDiro7YlZj+Hgc+FXhbQ==" />

    <input name="TextBox1" type="text" id="TextBox1"
    style="Z-INDEX: 101; LEFT: 96px; POSITION: absolute; TOP: 32px" />

    <span id="Label1" style="Z-INDEX: 102; LEFT: 40px;
    POSITION: absolute; TOP: 32px">Label</span>

    <input type="submit" name="Button1" value="Button" id="Button1"
    style="Z-INDEX: 103; LEFT: 192px; POSITION: absolute; TOP: 72px" />

  </form>
</body>
</HTML>

While the two code listings are very similar, they aren't the same. Browsers simply do not understand ASP.NET server controls. When a user browses to an ASP.NET page, IIS renders the server controls to actual HTML. Our TextBox control became an HTML "input text" element, the Label became a "span" element, and the Button became an "input submit" element. Notice, too, the form declaration. IIS automatically added the "action" attribute, so that the form would be posted back to the same page.

IIS also added a hidden form element: _VIEWSTATE. The next article discusess the ASP.NET ViewState mechanism.

Conclusion

ASP.NET applications are truly client-server. For each server control, ASP.NET renders a corresponding HTML element. To write truly robust ASP.NET applications, the programmer must understand the relationship between the server control, maintained by IIS, and the HTML element the user sees and manipulates.

Future articles will explore this topic in more detail.

About the Author

Thomas D. Greer has years of experience in the printing business. He held the position of Director of Development for Consolidated Graphics, where he wrote the COIN eCommerce platform. Prior to that he was Vice-President of Technology of a large printing company acquired by Consolidated Graphics, where he was responsible for the development of a completely custom-written plant management system still in use.

Today Thomas provides consulting, development, implementation, and training services to commercial printers. He can be reached on the web at www.tgreer.com.

Now What?

Perhaps you'd like to read some other technical articles I've written?

If you'd like to discuss this article, or make suggestions for future articles, join my free discussion forum.