Article
ASP.NET 2.0: A Getting Started Guide
Chapter 4. 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 many techniques that allow web developers to build parts of web pages independently, then put them together later to build complete pages.
The content we're organizing 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, 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.
Web Forms
As you know, there's always new terminology to master when you're learning new technologies. But with ASP.NET, even the simplest terms that are used to describe the basics of web pages change to reflect the processes that occur within them.
The term used to describe an ASP.NET web page is web form, and this is the central object in ASP.NET development. You've already met web forms--they're the .aspx files you've worked with so far in this book. At first glance, web forms look much like HTML pages, but in addition to static HTML content they also contain ASP.NET presentational elements, and code that executes on the server side to generate dynamic content and perform the desired server-side functionality.
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:
<html>
<head>
<script runat="server" language="language">
...code here...
</script>
</head>
<body>
<form runat="server">
...user interface elements here...
</form>
</body>
</html>
To access and manipulate a web form programatically, we use the System.Web.UI.Page class. You might recognize this class from the code-behind example we saw in Chapter 3, VB and C# Programming Basics. We must mention the class explicitly in the code-behind file. In situations in which we're not using code-behind files (i.e. we write 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 programatically. 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 4.1.
Table 4.1. HTML control classes
For more details on these classes, see Appendix A.
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, then 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 Learning folder you created in Chapter 1. The following code creates the visual interface for the survey:
Example 4.1. Survey.aspx (excerpt)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Using ASP.NET HTML Server Controls</title>
<!-- code will go here -->
</head>
<body>
<form runat="server">
<h2>Take the Survey!</h2>
<!-- 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>
</form>
</body>
</html>
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 HtmlInputText controls, an HtmlButton control, 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.
HTML Server Controls in Action
Remember, HTML server controls are essentially HTML tags with the runat="server" attribute. In most cases, you'll also need to assign them IDs, which will enable you to use the controls in your code.
When it's complete, the Survey.aspx web form will resemble Figure 4.1.
Figure 4.1. A simple form that uses HTML server controls
When a user clicks on the button, we'll display the submitted responses in the browser. In a real application, we'd probably be more likely to save this information to a database and perhaps show the results as a chart. Whatever the case, we'd access the properties of the HTML controls as shown below:
Example 4.2. Survey.aspx (excerpt)
<script runat="server" language="VB">
Sub Click(ByVal s As Object, ByVal e As EventArgs)
Dim i As Integer
feedbackLabel.Text = "Your name is: " & name.Value & "<br />"
feedbackLabel.Text += "Your email is: " & email.Value & _
"<br />"
feedbackLabel.Text += "You like to work with:<br />"
For i = 0 To serverModel.Items.Count - 1
If serverModel.Items(i).Selected Then
feedbackLabel.Text += " - " & _
serverModel.Items(i).Text & "<br />"
End If
Next i
feedbackLabel.Text += "You like .NET: " & likeDotNet.Value
End Sub
</script>
Example 4.3. Survey.aspx (excerpt)
<script runat="server" language="C#">
void Click(Object s, EventArgs e)
{
feedbackLabel.Text = "Your name is: " + name.Value + "<br />";
feedbackLabel.Text += "Your email is: " + email.Value +
"<br />";
feedbackLabel.Text += "You like to work with:<br />";
for (int i = 0; i <= serverModel.Items.Count - 1; i++)
{
if (serverModel.Items[i].Selected)
{
feedbackLabel.Text += " - " + serverModel.Items[i].Text +
"<br />";
}
}
feedbackLabel.Text += "You like .NET: " + likeDotNet.Value;
}
</script>
As with the examples in previous chapters, we start by placing our VB and C# code inside a server-side script block within the <head> part of the page. Next, we create a new Click event handler that takes the two usual parameters. Finally, we use the Label control to display the user's responses within the page.
Figure 4.2. Viewing the survey results
Once you've written the code, save your work and test the results in your browser. Enter some information and click the button. To select multiple options in the serverModel option box, hold down Ctrl as you click on your preferences. The information you enter should appear at the bottom of the page when the Confirm button is clicked, as shown in Figure 4.2.
In conclusion, working with HTML server controls is really simple. All you need to do is assign each control an ID, and add the runat="server" attribute. Then, you can simply access and manipulate them using VB or C# code on the server side.