ASP 101 - Active Server Pages 101 - Web04
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 and Why Do I Need It?
An Overview of ASP.NET
Connections, Commands, And Procedures

Image maps 101
Show All Tips >>
ASP 101 RSS Feed ASP 101 Updates

Web Server Controls

by John Peterson


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:

<%@ 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
            frmDateSelection.Visible = False
            lblSelectedDate.Visible = True
            lblSelectedDate.Text = "You Selected: " _
                & calSample.SelectedDate
        End If
    End Sub
<title>ASP.NET Calendar Web Control Sample</title>
<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" />
<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:

Calendar Web Control Sample Screen Capture

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.

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