Section 19.4. Adding Controls

19.4. Adding Controls

You can add Server Controls to a Web Form in three ways: by writing HTML into the HTML page, by dragging controls from the toolbox to the Design page, or by pro-grammatically adding them at runtime. For example, suppose you want to use buttons to let the user choose one of three shippers provided in the Northwind database. You can write the following HTML within the <div> elements, in the HTML window:

 <div>      <asp:RadioButton GroupName="Shipper" id="Speedy"        text = "Speedy Express" Checked="True" runat="server" />      <asp:RadioButton GroupName="Shipper" id="United"        text = "United Package" runat="server"/>      <asp:RadioButton GroupName="Shipper" id="Federal"        text = "Federal Shipping" runat="server" />     </div> 

The asp tags declare server-side ASP.NET controls that are replaced with normal HTML when the server processes the page. When you run the application, the browser displays three radio buttons in a button group ; pressing one deselects the others.

You can create the same effect more easily by dragging three buttons from the Visual Studio toolbox onto the Form, or, to make life even easier, follow these steps:

1. Switch to Design view.

2. Drag a RadioButtonList control from the toolbox onto the form.

3. Click on the control's the smart tag to open it.

4. Choose Edit Items to open theListItem Collection Editor dialog box.

5. Click Add three times to add three radio buttons.

You could instead click on Choose a Data Source and bind to a collection, perhaps one you've obtained from a database.

Each radio button is given the default name ListItem, but you may edit its text and value in the ListItem properties, where you can also decide which of the radio buttons is selected, as shown in Figure 19-6.

You can add controls to a page in one of two modes. The default mode is FlowLayout . With FlowLayout , the controls are added to the form from top to bottom, as in a Microsoft Word document. The alternative is GridLayout , in which the controls are arranged in the browser using absolute positioning (x- and y-coordinates ).

To change from Grid to Layout or back, change the pageLayout property of the document in Visual Studio .NET. You can improve the look of your radio button list by changing properties in the Properties window, including the font, colors, number of columns , repeat direction (vertical is the default), and so forth.

Click OK to close the editor and then switch back and forth between the Design and Source tabs to see the effect of your changes, as shown in Figure 19-7.

Figure 19-6. Editing a collection of list items

I've numbered a few areas of interest in Figure 19-7. Number 1 shows the RadioButtonList control in the toolbox. Number 2 shows the smart tag on the RadioButtonList control on the form. Number 3 shows that you are looking at the properties of the RadioButtonList control, which has been named RadioButtonList1 for you by Visual Studio 2005 (but of course, you are free to change that in the Properties window), and Number 4 shows that the current RepeatDirection property is set to Vertical (setting it to horizontal will lay out the radio buttons horizontally).