Constructing ASP.NET Web Pages

TIP: 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.

NOTE: Validation Warnings
You may notice that Visual Web Developer will display a validation warning about the multiple=”true” attribute value on the selectelement. In XHTML 1.0, the select element only supports multiple=”multiple” and the IDE dutifully reports the problem. However, since this is a server control—it has a runat="server" attribute—you must specify multiple=”true”, otherwise the page will not compile and execute.

When you eventually test this page, you’ll be happy to note that ASP.NET will change the attribute value to multiple=”multiple” when the HTML is generated and the page is displayed.

When it’s complete, and you view it in Visual Web Developer’s Design mode, the Survey.aspx web form will resemble Figure 1. Note that you can’t execute the form yet, because it’s missing the button’s Clickevent handler that we’ve specified using the OnServerClick attribute on the HtmlButton control.

When a user clicks on the Confirm 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, the code for the Click event handler method below shows how we’d access the properties of the HTML controls:

Visual Basic LearningASP\VB\Survey_02.aspx (excerpt)
<script runat="server">  
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>

C# LearningASP\CS\Survey_02.aspx (excerpt)
<script runat="server">  
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 we’ve seen in previous chapters, we start by placing our VB and C# code inside a server-side script block within the <script> 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.

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 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 the controls using VB or C# code on the server side.

Web Server Controls

Web server controls can be seen as advanced versions of HTML server controls. Web server controls are those that generate content for you—you’re no longer in control of the HTML being used. While having good knowledge of HTML is useful, it’s not a necessity for those working with web server controls.

Let’s look at an example. We can use the Label web server control to place simple text inside a web form. To change the Label’s text from within our C# or VB code, we simply set its Text property like so:

Visual Basic
myLabel.Text = "Mickey Mouse"

Similarly, to add a text box to our form, we use the TextBox web server control. Again, we can read or set its text using the Text property:

C#
username = usernameTextBox.Text;

Though we’re applying the TextBox control, ASP.NET still uses an input element behind the scenes; however, we no longer have to worry about this detail. With web server controls, you no longer need to worry about translating the needs of your application into elements you can define in HTML—you can let the ASP.NET framework do the worrying for you.

Unlike HTML server controls, web server controls don’t have a direct, one-to-one correspondence with the HTML elements they generate. For example, we can use either of two web server controls—the DropDownList control, or the ListBox control—to generate a select element.

Web server controls follow the same basic pattern as HTML tags, but the tag name is preceded by asp:, and is capitalized using Pascal Casing. Pascal Casing is a form that capitalizes the first character of each word (such as TextBox). The object IDs are usually named using Camel Casing, where the first letter of each word except the first is capitalized (e.g. usernameTextBox).

Consider the following HTML input element, which creates an input text box:

<input type="text" name="usernameTextBox" size="30" />

The equivalent web server control is the TextBox control, and it looks like this:

<asp:TextBox id="usernameTextBox" runat="server" Columns="30"></asp:TextBox>

Remember that, unlike any normal HTML that you might use in your web forms, web server controls are first processed by the ASP.NET engine, where they’re transformed to HTML. A side effect of this approach is that you must be very careful to always include closing tags (the </asp:TextBox> part above). The HTML parsers of most web browsers are forgiving about badly formatted HTML code, but ASP.NET is not. Remember that you can use the shorthand syntax (/>) if nothing appears between your web server control’s opening and closing tags. As such, you could also write this TextBox like so:

<asp:TextBox id="usernameTextBox" runat="server" Columns="30" />

To sum up, the key points to remember when you’re working with web server controls are:

• Web server controls must be placed within a <form runat="server"> tag to function properly.
• Web server controls require the runat="server" attribute to function properly.
• We include web server controls in a form using the asp: prefix.

There are more web server controls than HTML controls. Some offer advanced features that simply aren’t available using HTML alone, and some generate quite complex HTML code for you. We’ll meet many web server controls as we work through this and future chapters in the book. For more information on web server controls, including the properties, methods, and events for each, have a look at Appendix A of this book.