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:
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:
0to9.aspx
<%@ 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
</script>
<html>
<head>
<title>ASP.NET Number Images</title>
</head>
<body bgcolor="#FFFFFF">
<img id="imgSample" runat="server" />
</body>
</html>
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.
helloworld.aspx
<%@ 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
Else
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
</script>
<html>
<head>
<title>ASP.NET Hello World</title>
</head>
<body bgcolor="#FFFFFF">
<p id="HelloWorld" runat="server"></p>
<p>
<a href="helloworld.aspx?visible=true">Make Visible</a>
<a href="helloworld.aspx?visible=false">Make Invisible</a>
</p>
</body>
</html>
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.
