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
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:
<%@ Page Language="VB" %>
Sub btnSubmit_Click(Sender As Object, E As EventArgs)
If calSample.SelectedDates.Count = 0 Then
frmDateSelection.Visible = True
lblSelectedDate.Visible = False
frmDateSelection.Visible = False
lblSelectedDate.Visible = True
lblSelectedDate.Text = "You Selected: " _
<title>ASP.NET Calendar Web Control Sample</title>
<form id="frmDateSelection" action="calendarsample.aspx"
<asp:calendar id="calSample" runat="server" />
<asp:button id="btnSubmit" text="Submit Date Selection"
onClick="btnSubmit_Click" runat="server" />
<asp:label id="lblSelectedDate" runat="server" />
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...
Download The Samples
As always, we've got all the code listed and referenced in this lesson in
a zip file so you can play with it on your own if you'd like.