ASP 101 - Web Server Controls

Introduction

Web server controls are one of the coolest new things about ASP.NET. I tend to think of them as HTML controls on steroids, but let me introduce you to some of them and see what you think.

Note: I'll be assuming you have a basic understanding of HTML server controls and will be doing a lot of comparing and contrasting between the two. If you're not familiar with them already, I recommend you quickly read our overview of HTML server controls before proceeding.

What Are Web Server Controls?

Web server controls are just like HTML controls... only different. Let me clarify that. Web controls are easily identified by the fact that they have a runat="server" attribute. They are also handled at the server by the ASP.NET runtime when a page containing them is requested. They can expose and raise server events which you can use to interact with them. They are identified by giving them an id attribute which you can then use to reference the control in your code. In all these ways, web controls are just like HTML controls.

How Are They Different?

The most obvious difference between the two is that the tags for web controls don't look like HTML tags. This is because they're not as closely tied to the basic HTML tags as HTML controls are. While HTML controls tend to emit their corresponding HTML tag (with the attributes you've set), they almost always just emit that HTML tag. Web controls can emit multiple HTML tags in all sorts of combinations (or whatever else is needed) in order to accomplish their task. They perform higher level fuctions and do not necessarily map directly to any one HTML tag. Their object model is generally more complex and is ususally more abstract then that of an HTML control.

What Do They Look Like?

Well... it's probably easier to show you then tell you. They look something like this:

<asp:label id="lblSample" runat="server" />

That was simply a label control. It doesn't do much except output whatever text you assign to it surrounded by a <span> tag. It's one of the simplest of all the web controls. I've included a sample aspx file named labelsample.aspx illustrating the above line in use in this lesson's zip file available at the bottom of this page.

That's Pretty Boring... So What's The Big Deal

Here's another sample which better illustrates the power that some of these web controls have:

calendarsample.aspx

<%@ Page Language="VB" %>
<script runat="server">
    Sub btnSubmit_Click(Sender As Object, E As EventArgs)
        If calSample.SelectedDates.Count = 0 Then
            frmDateSelection.Visible = True
            lblSelectedDate.Visible = False
        Else
            frmDateSelection.Visible = False
            lblSelectedDate.Visible = True
            lblSelectedDate.Text = "You Selected: " _
                & calSample.SelectedDate
        End If
    End Sub
</script>
<html>
<head>
<title>ASP.NET Calendar Web Control Sample</title>
</head>
<body bgcolor="#FFFFFF">
<div align="center">
<form id="frmDateSelection" action="calendarsample.aspx"
    method="post" runat="server">
<asp:calendar id="calSample" runat="server" />
<asp:button id="btnSubmit" text="Submit Date Selection"
    onClick="btnSubmit_Click" runat="server" />
</form>
<asp:label id="lblSelectedDate" runat="server" />
</div>
</body>
</html>

Most of the listing is pretty straight forward, but take a look at the line highlighted in red. It declares a calendar web control and is similar to the label example above. Pretty simple, huh... but look at what it gets you at runtime:

It may not be the prettiest calendar around (you can change it's appearance to match your likes... this is just the default), but it gets you a lot of functionality with practically no code! That's the type of power web controls give you. They take a given set of functionality and package it up into a nice neat control with methods, properties, and events that make sense based on the type of control involved. For example, the calendar control contains a property SelectedDate that you can use in your code to manipulate the highlighted date and an event SelectionChanged that you can use the perform some action when the selection is changed.

And it doesn't stop with a calendar. There are tons of cool web controls included with ASP.NET: validators, an ad rotator, a repeater, all sorts of form stuff, a datagrid, etc. And if you're looking for something that's not there... you can download new ones from the web or even write your own! But those are other lessons altogether...