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
Using the HTML Server Controls
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 run-
at="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
Chapter 4: Constructing ASP.NET Web Pages
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 informa-
tion 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
Using the HTML Server Controls
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
Chapter 4: Constructing ASP.NET Web Pages
Get Build Your Own ASP.NET 2.0 Web Site Using C# & VB, Second Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
