Building a Web Form in ASP.NET - How to add server controls to a form
(Page 4 of 5 )
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.
Next: How to work in Source view >>
More ASP.NET Articles
More By Murach Publishing
|
 This article is excerpted from the book Murach's ASP.NET 2.0 Web Programming with VB2005, written by Doug Lowe (Murach, 2006; ISBN: 1890774324). Check it out today at your favorite bookstore. Buy this book now.
|
|
/ 35 
