How to Build a Web Form for a One-Page Web Application - How to add server controls to a form

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 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

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

1. 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.
   
2. 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. 
    
3. You can use the first two buttons at the top of the Properties window to sort the properties by category or alphabetically. 
    
4. You can use the plus and minus signs that are displayed in the Properties window to expand and collapse the list of properties. 
    
5. 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.

--------------------------------------------Figure 2-8   How to add web server controls to a form and set their properties

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.

Please check back tomorrow for the continuation of this article.

Comments On: How to Build a Web Form for a One-Page Web Application

>>> Be the FIRST to comment on this article!

Buy this book...

This article is an excerpt from chapter two of Murach's ASP.NET 3.5 Web Programming with VB 2008, written by Anne Boehm (Murach, 2008; ISBN: 1890774472). Check it out today at your favorite bookstore. Buy this book now.