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

JavaScript Editor jscript editor     Web designer 



Main Page

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

NoteNote

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 Control, and HtmlButton Control).

    • Control properties are declared as attributes.

      The following examples show typical declarations for Web server controls:

      Visual BasicВ CopyCode imageCopy Code
      <!-- 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>
      
      C#В CopyCode imageCopy Code
      <!-- 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.

      NoteNote

      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



JavaScript Editor jscript editor     Web designer