Before you can build your first ASP.NET application, there are certain skills you need to master. This article, the second of three parts, gets you started with building a web form. It is excerpted from the book Murach's ASP.NET 2.0 Web Programming with VB2005, written by Doug Lowe (Murach, 2006; ISBN: 1890774324).
Now that you know how to start, open, and close a web site, you’re ready to learn how to build a web form. To start, I’ll show you the web form that you’re going to build. Then, I’ll show you how to build it.
The design of the Future Value form
Figure 2-5 presents the design of a Future Value web form that calculates the future value of a fixed monthly investment. This form has enough features to give you a realistic idea of what’s involved in the development of a form, but it’s so simple that you won’t be overwhelmed by detail. In this case, the entire application consists of this single form.
If you study the form, you can see that it contains six web server controls. These controls are derived from ASP.NET classes, and they have special features that make them suitable for web applications. This form contains one drop-down list, two text boxes, one label, and two buttons. These controls are analogous to the ones that you use for Windows applications.
When you click on a button in a web form, it automatically starts a postback to the server. When you click the Calculate button, for example, the application calculates the future value based on the values in the drop-down list and two text boxes. The result is displayed in the label when the form is returned to the browser. When you click on the Clear button, the text boxes and label are cleared and the value in the drop-down list is reset to 50.
In contrast to the web server controls, the image at the top of this page (the Murach logo) is stored in an HTML server control. This is a second type of server control that you can use on a web form. The third type is a validation control, which you’ll learn about later in this chapter.
The arrangement of the web server controls on this web form is done through an HTML table. Above the table, a heading has been entered and formatted. In the first column of the first four rows of the table, text has been entered that describes the data in the second column. The fifth row of the table contains no text or controls. And the six row contains the two buttons.
In the rest of this chapter, you’ll learn how to build this web form, how to add validation controls to it, and how to write the code for its code-behind file. Then, you’ll learn how to test a web application. At the end of this chapter, you’ll find exercises that will walk you through the development of this Future Value application and help you experiment with other features of Visual Studio.
Throughout this chapter, please note that the term page is sometimes used to refer to a web form. That’s because a web form represents a page that’s sent to a browser.
The Future Value web form in a browser
Figure 2-5.The design of the Future Value form
The six web server controls used by the Future Value form
The drop-down list can be used to select a monthly investment value ranging from 50 to 500.
The two text boxes are used to enter values for the annual interest rate and the number of years that the monthly payments will be made.
The label is used to display the future value that is calculated.
The Calculate and Clear buttons are used to post the form back to the server and initiate the processing that needs to be done.
Description
Besides the web server controls, the Future Value form uses an HTML server control to display the image at the top of the form, and it uses text to display the heading below the image. It also uses an HTML table to align the text and web server controls below the image and heading.
When the user clicks on the Calculate button, the future value is calculated based on the three user entries and the results are displayed in the label control.
When the user clicks on the Clear button, the two text boxes and the label are cleared and the drop-down list is reset to a value of 50.
To end the application, the user can click the Close button in the upper right corner of the browser window.
By default, you develop web forms in flow layout. When you use flow layout, the text and controls you add to a form are positioned from left to right and from top to bottom. Because of that, the position of the controls can change when the form is displayed depending on the size of the browser window and the resolution of the display.
To understand how flow layout works, figure 2-6 shows the beginning of a version of the Future Value form that doesn’t use a table to align its text and controls. To create this form, I started by typing the text for the heading directly into the form. Then, I pressed the Enter key twice to add space between the heading and the text and controls that follow it. Next, I typed the text that identifies the first control, I pressed the space bar twice to add some space after the text, and I added a drop-down list. When I added the drop-down list, it was placed immediately to the right of the text and spaces. I used similar techniques to enter the remaining text and text box.
Finally, I formatted the heading at the top of the form. To do that, I selected the text and then used the controls in the Formatting toolbar to change the font size to 20 points, to make the heading bold, and to change its color to blue.
You can see the result in the aspx code in this figure. Notice that the special code  : was inserted for each space between the text and the controls that follow. In addition, a Br element is inserted for each line break. To apply the formatting to the heading, a Strong element is used, along with a Span element with a Style attribute that specifies the font size and color.
Because you’re limited to what you can do with spaces and line breaks, you’ll frequently use tables to format a form in flow layout. For example, you can see in this figure that the drop-down list and the text box aren’t perfectly aligned. In addition, there’s not much space between the line that contains the drop-down list and the line that contains the text box. In the next figure, then, you’ll learn how to add a table to a form so you can align the text and controls just the way you want.
The beginning of the Future Value form created using flow layout
When you add controls to a form in flow layout, they will appear one after the other, from left to right and from top to bottom. Flow layout is the default for web forms in Visual Studio 2005.
To insert a space after a control, use the space bar. The special code  : is inserted into the aspx file.
To insert a line break after a control, press Enter. A <br /> tag is inserted into the aspx file.
To insert literal text, type it directly into the designer window. Then, you can use the controls in the Formatting toolbar and the commands in the Format menu to change the font or font size; apply bold, italics, or underlining; or apply foreground or background color.
To align text and controls when you use flow layout, you normally use tables as described in the next figure.
Figure 2-7 shows how to add a table to a form. In this case, a table of six rows and two columns has already been added to the form, but the Insert Table dialog box is displayed to show what the settings are for that table. Usually, you can keep the dialog box entries that simple, because you can easily adjust the table once it’s on the form.
The easiest way to resize a row or column is to drag it by its border. To change the width of a column, drag it by its right border. To change the height of a row, drag it by its bottom border. You can also change the height and width of the entire table by selecting the table and then dragging it by its handles.
You can also format a table in Design view by selecting one or more rows or columns and then using the commands in the Layout menu or the shortcut menu that’s displayed when you right-click the selection. These commands let you add, delete, or resize rows or columns. They also let you merge the cells in a row or column. If, for example, you want a control in one row to span two columns, you can merge the cells in that row.
How to add text to the cells of a table
In figure 2-7, you can see that text has been entered into the cells in the first four rows of the first column of the table. To do that, you just type the text into the cells. Then, you can format the text by selecting it and using the controls in the Formatting toolbar or the commands in the Format menu. If, for example, you want to bold the four text entries, you can select the four cells that contain the text and click on the Bold button.
The Future Value form with a table that has been inserted into it
Figure 2-7.How to add a table to a form and text to a table
How to add a table to a form
Use the Layout->Insert Table command to display the Insert Table dialog box. Then, set the number of rows and columns that you want in the table, set any other options that you want, and click OK.
How to format a table after it has been added to a form
To resize a row, drag it by its bottom border. To resize a column, drag it by its right border. To resize the entire table, select the table and then drag its handles.
Select rows or columns and then use the commands in the Layout menu or the shortcut menu to add, delete, resize, or merge the rows or columns.
How to add and format text
To add text to a table, type the text into the cells of the table.
To format the text in a table, select the text, and then use the controls in the Formatting toolbar or the commands in the Format menu to apply the formatting.
Description
To control the alignment of the text and controls on a web form in flow layout, you can use tables.
Figure 2-8 shows how to add web server controls to a form. To do that, you can just drag a control from the Standard group of the Toolbox and drop it on the form. Or, you can move the cursor where you want a control inserted and then double-click on the control in the Toolbox. This works whether you’re placing a control within a cell of a table or outside of a table.
Once you’ve added the controls to the form, you can resize them by dragging the handles on their sides. If the controls are in a table, you may also want to resize the columns or rows of the table at this time. Keep in mind that you can resize a cell as well as the control within a cell, and sometimes you have to do both to get the formatting the way you want it.
Although you’ll typically use web server controls on your web forms, you can also use HTML server controls. These controls appear in the HTML group of the Toolbox, and you can add them to a form the same way that you add web server controls. In addition, you can add an HTML image control to a form by dragging an image from the Solution Explorer. That’s how I added the image at the top of the Future Value form.
How to set the properties of the controls
After you have placed the controls on a form, you need to set each control’s properties so the control looks and works the way you want it to when the form is displayed. To set those properties, you work in the Properties window as shown in figure 2-8. To display the properties for a specific control, just click on it in Design view.
In the Properties window, you select a property by clicking it. Then, a brief description of that property is displayed in the pane at the bottom of the window. To change a property setting, you change the entry to the right of the property name by typing a new value or choosing a new value from a drop-down list. In some cases, a button with an ellipsis (…) on it will appear when you click on a property. In that case, you can click this button to display a dialog box that helps you set the property.
Some properties are displayed in groups. In that case, a plus sign appears next to the group name. This is illustrated by the Font property in this figure. To display the properties in a group, just click the plus sign next to the group name.
To display properties alphabetically or by category, you can click the appropriate button at the top of the Properties window. At first, you may want to display the properties by category so you have an idea of what the different properties do. Once you become more familiar with the properties, though, you may be able to find the ones you’re looking for faster if you display them alphabetically.
As you work with properties, you’ll find that most are set the way you want them by default. In addition, some properties such as Height and Width are set interactively as you size and position the controls in Design view. As a result, you usually only need to change a few properties for each control. The only
The Future Value form after six web server controls have been added to it
Figure 2-8. How to add web server controls to a form and set their properties
How to add a web server control to a web form
Drag the control from the Standard group in the Toolbox to the form or to a cell in a table on the form. Or, move the cursor to where you want the control, and then double-click on the control in the Toolbox.
How to set the properties for a control
Select a control by clicking on it, and all of its properties are displayed in the Properties window. Then, you can select a property in this window and set its value. When you select a property, a brief description is displayed in the pane at the bottom of the window.
To change the Height and Width properties, you can drag one of the handles on a control. This also changes the Height and Width in the Properties window.
To change the properties for two or more controls at the same time, select the controls. Then, the common properties of the controls are displayed in the Properties window.
You can use the first two buttons at the top of the Properties window to sort the properties by category or alphabetically.
You can use the plus and minus signs that are displayed in the Properties window to expand and collapse the list of properties.
Many web server controls have a smart tag menu that provides options for performing common tasks and setting common properties. To display a smart tag menu, click the Smart Tag icon in the upper right of the control.
Note
The image on this form was created by dragging the MurachLogo.jpg file from the Solution Explorer to the form. This creates an HTML image control.
The property that I set for the drop-down list, for example, is the ID property. This property contains the name that you’ll use to refer to the control when you write the Visual Basic code for the code-behind file.
Another way to set properties for some controls is to use the control’s smart tag menu. In this figure, for example, you can see the smart tag menu for the drop-down list. You can use this menu to choose the data source for the control, which sets the DataSourceID, DataTextField, and DataValueField properties; edit the items in the list, which modifies the collection of items that’s accessed through the Items property; and enable or disable the automatic posting of the page when a value is selected from the list, which sets the AutoPostBack property. Because smart tag menus help you set common properties, they’re displayed automatically when you drag a control to a form. You can also display a smart tag menu by clicking the Smart Tag icon in the upper right corner of the control.
Common properties for web server controls
The first table in figure 2-9 presents the properties for web server controls that you’re most likely to use as you develop web forms. If you’ve worked with Windows controls, you’ll notice that many of the properties of the web server controls provide similar functionality. For example, you use the ID property to name a control that you need to refer to in code, and you can use the Text property to determine what’s displayed in or on the control. However, the AutoPostBack, CausesValidation, EnableViewState, and Runat properties are unique to web server controls. Since you already know the purpose of the Runat property, I’ll focus on the other three properties here.
The AutoPostBack property determines whether the page is posted back to the server when the user changes the value of the control. Note that this property is only available with certain controls, such as check boxes, drop-down lists, and radio buttons. Also note that this property isn’t available with button controls. That’s because button controls always post a page back to the server.
The CausesValidation property is available for button controls and determines whether the validation controls are activated when the user clicks the button. This lets you check for valid data before the form is posted back to the server. You’ll learn more about validation controls a few figures from now.
The EnableViewState property determines whether a server control retains its property settings from one posting to the next. For that to happen, the EnableViewState property for both the form and the control must be set to True. Since that’s normally the way you want this property set, True is the default.
The second table in this figure lists four more properties that are commonly used with drop-down lists and list boxes. However, you don’t need to set these at design time. Instead, you use them when you write the Visual Basic code for the code-behind file. For instance, you use the Items collection to add, insert, and remove ListItem objects. And you use the SelectedValue property to retrieve the value of the currently selected item. You’ll learn more about these properties when you review the code-behind file for the Future Value form.
Common web server control properties
Property
Description
AutoPostBack
Determines whether the page is posted back to the server when the value of the control changes. Available with controls such as a check box, drop-down list, radio button, or text box. The default value is False.
CausesValidation
Determines whether the validation that’s done by the validation controls occurs when you click on the button, link button, or image button. The default value is True. (You’ll learn how to use two common validation controls later in this chapter.)
EnableViewState
Determines whether the control maintains its view state between HTTP requests. The default value is True.
Enabled
Determines whether the control is functional. The default value is True.
Height
The height of the control.
ID
The name that’s used to refer to the control.
Runat
Indicates that the control will be processed on the server by ASP.NET.
TabIndex
Determines the order in which the controls on the form receive the focus when the Tab key is pressed.
Text
The text that’s displayed in the control.
ToolTip
The text that’s displayed when the user hovers the mouse over the control.
Visible
Determines whether a control is displayed or hidden.
Width
The width of the control.
Common properties of drop-down list and list box controls
Property
Description
Items
The collection of ListItem objects that represents the items in the control. Although you can set the values for these list items at design time, you normally use code to add, insert, and remove the items in a list or list box.
SelectedItem
The ListItem object for the currently selected item.
SelectedIndex
The index of the currently selected item. If no item is selected in a list box, the value of this property is -1.
SelectedValue
The value of the currently selected item.
Figure 2-9.Common properties for web server controls
Note
When buttons are clicked, they always post back to the server. That’s why they don’t have AutoPostBack properties.
As you design a form in Design view, HTML and asp tags are being generated in Source view. This is the code that’s used to render the web page that’s sent to the user’s browser. What you see in Design view is just a visual representation of that code. In figure 2-10, you can see some of the tags for the Future Value form after the Designer has been switched to Source view.
How to use Source view to modify the design
As you saw in the last chapter, HTML consists of tags. For instance, the <form> and </form> tags mark the start and end of the HTML code for a web form. And the <table> and </table> tags mark the start and end of the HTML code for a table.
In addition to the HTML tags, ASP.NET adds asp tags for the web server controls that are added to the form. For instance, the <asp:DropDownList> and </asp:DropDownList> tags mark the start and end of the code for a drop-down list. Within these tags, you’ll find the code for the property settings of the controls. Note, however, that all of this asp code is converted to HTML before the page can be sent to a browser, because a browser can only interpret HTML.
Because the file that contains the source code for a web form has an aspx extension, we refer to the source code for a form as aspx code. This also indicates that the code contains both HTML and asp tags.
In case you need it, chapter 5 presents a crash course in HTML. In the meantime, though, you may be surprised to discover how easy it is to modify the design of a form by adjusting the aspx code using the HTML Editor.
To start, you can modify the title of the form that you’ll find between the Head tags near the top of the source code. This is the title that’s displayed in the title bar of the browser when the form is run (see figure 2-5). In this example, the title has been changed from “Untitled Page” to “Chapter 02: Future Value.” As you will see, all of the applications in this book have titles that indicate both the chapter number and the type of application.
You can also use this technique to change the text that has been entered into a form or to change some the settings for HTML elements. If, for example, you want to change the text in the first row of the table from “Monthly investment” to “Investment amount,” you can just edit the text in Source view. If you want to change the width of a cell, you can edit that entry. And if you want to modify the color for the heading, you can do that too. As you edit, just follow the syntax of the other entries, which will be easier to do after you read chapter 5.
To change the properties of a server control, you can click in the starting asp tag to select the control. Then, you can use the Properties window just as if you were in Design view. When you change a property, the attribute that represents the property in the asp tag for the control is changed. You can also change the attributes directly in the source code whenever the syntax is obvious. That’s often the fastest way to make an adjustment.
The design of the Future Value form in Source view
Figure 2-10. How to use Source view to modify the design of a form
How to change the title of the form
Change the text between the <title> and </title> tags.
How to change the HTML and text for the form
Change the source code itself.
How to change the property settings for a control
To select a control, move the insertion point into the asp tag for the control. Then, use the Properties window to change the property settings for the control. Or, you can modify the property settings in the source code itself.
Description
Design view presents a visual representation of the code that you see in Source view.
The source code includes HTML tags and asp tags. Before the form is sent to a browser, the asp tags are converted to HTML because browsers can only run HTML.
The properties you set for a control appear as attributes in the asp tag for the control.
We refer to the source code as aspx code, because the source files have aspx extensions.
The aspx code for the Future Value form
Figure 2-11 presents the aspx code for the Future Value form that has been developed thus far (except for the Page and Doctype directives, which you’ll learn more about in chapter 5). For now, though, please note that the code for the title that’s displayed in the web browser is between the <head> tags, and the code for the form design is between the <div> tags.
Within the <div> tags, I’ve highlighted the code for the HTML image control and the code for the six web server controls. If you study this code, you can see how the properties are set for each of these controls. For instance, you can see that I set the Width properties of the button controls to 100 pixels so they are both the same width.
You can also see that I set the width of the drop-down list to 106 pixels, even though it appears to be the same width as the text boxes, which are 100 pixels wide. And you can see that I had to set the height of the cells in the fifth row of the table to give that row an adequate height. My point is that the sizing properties in the aspx code aren’t always consistent, so you often have to fiddle with these properties to get the design the way you want it.
Before I go on, I want to point out that when you create an HTML image control by dragging the image from the Solution Explorer, it’s generated with just a Src property that identifies the name and location of the image. However, the version of HTML that Visual Studio 2005 uses also requires the Alt attribute, which specifies the text that’s displayed if for some reason the image can’t be displayed. Because of that, I had to add this property to the HTML code for the control.
/ 41 
Dynamic Sitemap and Navigation in ASP.Net
