Build Your Own ASP.NET Website Using C# And VB.NET, Chapter 4 - Web Forms and Web Controls

As you might have realised from our work in the previous chapter, at the heart of ASP.NET is its ability to create dynamic form content. Whether you're creating a complex shopping cart application, or a simple page to collect user information and send the results out via email, Web Forms have a solution. They allow you to use HTML controls and Web controls to create dynamic pages with which users can interact. In this chapter, you will learn how Web Forms, HTML controls, and Web controls, in conjunction with VB.NET and C# code, should change the way you look at, and develop for, the Web. In this chapter I'll introduce you to the following concepts:

• HTML controls
• Web Forms
• Web controls
• Handling page navigation
• Formatting controls with CSS

Toward the end of the chapter, you'll put all of these concepts to work into a real world application! I'll introduce the Dorknozzle Intranet Application that you'll be building throughout this book, and see how what you learned in this chapter can be applied to some of the pages for the project. Keep in mind that you can download these chapters in PDF format if you'd rather print them out and read them offline.

Working with HTML Controls

HTML controls are outwardly identical to plain old HTML 4.0 tags, but employ the runat="server" attribute. For each of HTML's most common tags, a corresponding server-side HTML control exists, although Microsoft has added a few tags and some extra properties for each. Creating HTML 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.

These HTML control classes are all contained within the System.Web.UI.HtmlControls namespace.

Because HTML controls are processed on the server side by the ASP.NET runtime, we can easily 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 controls aim to solve this by allowing you to manipulate the page easily with your choice of .NET language, for instance, using VB.NET or C#. We'll start by looking at the HTML controls library, then we'll explore in more detail the properties exposed by the controls when we process a simple form containing HTML controls and code.

Table 4.1. HTML Control Classes

HtmlAnchor

The HtmlAnchor control creates a server-side HTML <a href="…"> tag.

<a href="somepage.aspx" runat="server">Click Here</a>

This line would create a new hyperlink with the text "Click Here." Once the link is clicked, the user would be redirected to somepage.aspx as given by the href attribute.

HtmlButton

The HtmlButton control creates a server-side HTML <button> tag.

<button id="myButton" OnServerClick="Click" runat="server">Click  
Here</button>

Notice that we're using events here. On HTML controls, we need to use OnServerClick to specify the ASP.NET handler for clicks on the button, because onclick is reserved for handling clicks with JavaScript on the client side. In this example, the handler subroutine is called Click, and would be declared in a script block with the same form as the Click handlers we looked at for <asp:Button> tags previously:

<script runat="server" language="VB">
Sub Click(s As Object, e As EventArgs)
 Response.Write(myButton.ID)
End Sub
</script>
<script runat="server" language="C#">
void Click(Object s, EventArgs e) {
 Response.Write(myButton.ID);
}
</script>

In this case, when the user clicks the button, the ServerClick event is raised, the Click() subroutine is called to handle it, and the ID of the HtmlButton control is written onto the screen with Response.Write() (the Write() method of the Response object).

HtmlForm

The HtmlForm control creates a server-side <form> tag. Most HTML controls, Web controls, etc., must be placed inside an HtmlForm control.

<form runat="server">
<!-- ASP.NET controls in here -->
</form>

HtmlImage

The HtmlImage control creates a server-side <img> tag. The following code shows how we might place an HtmlImage control on a page, along with an HtmlButton:

<img id="myimage" src="arrow.gif" runat="server" />
<button id="myButton" runat="server" OnServerClick="Click">Click  
Here</button>

The user could change this image dynamically by pressing the button if we add code as follows:

<script runat="server" language="VB">
Sub Click(s As Object, e As EventArgs)
 myimage.Src = "welcome.gif"
End Sub
</script>
<script runat="server" language="C#">
void Click(Object s, EventArgs e) {
 myimage.Src = "welcome.gif";
}
</script>

What will happen if these controls are placed on a page along with the script block? First of all, the image arrow.gif will appear. When the HtmlButton control is clicked, it changes to welcome.gif. Behind the scenes, the ServerClick event is raised when the button is clicked, thus the Click() subroutine is called, and the Src property of the HtmlImage control is changed from arrow.gif to welcome.gif.

HtmlGenericControl

The HtmlGenericControl creates a server-side control for HTML tags that do not have an HTML control associated with them. Perfect examples of this are the <span> and <div> tags. The following example illustrates how you can modify text within a <span> tag to change the content from I like ASP.NET to Why would anyone need PHP? dynamically.

<span id="myGenericControl" runat="server">I like ASP.NET</span>
<br />
<button id="myButton" runat="server" OnServerClick="Click">Click  
Here</button>

We simply add the following code to respond to the ServerClick event and change the text:

<script runat="server" language="VB">
Sub Click(s As Object, e As EventArgs)
 myGenericControl.InnerText = "Why would anyone need PHP?"
End Sub
</script>
<script runat="server" language="C#">
void Click(Object s, EventArgs e) {
 myGenericControl.InnerText = "Why would anyone need PHP?";
}
</script>

HtmlInputButton

The HtmlInputButton control creates a server-side <input type="submit">, <input type="reset">, or <input type="button"> HTML tag.

<input type="submit" value="Click Here" runat="server" />
<input type="reset" value="Click Here" runat="server" />
<input type="button" value="Click Here" runat="server" />

As with HtmlButton, you can assign a server-side event handler to controls of this type with the OnServerClick attribute.

HtmlInputCheckBox

The HtmlInputCheckBox control creates a server-side <input type="checkbox"> HTML tag.

<input type="checkbox" id="cb1" value="ASP.NET" runat="server"
 />ASP.NET<br />
<input type="checkbox" id="cb2" value="PHP" runat="server"
 />PHP<br />
<input type="checkbox" id="cb3" value="JSP" runat="server"
 />JSP<br />
<input type="checkbox" id="cb4" value="CGI" runat="server"
 />CGI<br />
<input type="checkbox" id="cb5" value="Coldfusion" runat="server"
 />Coldfusion<br>

The HtmlInputCheckBox control is the perfect choice when you want to allow your users to select multiple items from a list.

HtmlInputFile

The HtmlInputFile control creates a server-side <input type="file"> tag in the HTML. This displays a text box and Browse button to allow users to upload files from ASP.NET pages. There is no Web control equivalent for this tag, so it's typically required when working with file uploads—even with Web Forms (which we'll discuss shortly).

<input type="file" id="fileUpload" runat="server" />

HtmlInputHidden

The HtmlInputHidden control creates a server-side <input type="hidden"> tag.

<input type="hidden" id="hiddenField" runat="server" />

Try viewing the source of any one of your ASP.NET pages from your browser, and you're likely to find this tag being used to store view state information.

HtmlInputImage

The HtmlInputImage control creates a server-side <input type="image"> tag.

<input type="image" id="imgMap" runat="server"
 src="ButtonImage.jpg" />

This tag provides an alternative to the HtmlInputButton control. They both function in the same way; the difference is that the HtmlInputImage control uses a custom image rather than the beveled gray Windows-style button. The mouse coordinates are also sent along with the form submission when the user clicks a control of this type.

HtmlInputRadioButton

The HtmlInputRadioButton control creates a server-side radio button. The following code, for instance, offers a choice of Male or Female:

Gender?<br />
<input type="radio" id="radio1" runat="server" />Male<br />
<input type="radio" id="radio2" runat="server" />Female

Similar to the HtmlInputCheckBox control, the HtmlInputRadioButton control creates a list of items for users to choose from. The difference, however, is that the user is only able to select one item at a time.

HtmlInputText

The HtmlInputText control creates a server-side <input type="text"> or <input type="password"> tag.

Please Login<br />
Username:<br />
<input type="text" id="username" runat="server" /><br />
Password:<br />
<input type="password" id="password" runat="server" />

The preceding code creates a typical login screen layout.

HtmlSelect

The HtmlSelect control creates a server-side version of the <select> tag for creating drop-down lists or list boxes. The following code creates a drop-down menu:

Select your favorite movie:<br />
<select id="selectMovie" runat="server">
<option>Star Wars</option>
<option>Spider Man</option>
<option>The Godfather</option>
<option>Lord of the Rings</option>
</select>

The following code creates a multiple-selection list box:

Which of these movies do you like?<br />
<select id="selectMovie" runat="server" multiple="true" size="4">
<option>Star Wars</option>
<option>Spider Man</option>
<option>The Godfather</option>
<option>Lord of the Rings</option>
</select>

You'll notice the <option> tag within the main <select> tag; this is used to denote each item to appear in the list box or drop-down menu.

HtmlTable, HtmlTableRow and HtmlTableCell

The HtmlTable, HtmlTableRow, and HtmlTableCell controls create server-side versions of the <table>, <tr>, <td>, and <th> tags. The following code creates a server-side table:

<table id="myTable" border="1" cellspacing="0" cellpadding="0"  
runat="server">  
<tr runat="server" id="row1">
<td runat="server" id="cell1">Table Data 1</td>
<td runat="server" id="cell2">Table Data 2</td>
</tr>
<tr runat="server" id="row2">
<td runat="server" id="cell3">Table Data 3</td>
<td runat="server" id="cell4">Table Data 4</td>
</tr>
</table>
<button id="myButton" OnServerClick="Click" runat="server">Click  
Here</button>

You could add the following code to respond to the Click event raised by the HtmlButton control and change the content of the first cell to read "Hello World."

<script runat="server" language="VB">
Sub Click(s As Object, e As EventArgs)
 cell1.InnerText = "Hello World"
End Sub
</script>
<script runat="server" language="C#">
void Click(Object s, EventArgs e) {
 cell1.InnerText = "Hello World";
}
</script>