This documentation is archived and is not being maintained.

Adding Web Server Controls to a Web Forms Page

You add controls to a Web Forms page much the same way you add any HTML element. You can either use the Visual Studio Web Forms Designer and add a control from the Toolbox, or type the element representing the control into the HTML.

Note   You can also add controls programmatically at run time. For details, see Adding Controls to a Web Forms Page Programmatically.

Adding Web Server Controls Using the Web Forms Designer

The Toolbox contains tabs with controls that you can use when you design a Web Forms page.

To add a Web server control to a Web Forms page

  1. Switch to Design view.
  2. From the Web Forms tab of the Toolbox, drag the control onto the form.

    A glyph (y40dxsky.vbwebformsservercontrolglyph(en-us,VS.71).gif) appears on the control in Design view to indicate that it is a server-based control.

    Note   By default, the Web Forms page uses Grid layout, and you place controls at absolute positions on the page (using x and y coordinates). If you want to use linear layout, in which the page elements flow as in a word processing document, you can change the page's pageLayout property, or include a Flow Layout Panel HTML server control. For more details, see Positioning HTML Elements in Design View.

Adding Web Server Controls using ASP.NET Syntax

You can add a control to a page by declaring it directly in the .aspx file.

Note   For background information about controls for Web Forms pages, see Introduction to ASP.NET Server Controls.

To add a control using ASP.NET syntax

  1. Switch to HTML view.
  2. Type the element representing the control into the .aspx file. In Visual Studio, you do this in HTML view. The exact syntax you use depends on the control you are adding, but in general the following applies:
    • Controls must include the attribute runat="server".
    • Set the control's ID attribute unless the control is part of a complex control and will be repeated (as in the Repeater, DataList, and DataGrid controls).
    • Web server controls are declared with an XML tag that references the asp namespace.
    • Control declarations must be properly closed. You can specify an explicit closing tag, or, if the control has no child elements, you can specify a self-closing tag. The only exceptions are HTML input controls that cannot have child elements, such as the input controls (for example, HtmlInputText, HtmlImage, and HtmlButton).
    • Control properties are declared as attributes.

      The following examples show typical declarations for Web server controls:

      <!-- Textbox Web server control -->
      <asp:textbox id=TextBox1 runat="Server" Text=""></asp:textbox>
      <!-- Same, but with self-closing element -->
      <asp:textbox id=Textbox1 runat="Server" Text="" />
      <!-- Web DropDownList control, which contains subelements -->
      <asp:DropDownList id=DropDown1 runat="server">
         <asp:ListItem Value="0">0</asp:ListItem>
         <asp:ListItem Value="1">1</asp:ListItem>
         <asp:ListItem Value="2">2</asp:ListItem>
         <asp:ListItem Value="3">3</asp:ListItem>
      <asp:Repeater id=Repeater2 runat="server">
             Company data:
             <asp:Label runat="server"
                 Font-Name="verdana" Font-Size="10pt"
                 Text='<%# Container.DataItem.Name %>' />
             ( <asp:Label runat=server
                   Font-Name="verdana" Font-Size="10pt"
                   Text='<%# Container.DataItem.Ticker %>'/>

      For information about the declarative syntax for a specific Web server control, search in the Index in Help for "Web controls" and choose the name of the control you want to use.

      Note   If the Web Forms Designer cannot render a Web server control correctly, it displays a grey box with the text "Error Creating Control." This often means that the ASP.NET syntax of the control is incorrect — for example, if the
      attribute is missing in a Web server control element, you will see this error. Point to the information icon (y40dxsky.vbwebcontrolserrorinfoicon(en-us,VS.71).gif); a ToolTip is displayed with details about the error.

See Also

ASP.NET Server Controls | Adding Controls to a Web Forms Page Programmatically | Adding HTML Server Controls to a Web Forms Page | Converting HTML Server Controls to HTML Elements | Creating Event Handlers in Web Forms Pages | Setting HTML Server Control Properties Programmatically | Setting ASP.NET Server Control Properties | Web Forms Validation | Referencing Controls in Web Forms Pages