ASP 101 - Active Server Pages 101 - Web06
The Place ASP Developers Go!

Windows Technology Windows Technology
15 Seconds
ASP 101
ASP Wire
VB Forums
VB Wire
internet.commerce internet.commerce
Partners & Affiliates
ASP 101 is an site
ASP 101 is an site
Internet News
Small Business
Personal Technology

Corporate Info
Tech Jobs
E-mail Offers

ASP 101 News Flash ASP 101 News Flash

 Top ASP 101 Stories Top ASP 101 Stories
What is ASP?
VBScript Classes: Part 1 of N
Migrating to ASP.NET

IIS Reset
Show All Tips >>
ASP 101 RSS Feed ASP 101 Updates

HTML Server Controls

by John Peterson


Last time we helped you take your first real step into the world of ASP.NET by walking you through a number of different ways to build a basic "Hello World" page. While we were doing that, the topic of server controls (aka: Web Forms Controls) came up and we briefly mentioned their existence. This article discusses more completely the first type of server control: HTML controls.

First Off, What's a Server Control?

Before we start discussing HTML server controls, you should probably have a basic concept of what a server control is in general.

Server controls are special tags that are processed by the web server in a manner vaguely similar to the way HTML tags are interpreted by your browser. You can identify a server control tag by the fact that they contain a runat="server" attribute. This helps the server differentiate them from standard HTML tags or from other types of text which it should ignore.

Interestingly enough, there is no runat="client" attribute. If you request a page with the runat attribute set to client (or anything else for that matter) you'll get a parser error telling you "The Runat attribute must have the value Server."

Once the server finds a server control, it creates an object in memory that the server control represents. This object can have properties, methods, and even expose or raise server events during the processing of the ASP.NET page. Once the processing is finished, the control emits its output in the form of HTML (or whatever it's designed to emit) and it is sent to the browser as part of the resulting page.

Ok... So What Are HTML Server Controls?

HTML server controls are simply a set of server controls that closely resemble their corresponding HTML tags. In fact, in order to declare (create/instantiate/etc.) an HTML server control on a page, all you have to do is take an existing HTML tag and add the runat="server" attribute we mentioned earlier.

If there's an HTML server control that corresponds to the HTML tag you've "contol-ized," the HTML tag becomes the corresponding type of server control. Otherwise it will simply default to an HTML control of type HtmlGenericControl.

Here's a list of the different basic HTML server controls:

  • HtmlAnchor
  • HtmlButton
  • HtmlForm
  • HtmlGenericControl
  • HtmlImage
  • HtmlInputButton (Button/Reset/Submit)
  • HtmlInputCheckBox
  • HtmlInputFile
  • HtmlInputHidden
  • HtmlInputImage
  • HtmlInputRadioButton
  • HtmlInputText (Password/Text)
  • HtmlSelect
  • HtmlTable
  • HtmlTableCell
  • HtmlTableRow
  • HtmlTextArea

I'm not going to go into any of them in depth, but they all have their own object model that maps pretty closely to the HTML they generate. For example if you want to programmatically set the image source of an HtmlImage control with the id imgSample defined as such:

<img id="imgSample" runat="server" />

the line of code to do it in VB would simply be:

imgSample.Src = "path_to_image/image_name.gif"

Notice how the property of the control (.Src) has the same name as the attribute of the corresponding HTML <img> tag (src).

The code lines above are illustrated in action in the imagesample.aspx file included in this lesson's zip file, which is available for download at the bottom of this article.

Why Do We Need Them?

Ok so HTML server controls map to their corresponding HTML tags and simply output the HTML tags at run time. So why do we need the controls at all?

The controls greatly simplify dealing with the properties and attributes of the HTML tags. They also allow us to move the logic which affects the tags away from the tags themselves allowing us to write cleaner code.

Anyone who has ever tried to manipulate HTML tags on the fly knows what a pain it can be. For readability and maintainability, most people end up not even trying to manipulate one tag, but instead simply swap out the whole tag for an alternate one when trying to do something like this in classic ASP. If you do want to manipulate the tag you end up with something like this:

<%@ Language="VBScript" %>
Dim int0to9
int0to9 = Second(Now()) Mod 10
<title>ASP.NET Number Images</title>
<body bgcolor="#FFFFFF">
<img id="imgSample" src="images\digit_<%= int0to9 %>.gif" alt="<%= int0to9 %>" />

In the classic ASP world, there's nothing wrong with that, but it's nice to be able to keep our variables out of our display code like we can in ASP.NET:

<%@ Page Language="VB" %>
<script runat="server">
    Sub Page_Load(Sender As Object, E As EventArgs)
        Dim int0to9
        int0to9 = Now().Second Mod 10
        imgSample.Src = "images\digit_" & int0to9 & ".gif"
        imgSample.Alt = int0to9
    End Sub
<title>ASP.NET Number Images</title>
<body bgcolor="#FFFFFF">
<img id="imgSample" runat="server" />

Notice how there are no variables or any code at all outside of the one nice neat script block. The use of server controls allows this flexibility.

How Do We Use Them?

Well hopefully the code sample above has given you some idea of how HTML controls are used, but just in case, here's a code listing illustrating how you can play with some of the properties and methods of an HtmlGenericControl.

<%@ Page Language="VB" %>
<script runat="server">
    Sub Page_Load(Sender As Object, E As EventArgs)
        HelloWorld.InnerText = "Hello World!"
        'HelloWorld.InnerText = HelloWorld.Page
        If Request.QueryString("visible") = "false" Then
            HelloWorld.Visible = False
            HelloWorld.Visible = True
        End If
        ' .TagName lets you read or change the name of
        ' the HTML tag.  It would currently return p,
        ' but if we change it, the server control
        ' will change the resulting HTML. Try this:
        'HelloWorld.TagName = "strong"
    End Sub
<title>ASP.NET Hello World</title>
<body bgcolor="#FFFFFF">
<p id="HelloWorld" runat="server"></p>
<a href="helloworld.aspx?visible=true">Make Visible</a>
<a href="helloworld.aspx?visible=false">Make Invisible</a>

Cut... That's a Wrap

That's really all there is to it. You'll obviously learn more about individual controls as you use them, but as far as an overview of HTML server controls goes, I think we're just about done. Well not quite... here's a zip file of the code mentioned in this lesson in case you want to play with any of it. Ok... now we're done.

Home |  News |  Samples |  Articles |  Lessons |  Resources |  Forum |  Links |  Search |  Feedback
The Network for Technology Professionals



Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers