HTML Server Controls
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.
95
Chapter 4: Constructing ASP.NET Web Pages
Table 4.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"> |
|
<input type="reset" runat="server"> |
|
<input type="button" runat="server"> |
HtmlInputCheckBox |
<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"> |
|
<input type="password" runat="server"> |
HtmlSelect |
<select runat="server"> |
HtmlTable |
<table runat="server"> |
HtmlTableRow |
<tr runat="server"> |
HtmlTableCell |
<td runat="server"> |
|
<th runat="server"> |
HtmlTextArea |
<textarea runat="server"> |
HtmlGenericControl |
<span runat="server"> |
|
<div runat="server"> |
|
All other HTML tags |
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
96
Using the HTML Server Controls
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:
HtmlForm
HtmlButton
HtmlInputText
HtmlSelect
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:
File: 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>
97
Chapter 4: Constructing ASP.NET Web Pages
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.
98
Using the HTML Server Controls
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:
Visual Basic File: 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
99
Chapter 4: Constructing ASP.NET Web Pages
feedbackLabel.Text += "You like .NET: " & likeDotNet.Value End Sub
</script>
C# |
File: 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
100