Article
About the Author
Cristian Darie & Wyatt Barnett
Cristian is a software engineer with experience in a wide range of technologies, and author of numerous technical books. If you want to say "hi," you can reach Cristian through his personal web site at http://www.cristiandarie.ro.
Wyatt leads the in-house development team for a major industry trade association. When not slinging obscene amounts of C# and SQL at a few exceedingly large monitors, he is most often spotted staring at HDTV and other forms of entertainment in local watering holes.
Constructing ASP.NET Web Pages
If you’ve ever built a model from Lego bricks, you’re well prepared to start building real ASP.NET web pages. ASP.NET offers features that allow web developers to build parts of web pages independently, then put them together later to form complete pages.
The content we’re creating through our work with ASP.NET is almost never static. At design time, we tend to think in terms of templates that contain placeholders for the content that will be generated dynamically at runtime. And to fill those placeholders, we can either use one of the many controls ASP.NET provides, or build our own.
In this chapter of the fabulous new edition of Build Your Own ASP.NET 3.5 Web Site Using C# & VB, we’ll discuss many of the objects and techniques that give life and color to ASP.NET web pages, including:
- web forms
- HTML server controls
- web server controls
- web user controls
- master pages
- handling page navigation
- styling pages and controls with CSS
If the list looks intimidating, don’t worry—all of this is far easier to understand than it might first appear. And to help you along, you can now visit the book’s web page to download the first four chapters for free! In fact, it’s highly recommended that you do have the downloaded pdf handy if you want to take part in the practical side of this chapter, as we work through some exercises that necessitate the creation of folders and files as described in Chapter 1.
Web Forms
As you know, there’s always new terminology to master when you’re learning new technologies. The term used to describe an ASP.NET web page is web form, and this is the central object in ASP.NET development. At first glance, web forms look much like HTML pages, but in addition to static HTML content, they contain ASP.NET-specific elements, and code that executes on the server side.
Every web form includes a <form runat="server"> tag, which contains the ASP.NET-specific elements that make up the page. Multiple forms aren’t supported. The basic structure of a web form is shown here:
<%@ Page Language="language" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
… code block…
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Page Title</title>
</head>
<body>
<form id="form1" runat="server">
… user interface elements…
</form>
</body>
</html>
To access and manipulate a web form programmatically, we use the System.Web.UI.Page class. We must mention the class explicitly in the code-behind file. In situations in which we’re not using code-behind files (that is, when we’re writing all the code inside the .aspx file instead), the Page class is still used—we just don’t see it.
We can use a range of user interface elements inside the form—including typical static HTML code—but we can also use elements whose values or properties can be generated or manipulated on the server either when the page first loads, or when the form is submitted. These elements—which, in ASP.NET parlance, are called controls—allow us to reuse common functionality, such as the page header, a calendar, a shopping cart summary, or a “Today’s Quote” box, for example, across multiple web forms. There are several types of controls in ASP.NET:
- HTML server controls
- web server controls
- web user controls
- master pages
There are significant technical differences between these types of controls, but what makes them similar is the ease with which we can integrate and reuse them in our web sites. Let’s take a look at them one by one.
HTML Server Controls
HTML server controls are outwardly identical to plain old HTML tags, but include a runat="server" attribute. This gives the ASP.NET runtime control over the HTML server controls, allowing us to access them programmatically. For example, if we have an <a> tag in a page and we want to be able to change the address to which it links dynamically, using VB or C# code, we use the runat="server" attribute.
A server-side HTML server control exists for each of HTML’s most common elements. Creating HTML server controls is easy: we simply stick a runat="server" attribute on the end of a normal HTML tag to create the HTML control version of that tag. The complete list of current HTML control classes and their associated tags is given in Table 1.
Table 1. HTML control classes
| Class | Associated Tags |
|---|---|
HtmlAnchor
|
<a runat="server">
|
HtmlButton
|
<button runat="server">
|
HtmlForm
|
<form runat="server">
|
HtmlImage
|
<img runat="server">
|
HtmlInputButton
|
<input type="submit" runat="server">
|
HtmlInputCheckBox
|
<input type="reset" runat="server">
|
<input type="button" runat="server">
|
|
<input type="checkbox" runat="server">
|
|
HtmlInputFile
|
<input type="file" runat="server">
|
HtmlInputHidden
|
<input type="hidden" runat="server">
|
HtmlInputImage
|
<input type="image" runat="server">
|
HtmlInputRadioButton
|
<input type="radio" runat="server">
|
HtmlInputText
|
<input type="text" runat="server">
|
HtmlSelect
|
<input type="password" runat="server">
|
<select runat="server">
|
|
HtmlTable
|
<table runat="server">
|
HtmlTableRow
|
<tr runat="server">
|
HtmlTableCell
|
<td runat="server">
|
HtmlTextArea
|
<th runat="server">
|
<textarea runat="server">
|
|
HtmlGenericControl
|
<span runat="server">
|
<div runat="server">
|
|
| All other HTML tags |
All the HTML server control classes are contained within the System.Web.UI.HtmlControls namespace. As they’re processed on the server side by the ASP.NET runtime, we can access their properties through code elsewhere in the page. If you’re familiar with JavaScript, HTML, and CSS, you’ll know that manipulating text within HTML tags, or even manipulating inline styles within an HTML tag, can be cumbersome and error-prone. HTML server controls aim to solve these problems by allowing you to manipulate the page easily with your choice of .NET language—for instance, using VB or C#.
Using the HTML Server Controls
Nothing explains the theory better than a simple, working example. Let’s create a simple survey form that uses the following HTML server controls:
HtmlFormHtmlButtonHtmlInputTextHtmlSelect
We’ll begin by creating a new file named Survey.aspx. Create the file in the LearningASP\VB or LearningASP\CS folder that we cover in Chapter 1 of the downloadable pdf of this book. For the purpose of the exercises in this chapter we won’t be using a code-behind file, so don’t check the Place code in a separate file checkbox when you create the form.
Update the automatically generated file with the following code to create the visual interface for the survey:
Visual Basic LearningASP\VB\Survey_01.aspx (excerpt)
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Using ASP.NET HTML Server Controls</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Take the Survey!</h1>
<!-- Display user name -->
<p>
Name:<br />
<input type="text" id="name" runat="server" />
</p>
<!-- Display email -->
<p>
Email:<br />
<input type="text" id="email" runat="server" />
</p>
<!-- Display technology options -->
<p>
Which server technologies do you use?<br />
<select id="serverModel" runat="server" multiple="true">
<option>ASP.NET</option>
<option>PHP</option>
<option>JSP</option>
<option>CGI</option>
<option>ColdFusion</option>
</select>
</p>
<!-- Display .NET preference options -->
<p>
Do you like .NET so far?<br />
<select id="likeDotNet" runat="server">
<option>Yes</option>
<option>No</option>
</select>
</p>
<!-- Display confirmation button -->
<p>
<button id="confirmButton" OnServerClick="Click"
runat="server">Confirm</button>
</p>
<!-- Confirmation label -->
<p>
<asp:Label id="feedbackLabel" runat="server" />
</p>
</div>
</form>
</body>
</html>
The C# version is identical except for the first line—the page declaration:
C# LearningASP\CS\Survey_01.aspx (excerpt)
<%@ Page Language="C#" %>
…
From what we’ve already seen of HTML controls, you should have a good idea of the classes we’ll be working with in this page. All we’ve done is place some HtmlInputTextcontrols, an HtmlButtoncontrol, and an HtmlSelect control inside the obligatory HtmlForm control. We’ve also added a Label control, which we’ll use to give feedback to the user.