HOW TO: Add ASP.NET Server Controls to a Web Form and Change Their Properties

This step-by-step article describes how to add ASP.NET server controls, such as a Button control or a Label control, to an existing Web Form.

ASP.NET Web Forms extend beyond the functionality of Hypertext Markup Language (HTML) and script ASP pages. ASP.NET Web Forms add a design model and rich programmatic interaction that is similar to Visual Basic forms. The ASP.NET server controls provide additional properties and events that are not available to HTML controls.

For more information about when to use ASP.NET server controls, refer to REFERENCES section.

Requirements

The following list outlines the recommended hardware, software, network infrastructure, and service packs that are required:

• Microsoft Visual Studio .NET
• Available Web server that is running Microsoft Internet Information Server (IIS) with Microsoft .NET Framework installed
• Microsoft Windows 2000 Advanced Server, Microsoft Windows 2000 Server, or Microsoft Windows NT 4.0 Server

This article assumes that you are familiar with Visual Studio .NET.

Create the ASP.NET Web Application Project

1. Start Visual Studio .NET.
2. On the File menu, point to New, and then click Project.
3. In the New Project dialog box, click any language under Project Types, and then click ASP.NET Web Application under Templates.
4. In the Location text box, type http://server_name/AddServerControl where server_name is either localhost if you are running a Web server on this computer or the name of another server on your network.
5. Click OK. Notice that WebForm1.aspx opens in Design view by default.

Add Server Controls to the ASP.NET Page

1. Make sure that the toolbox is visible. If not, click Toolbox on the View menu, or press the CTRL+ALT+X keyboard shortcut.
2. In the toolbox, click Web Forms.
3. Drag a Button control onto the Web Form in Design view. You can place the control anywhere on the grid.
4. Drag a Label control from the toolbox onto the Web Form near the Button control that you added in the previous step.
5. Switch to HTML view to review the default code:

   <asp:Button id="Button1" 
        style="Z-INDEX: 101; LEFT: 235px; POSITION: absolute; TOP: 118px" 
        runat="server" Text="Button">
   </asp:Button> 
   <asp:Label id="Label1" 
        style="Z-INDEX: 102; LEFT: 313px; POSITION: absolute; TOP: 122px" 
        runat="server" Width="98px">
   	    Label
   </asp:Label>
   						

   Notice the following:
   • The markup tags for the Button and the Label controls are based on Extensible Markup Language (XML) syntax. Unlike HTML, you must close each tag and enclose the attributes in quotation marks.
   • The markup tags for the Button and the Label controls use the asp: namespace prefix. This indicates that the control is an ASP.NET server control.
   • The Visual Studio integrated development environment (IDE) generates a style attribute. This attribute reflects where you positioned each element on the Web Form.
6. Switch to Design view. Drag a ListBox control onto the Web Form under the Button and the Label controls.

Change the Properties of the Controls

1. Click the Button control, and then press F4 to view the properties of the button. (Alternately, you can click the Button control and then click Properties Window on the View menu to view the properties of the button.)
2. In the Properties window, change the Text property of the Button control to OK, and then change the ID property of the Button control to cmdOK.
3. Click the Label control, and then press F4 to view its properties.
4. In the Properties window, change the Text property of the Label control to Click this button.
5. Click the ListBox control, and then press F4 to view its properties.
6. In the Properties window, click the Items property, and then click the ellipsis (...) button.
7. In the ListItem Collection Editor, follow these steps to add two ListItem members:
   1. Click Add to add the first ListItem member.
   2. Change the Text property to Choice A, and then change the Value property to A.
   3. Change the Selected property to True, and then click OK.
   4. Click Add to add the second ListItem member.
   5. Change the Text property to Choice B, and then change the Value property to B.
   6. Click OK.
8. Save your application.

For more information about when to use ASP.NET server controls, visit the following Microsoft Web site: