ASP.NET Webserver Controls

Server controls are objects placed on a page with the purpose of read and write data. These objects have a consistent programming model and their properties (attributes) can be accessed programmatically. A Server Control starts with <asp: followed by the object name <asp:textbox . They must contain two other properties, ID which must be unique and runat=”server” which tells the web server to give the control server side processing. They can be self closed by having a forward slash (/) before the ending tag or have a closing tag:

<asp:textbox id=”txt” runat=”server” />
<asp:textbox id=”txt” runat=”server” ></asp:textbox>

After a control is processed by the web server, a standard HTML tag is sent to the browser for displaying. The above example will be rendered as:

<input type=”text” name=”txt” id=”txt” />

Button <asp:button/>

Post back control for form submission.

Properties:    

Id=”btn”
Runat=”server”
Text=”Search”
Enabled=”true/false”

Creates an unique identifier
Sets  the button for server side processing
Displays text on the button
Enables or Disables the button

Example: <asp:button id=”btn” runat=”server” text=”Search”/>

 

Checkbox <asp:checkbox/>

Selection control (multiple selections).

Properties:    

Id=”ck”
Runat=”server”
Text=”Diploma”
Checked=”true/false”

Creates an unique identifier
Sets  the checkbox for server side processing
Displays text on  checkbox
Checks or Uncheck the  checkbox

Example: <asp:checkbox id=”ck” runat=”server” text=”Diploma”/>

 

DropdownList  <asp:dropdownlist>…</asp:dropdownlist>

Single selection control that displays a collection of list items.

Properties:    

Id=”lb”
Runat=”server”
AutoPostBack=”true,false”

Creates an unique identifier
Sets  the button for server side processing
Set auto submission on item selected

Example: <asp:dropdownlist id="countries" runat="server">
                   <asp:listitem Text="Select" Value=""/>
                   <asp:listitem Text="UK" Value="UK"/>
                   <asp:listitem Text="Ireland" Value="Ireland"/>

               </asp:dropdownlist>

 

 

 

 

Hyperlink <asp:hyperlink/>

Navigation control to move from page to page.

Properties:    

Id=”hl”
Runat=”server”
NavigateURL=”controls.aspx”
Text=”Asp.Net Controls”

Creates an unique identifier
Sets  the image for server side processing
Maps the file to link to
Creates the text link

Example: <asp:image id=”img” runat=”server” ImageURL=”ImageName.gif”/>

Image <asp:image/>

Displays image defined as ImageUrl

Properties:    

Id=”img”
Runat=”server”
ImageURL=”hello.gif”
Width=”200”
Height=”200”
ToolTip=”Hello Message”

Creates an unique identifier
Sets  the image for server side processing
Maps the image file to display
Sets Image width
Sets image height
Display text when mouse is over

Example: <asp:image id=”img” runat=”server” ImageURL=”ImageName.gif”/>

 

Label <asp:label/>

Output control used to display text at a specific location on a page.

Properties:    

Id=”msg”
Runat=”server”
Text=”some text”

Creates an unique identifier
Sets  the textbox for server side processing
Displays text inside the box

Example: <asp:label id=”msg” runat=”server” text=”Welcome to ASP.Net”/>

 

Link Button <asp:linkbutton>

Post back control for form submission. It renders as a link.

Properties:    

Id=”lb”
Runat=”server”
Text=”Search”
Enabled=”true/false”

Creates an unique identifier
Sets  the button for server side processing
Displays text on the button
Enables or Disables the button

Example: <asp:linkbutton id=”btn” runat=”server” text=”Search”/>

 

Listbox  <asp:listbox>…</asp:listbox>

Multiple selection control that displays a collection of list items.

Properties:    

Id=”lb”
Runat=”server”
CssClass=”box”
Rows=”Number”
SelectionMode=”single/multiple”

Creates an unique identifier
Sets  the button for server side processing
Sets a Stylesheet class
Sets the visible number of rows
Sets single or multiple selection

Example: <asp:listbox id="countries" runat="server">
                   <asp:listitem Text="UK" Value="UK"/>
                   <asp:listitem Text="Ireland" Value="Ireland"/>

               </asp:lisbox>

 

Panel <asp:panel>…</asp:panel>

Container for other controls.

Properties:    

Id=”pn”
Runat=”server”
Visible=”true/false”

Creates an unique identifier
Sets  the panel for server side processing
Sets its visibility

Example: <asp:panel id="pn" runat="server" visible=”true”>
                   <asp:label id=”msg2” runat=”server” text=”Control inside a panel”/>
               </asp:panel>

 

Radio Button <asp:radiobutton/>

Single selection control belonging to a group.

Properties:    

Id=”lb”
Runat=”server”
CssClass=”box”
Text=”Female”
GroupName=”gender”
Checked=”true/false”

Creates an unique identifier
Sets  the radiobutton for server side processing
Sets a Stylesheet class
Displays text on radiobutton
Sets a group it belongs to
Checks or Uncheck the radiobutton

Example:

<asp:radiobutton id=”rb” runat=”server” GroupName=”gender” text=”Female” checked=”true”/>
               
<asp:radiobutton id=”rb2” runat=”server” text=”Male” />

 

 

Table <asp:table>…</asp:table>

Builds up a HTML table.

Properties:    

Id=”lb”
Runat=”server”
BackColor=”#f6f6da”
Cellspacing=”2”
Cellpadding=”2”
Width=”500”
Height=”500”
HorizontalAlign=”center/right”
GridLines=”both/none/vertical/horizontal”
BorderWidth=”1”

Creates an unique identifier
Sets  the table for server side processing
Sets a background colour
Sets distance between cells
Sets distance around the cells’ contents
Set table width
Sets table height
Sets table alignment
Sets what borders to display
Sets border height

Table Row <asp:tablerow>…</asp:tablerow>

Creates table rows.

Properties:    

BackColor=”#f6f6da”
Width=”500”
Height=”500”
HorizontalAlign=”center/right”

Sets a background colour
Set table row width
Sets table row height
Sets table row alignment

Table Header Cell <asp:tableheadercell>…</asp:tableheadercell>

Creates table heading.

Properties:

BackColor=”#f6f6da”
Width=”500”
Height=”500”
HorizontalAlign=”center/right”
VerticalAlign=”top/bottom”
ColumnSpan=”2”

Sets a background colour
Set table header width
Sets table header height
Sets table header alignment
Sets table header vertical alignment
Merge Columns

Table Cell <asp:tablecell>…</asp:tablecell>

Creates table data.

Properties:    

BackColor=”#f6f6da”
Width=”500”
Height=”500”
HorizontalAlign=”center/right”
VerticalAlign=”top/bottom”
ColumnSpan=”2”
RowSpan=”2”

Sets a background colour
Set table data width
Sets table data height
Sets table data alignment
Sets table data vertical alignment
Merge Columns
Merge Rows

 

Example:

<asp:table id="tbl" runat="server" GridLines="Both" BorderWidth="1"
CellPadding="1" CellSpacing="1" BackColor="#FFFFCC" Width="100" Height="100">
          <asp:tablerow>
                   <asp:tableheadercell>Prices</asp:tableheadercell>
          </asp:tablerow>
          <asp:tablerow>
<asp:tablecell HorizontalAlign="Center" VerticalAlign="Middle" ColumnSpan="1" RowSpan="1">500</asp:tablecell>
          </asp:tablerow>
</asp:table>

 

Text Box <asp:textbox >

Single or multiline textbox for data input.

Properties:    

Id=”txt”
Runat=”server”
MaxLength=”10”
CssClass=”box”
Readonly=”true/false”
Text=”some text”
Columns=”20”
Rows=”3”
TextMode=”Password/MultiLine”

Creates an unique identifier
Sets  the textbox for server side processing
Sets the maximum number of characters allowed
Sets a Stylesheet class
Sets only read capability (contents can’t be changed)
Displays text inside the box
Sets the width of textbox
Sets the number of lines (textarea)
Changes mode to password or textarea

Example:

<asp:textbox id=”txt” runat=”server” columns=”30”/>
<asp:textbox id=”txtpwd” runat=”server” columns=”30” TextMode=”Password”/>
<asp:textbox id=”txtarea” runat=”server” columns=”30” Rows=”3” TextMode=”Multiline”/>