The Forgotten Controls: HTML Server Controls

 

By Bill Evjen
Reuters

January 2004

Applies to:
    Microsoft® ASP.NET
    Microsoft Visual Basic® .NET
    Microsoft Visual C#® .NET

Summary: Learn all the possibilities for your ASP.NET pages when working with the standard set of HTML server controls that are at your disposal. Then learn about using the HtmlGenericControl to work with areas of your pages that are difficult to reach through other means. (10 printed pages)

Contents

Introduction
Using HTML Server Controls
Using the HtmlGenericControl Class
Summary

Introduction

HTML server controls are sometimes easy to forget about due to the fact that when you start up either Microsoft® Visual Studio® .NET or the ASP.NET Web Matrix, the toolbox in both IDEs opens up to the Web server controls that are available to you and not the HTML server controls. To find the list of HTML server controls at your disposal, you need to click the HTML tab in the toolbox. So it can be easy to think that the Web server controls, the ones that start with <asp:>, are what you should be using for your ASP.NET development.

Though easy to miss, you will find that the HTML server controls are outstanding controls for ASP.NET development and even afford you capabilities that you cannot get from Web server controls. This paper will take a look at the use of HTML server controls in your ASP.NET pages. Not only will we take a look at how to use the IDE provided HTML server controls, but how to create your own using the HtmlGenericControl class.

Why Use HTML Server Controls

If you are wondering which is better—HTML or Web server controls—what it really comes down to is the exact functionality that you require within your ASP.NET page. You don't have to choose one or the other. It is possible to have both HTML server controls and Web server controls on the same page and within the same Web application.

HTML server controls are generated around specific HTML elements, and the ASP.NET engine changes the attributes of the element based on the server-side code that you provide.

Web server controls instead have less to do with specific HTML elements, but revolve more around the functionality you need on the page. The ASP.NET engine takes the extra steps to decide for itself, based on the container of the requester, what HTML to output.

Which to use? There isn't always a hard and fast rule on which type of control to use and when, but when you are deciding what type of control to use, you should base your decision on which control offers the specific functionality you require.

HTML server controls are the ideal control to use when you explicitly want to control the HTML output that is generated for the browser and don't want to leave it up to the ASP.NET engine. Also, you can use HTML server controls when converting a previously created HTML Web page or when migrating an ASP 3.0 page, as it is a lot simpler to add a couple of attributes to your HTML elements to turn them into server controls rather than trying to convert them to Web server controls.

One of the bigger reasons to use HTML server controls is that these controls can give you programmatic access to parts of your Web pages that are more difficult to reach using standard Web server controls.

Using HTML Server Controls

When creating ASP.NET pages, you don't need to make every single element of the page so that it is processed by the server before being sent to the browser. Sometimes you will have Web pages that are mostly HTML, but will contain only small sections that are dynamic. For the parts that do need to be dynamic, you can easily use HTML server controls.

To create an HTML server control, you simply take an HTML element (any HTML element) such as this textbox:

<input type="text">

and convert it to an HTML server control simply by adding two attributes:

<input type="text" id="Textbox1" runat="server">

Doing this will give you programmatic access to the HTML element on the server before the Web page is created and sent down to the client. The HTML element must contain an id attribute. This attribute serves as an identity for the element and enables you to program to elements by their specific IDs. In addition to this attribute, the HTML element must contain runat="server". This tells the processing server that the <input> tag is processed on the server and is not to be considered a traditional HTML element.

Let's look at a simple example using the textbox shown above as an HTML server control.

Listing 1: Using a Simple HTML Server Control

Visual Basic .NET

<%@ Page Language="VB" %>
<script runat="server">
  Sub Submit1_Click(ByVal Sender As Object, ByVal e As EventArgs)
    Response.Write("You entered: <b>" & Textbox1.Value & "</b>")
  End Sub
</script>
<html>
<head>
</head>
<body>
   <form runat="server">
      <p>
         <input id="Textbox1" type="text" runat="server" />
      </p>
      <p>
         <input id="Submit1" type="button" value="Submit" 
            runat="server" OnServerClick="Submit1_Click" />
      </p>
   </form>
</body>
</html>

Visual C# .NET

<%@ Page Language="C#" %>
<script runat="server">
  void Submit1_Click(Object sender, EventArgs e) {
    Response.Write("You entered: <b>" + Textbox1.Value + "</b>");
  }
</script>
<html>
<head>
</head>
<body>
   <form runat="server">
      <p>
         <input id="Textbox1" type="text" runat="server" />
      </p>
      <p>
         <input id="Submit1" type="button" value="Submit" 
            runat="server" OnServerClick="Submit1_Click" />
      </p>
   </form>
</body>
</html>

As when working with Web server controls, we were able to take this HTML server control and work with it on the server. In this case, we took the text value that the end user entered into a Textbox HTML server control and used that value within a Response.Write statement. We could have also just as easily used that value in a standard Label control as well.

When working with a Textbox Web server control, we would have used Textbox.Text to get at this value, but with the Textbox HTML server control, we used the Value property. It is important to remember that similar properties of the two types of controls have different names in some cases.

Using HTML Server Controls in Visual Studio .NET

It is even easier to work with HTML server controls using Visual Studio .NET. Within Visual Studio .NET, open the Toolbox to the HTML tab and drag and drop the elements you want to use onto the design surface. At this point, the elements dragged onto the design surface in the Document Window are not HTML server controls, but basic HTML elements. In this state, you can work with these elements as you would any traditional HTML element.

To turn them into HTML server controls, right-click the control in the design view, and then click Run As Server Control.

Figure 1. Changing HTML elements into HTML server controls

Once selected, the HTML element will have a green triangle in its upper left-hand corner when viewed in the design view.

Figure 2. HTML server control showing green triangle icon

Now you will be able to use Microsoft Intellisense® and program to the control's attributes from server-side code. It is that simple.

Figure 3. Programming the server control's attributes

As you can imagine, it is possible to work with almost every type of HTML element because a corresponding class (or control) exists for almost every one of them. For example, if you look in the .NET Framework documentation, you find the following classes for your HTML server controls:

• HtmlAnchor controls the <a> element.
• HtmlButton controls the <input type="button"> element.
• HtmlForm controls the <form> element.
• HtmlSelect controls the <select> element.
• HtmlTable controls the <table> element.
• HtmlTableCell controls the <td> element.
• HtmlTableRow controls the <tr> element.
• HtmlTextArea controls the <textarea> element.
• HtmlInputButton controls the <input type="button"> element.
• HtmlInputCheckBox controls the <input type="checkbox"> element.
• HtmlInputFile controls the <input type="file"> element.
• HtmlInputHidden controls the <input type="hidden"> element.
• HtmlInputImage controls the <input type="image"> element.
• HtmlInputRadioButton controls the <input type="radio"> element.
• HtmlInputText controls the <input type="text"> element.
• HtmlImage controls the <img> element.

Using the HtmlGenericControl Class

As you just read, there are a number of classes that map to a specific HTML element. When you are working with the HTML server controls you are actually working with these classes that are provided in the .NET Framework. For example, when you create an <a> element as an HTML server control, you are actually working with the HtmlAnchor class and have available to you all the methods that this class provides.

As you can see from the earlier list, pretty much everything that HTML offers is covered. But this is not everything. There are certain HTML elements that are missing from the list—for instance, the capability to control the <p> element as a server control.

An additional class was created to handle these kinds of situations—the HtmlGenericControl class. This class is there for all elements that are not included in the class list shown earlier. Using the HtmlGenericControl, you can manipulate the <p> and other elements in server-side code.

The cool thing about the HtmlGenericControl class is that it enables you to work with any HTML element, and there are so many exciting things you can do with this capability.

For instance, if you want to dynamically control the <meta> element's description attribute on the server side as you would any other server control, you could easily do this using the HtmlGenericControl.

Listing 2: Dynamically controlling the <meta> element

Visual Basic .NET

<%@ Page Language="VB" %>
<script runat="server">
   Sub Submit1_Click(ByVal Sender As Object, ByVal e As EventArgs)
      Response.Write("You entered: <b>" & Textbox1.Value & "</b>")
   End Sub

   Sub Page_Load(sender As Object, e As EventArgs)
      meta1.Attributes("NAME") = "description"
      meta1.Attributes("CONTENT") = _
        "My ASP.NET page was generated on: " & DateTime.Now.ToString()
   End Sub
</script>
<html>
<head>
   <meta id="meta1" runat="server" />
</head>
<body>
   <form runat="server">
      <p>
         <input id="Textbox1" type="text" runat="server" />
      </p>
      <p>
         <input id="Submit1" type="button" value="Submit" 
            runat="server" onserverclick="Submit1_Click" />
      </p>
   </form>
</body>
</html>

Visual C# .NET

<%@ Page Language="C#" %>
<script runat="server">
  void Submit1_Click(Object sender, EventArgs e) {
    Response.Write("You entered: <b>" + Textbox1.Value + "</b>");
  }

  void Page_Load(Object sender, EventArgs e) {
   meta1.Attributes["NAME"] = "description";
   meta1.Attributes["CONTENT"] =
      "My ASP.NET page was generated on: " & DateTime.Now.ToString();
  }

</script>
<html>
<head>
   <meta id="meta1" runat="server" />
</head>
<body>
   <form runat="server">
      <p>
         <input id="Textbox1" type="text" runat="server" />
      </p>
      <p>
         <input id="Submit1" type="button" value="Submit" 
            runat="server" onserverclick="Submit1_Click" />
      </p>
   </form>
</body>
</html>

After running this example, right-click on the page and view the source of the page generated. Doing this will show you the dynamically created <meta> tag.

<html>
<head>
   <meta id="meta1" NAME="description" CONTENT="My ASP.NET page was 
      generated on: 12/13/2003 4:08:11 PM"></meta>
</head>

Right away you should notice that working with the HTML attributes for elements that use the HtmlGenericControl is different than when you are using one of the standard HTML server control classes (for example, HtmlAnchor).

For instance, when you are assigning a value to an attribute of the <a> tag using the HtmlAnchor server control, you can do so in the following manner:

Visual Basic .NET

myAnchor.href = "http://www.ineta.org"

Visual C# .NET

myAnchor.href = "http://www.ineta.org";

Though when using the HtmlGenericControl, you assign a value to an element's attribute in a different manner:

Visual Basic .NET

body1.Attributes("bgcolor") = "Red"

Visual C# .NET

body1.Attributes["bgcolor"] = "Red";

When working with the standard HTML server control classes, you can work directly with the element's attributes that the class exposes (for instance, as shown above with the href attribute of the <a> element). Though when working with the HtmlGenericControl, this class isn't tied to a specific HTML element, so it doesn't know which HTML element you want to work with or what attributes are possible to use. So you need to explicitly specify the attribute you are working with by using the Attributes property.

Summary

The point here is that HTML server controls are simple and easy to use. They shouldn't be overlooked when creating your ASP.NET pages. In addition to the HTML server controls that are provided for a select set of HTML elements, always remember that the HtmlGenericControl is there for you to work with any element that might be on your Web page. Use the HtmlGenericControl to place text on your page using the <div>, <span> or <p> elements. Use this class to dynamically change the <title> or <body> elements. It can be a lot of fun to see what you can then do with your Web pages!

About the Author

Bill Evjen is an active proponent of .NET technologies and community-based learning initiatives for .NET. He is a technical director for Reuters, the international news and financial services company based in St. Louis, Missouri. Bill is the founder and executive director of the International .NET Association (INETA), which represents more than 100,000 members worldwide. Bill is also an author and speaker and has written such books as ASP.NET Professional Secrets, XML Web Services for ASP.NET, Web Services Enhancements, and the Visual Basic .NET Bible (all from Wiley).

© Microsoft Corporation. All rights reserved.