How to: Add Server Controls to an ASP.NET Web Page Using ASP.NET Syntax

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

Note

For background information about controls for ASP.NET Web pages, see ASP.NET Web Server Controls Overview

To add a control declaratively

1. If you are in a visual designer, switch to source-editing view.

2. Type the element representing the control into the .aspx file. 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 GridView, FormView, DetailsView, Repeater, or DataList 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 Server Control Declarative Syntax, HtmlImage Server Control Declarative Syntax, and HtmlButton Server Control Declarative Syntax).

   • 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="Textbox2" 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:DropDownList>
     
     <asp:Repeater id="Repeater2" runat="server">
        <HeaderTemplate>
            Company data:
        </HeaderTemplate>
        <ItemTemplate>
            <asp:Label ID="Label1" runat="server" 
                  Font-Names="verdana" Font-Size="10pt"
                  Text='<%# Eval("Name") %>' />
            ( <asp:Label ID="Label2" runat="server"
                  Font-Names="verdana" Font-Size="10pt"
                  Text='<%# Eval("Ticker") %>'/>
             )
        </ItemTemplate>
        <SeparatorTemplate>
            ,
        </SeparatorTemplate>
     </asp:Repeater>
     

     <!-- Textbox Web server control -->
     <asp:textbox id="TextBox1" runat="Server" Text=""></asp:textbox>
     
     <!-- Same, but with self-closing element -->
     <asp:textbox id="Textbox2" 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:DropDownList>
     
     <asp:Repeater id="Repeater2" runat="server">
        <HeaderTemplate>
            Company data:
        </HeaderTemplate>
        <ItemTemplate>
            <asp:Label ID="Label1" runat="server" 
                  Font-Names="verdana" Font-Size="10pt"
                  Text='<%# Eval("Name") %>' />
            ( <asp:Label ID="Label2" runat="server"
                  Font-Names="verdana" Font-Size="10pt"
                  Text='<%# Eval("Ticker") %>'/>
             )
        </ItemTemplate>
        <SeparatorTemplate>
            ,
        </SeparatorTemplate>
     </asp:Repeater>
     

     For information about the declarative syntax for a specific Web server control, see Web Server Control Syntax.

     Note

     If the page designer cannot render a Web server control correctly, it displays a gray box with the text "Error Creating Control." This often means that the ASP.NET syntax of the control is incorrect — for example, if the runat="server" attribute is missing in a Web server control element, you will see this error.

See Also

Tasks

How to: Set ASP.NET Server Control Style Properties Programmatically

How to: Set ASP.NET Server Control Style Properties Using ASP.NET Syntax

How to: Set HTML Server Control Properties Programmatically

Concepts

ASP.NET Web Server Controls Overview