Web Server Controls

Web server controls are special ASP.NET tags understood by the server. Like HTML server controls, Web server controls are also created on the server and they require a runat="server" attribute to work. Web server controls do not necessarily map to any existing HTML elements and they may represent more complex elements. The syntax for creating a Web server control is:
<asp:control_name id="id" runat="server" />

Web Server Control AdRotator Button Calendar CalendarDay CheckBox CheckBoxList DataGrid DataList DropDownList HyperLink Image ImageButton Label LinkButton ListBox ListItem Literal Panel PlaceHolder RadioButton RadioButtonList BulletedList

Description Displays a sequence of images Displays a push button Displays a calendar A day in a calendar control Displays a check box Creates a multi-selection check box group Displays fields of a data source in a grid Displays items from a data source by using templates Creates a drop-down list Creates a hyperlink Displays an image Displays a clickable image

Displays static content which is programmable (lets you apply styles to content) Creates a hyperlink button Creates a single- or multi-selection drop-down list Creates an item in a list

Displays static content which is programmable(does not let you apply s to its content) Provides a container for other controls Reserves space for controls added by code Creates a radio button Creates a group of radio buttons Creates a list in bullet format

Repeater Style Table TableCell TableRow TextBox Xml common /standard Properties

Displays a repeated list of items bound to the control Sets the style of controls Creates a table Creates a table cell Creates a table row Creates a text box Displays an XML file or the results of an XSL transform

AccessKey, Attributes, BackColor, BorderColor, BorderStyle, BorderWidth, CssClass, Enabled, Font, EnableTheming, ForeColor, Height, IsEnabled, SkinID, Style, TabIndex, ToolTip, Width ------------------------------------------------------------------------------------------

AdRotator Control
The AdRotator control is used to display a sequence of ad images. This control uses an XML file to store the ad information. The XML file must begin and end with an <Advertisements> tag. Inside the <Advertisements> tag there may be several <Ad> tags which defines each ad. The predefined elements inside the <Ad> tag are listed below: Element <ImageUrl> <NavigateUrl> <AlternateText> <Keyword> <Impressions> Properties Property AdvertisementFile AlternateTextField ImageUrlField KeywordFilter Description The path to the XML file that contains ad information A data field to use instead of the Alt text for an advertisement A data field to use instead of the ImageURL attribute for an advertisement A filter to limit ads after categories Description Optional. The path to the image file Optional. The URL to link to if the user clicks the ad Optional. An alternate text for the image Optional. A category for the ad Optional. The display rates in percent of the hits

NavigateUrlField runat Target

A data field to use instead of the NavigateUrl attribute for an advertisement Specifies that the control is a server control. Must be set to "server" Where to open the URL

-------------------------------------------------------------------------------------------------------------

Button Control
The Button control is used to display a push button. it posts the Web page back to the server when it is clicked. It may be a submit button (default) or a command button. By default, this control is a submit button. A submit button does not have a command name. A command button allows you to create multiple Button controls on a page. syntax:
<asp:Button id="button1" Text="Submit" runat="server" />

Properties Property CausesValidation CommandArgument CommandName OnClientClick PostBackUrl Runat Text ValidationGroup

Description Specifies if a page is validated when a Button control is clicked. It has two value: True or Additional information about the command to perform The command associated with the Command event The name of the function to be called when the button is clicked The URL of the page to post to from the current page when the Button control is clicked Specifies that the control is a server control. Must be set to "server". The text on the button The group of controls for which the Button control causes validation when it posts back t server

Example
Declare one TextBox control, one Button control, and one Label control in an .aspx file. When the submit button is clicked, the Button1_click subroutine is executed.

default.aspx <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <html > <head runat="server"> </head> <body> <form id="form1" runat="server"> <div> &nbsp;<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>&nbsp; <asp:Button ID="Button1" runat="server" Text="Button" /> <br /> </div> </form> </body> </html> default.aspx.vb Partial Class _Default Inherits System.Web.UI.Page Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) HandlesButton1.Click MsgBox ("you enter :: " & TextBox1.Text) End Sub End Class

Calendar Control
The Calendar control display a calendar in the browser. It displays a one-month calendar from which user can select dates. Syntax:
<asp:Calendar ID="calendar1" runat="server" />

Properties
Property Caption CaptionAlign Description display caption of the calendar alignment of the caption text. Possible values :
y y y y y

Not set Top Bottom Left Right

CellPadding CellSpacing DayHeaderStyle DayNameFormat

The space (in pixel) between the cell walls and contents. The space ( in pixels) between cells The style for displaying the names of the days The format for displaying the names of the days possible values are: y Full y Short y FirstTwoLetters y Shortest

DayStyle FirstDayOfWeek NextMonthText NextPrevFormat NextPrevStyle OtherMonthDayStyle PrevMonthText runat SelectedDate SelectedDates SelectedDayStyle SelectionMode

The style for displaying days set first day of week The text displayed for the next month link The format of the next and previous month links The style for displaying next and previous month links The style for displaying days that are not in the current month The text displayed for the previous month link Specifies that the control is a server control. Must be set to "server" store selected date The selected dates The style for selected days How a user is allowed to select dates

SelectMonthText SelectorStyle SelectWeekText ShowDayHeader ShowGridLines ShowNextPrevMonth ShowTitle TitleFormat TitleStyle TodayDayStyle TodaysDate UseAccessibleHeader VisibleDate WeekendDayStyle OnDayRender OnSelectionChanged OnVisibleMonthChanged

The text displayed for the month selection link The style for the month and weeks selection links The text displayed for the week selection link A Boolean value that specifies whether the days of the week header should be sho A Boolean value that specifies whether the grid lines between days should be sho A Boolean value that specifies whether the next and previous month links should A Boolean value that specifies whether the title of the calendar should be shown The format for the title of the calendar The style of the title of the calendar The style for today's date Today's date Specifying whether to use the <th> element for the day headers instead of the <td The date that specifies the month that is currently visible in the calendar The style for weekends The name of the function to be executed when when each day cell is created The name of the function to be executed when the user selects a day, week, or mo The name of the function to be executed when the user navigates to a different m

Examples
Declare a Calendar control in an .aspx file. The days are displayed with full names in yellow, the weekends are displayed in green on a yellow background, and the current date is displayed with a pink background. <html> <body> <form id="Form1" runat="server"> <asp:Calendar ID="Calendar1" runat="server" Caption="Caleneder" NextMonthText="->" PrevMonthText="<-"> <WeekendDayStyle BackColor="Yellow" ForeColor="Green" /> <DayHeaderStyle ForeColor="Red" /> <TodayDayStyle BackColor="Pink" /> </asp:Calendar> </form>

</body> </html>

H.W.
Display calendar control in various format and display selected date in textbox in various date format.

- -

checkbox control
The CheckBox control is used to display a check box. Syntax: <asp:CheckBox ID="CheckBox1" runat="server" /> Properties Property AutoPostBack CausesValidation Checked InputAttributes LabelAttributes runat Text TextAlign ValidationGroup OnCheckedChanged Description

Specifies whether the form should be posted immediately after the Checked property not. Default is false Specifies if a page is validated when a Button control is clicked Specifies whether the check box is checked or not Attribute names and values used for the Input element for the CheckBox control Attribute names and values used for the Label element for the CheckBox control Specifies that the control is a server control. Must be set to "server" The text next to the check box On which side of the check box the text should appear (right or left) The name of the function to be executed when the Checked property has changed

Group of controls for which the Checkbox control causes validation when it posts ba

Examples
Declare two TextBox controls and one CheckBox control in an .aspx file. Write an event handler for the CheckedChanged event to copy the contents of a text box containing the home address into a text box that contains the communication address.

Default.aspx:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<html> <body> <form id="Form1" runat="server"> <p>Permenant address: <asp:TextBox id="txthome" runat="server" /> <br /> Communication address: <asp:TextBox id="txtcomm" runat="server" /> <asp:CheckBox id="check1" Text="Same as permanent address" TextAlign="Right" AutoPostBack="True" OnCheckedChanged="Check" runat="server" /> </p> </form> </body> </html>
defaul.aspx.vb

Partial Class _Default Inherits System.Web.UI.Page

Protected Sub Check(ByVal sender As Object, ByVal e As System.EventArgs) Handles check1. CheckedChanged If check1.Checked Then txtcomm.Text = txthome.Text Else txtcomm.Text = "" End If End Sub End Class
-------------------------------------------------------------------------------

The CheckBoxList The CheckBoxList control is used to create a multi-selection check box group. Each selectable item in a CheckBoxList control is defined by a ListItem element. This control supports data binding. Properties Property CellPadding CellSpacing RepeatColumns RepeatDirection RepeatLayout runat TextAlign Description The amount of pixels between the border and the contents of the table cell The amount of pixels between table cells The number of columns to use when displaying the check box group Specifies whether the check box group should be repeated horizontally or vertically The layout of the check box group Specifies that the control is a server control. Must be set to "server" On which side of the check box the text should appear

Example
Declare one CheckBoxList control in an .aspx file and write an event handler for the SelectedIndexChanged event. The selectable list contains five check boxes. When a user checks one of the boxes, the page is immediately posted back to the server, and the Check subroutine is

executed. The subroutine tests each item's Selected property. The selected items are then displayed in the Label control. Default.aspx <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_ Default" %> <html> <body> <form id="Form1" runat="server"> <asp:CheckBoxList id="check1" AutoPostBack="True" TextAlign="Right" OnSelectedIndexChanged="Checkd" runat="server"> <asp:ListItem>Cricket </asp:ListItem> <asp:ListItem>Magic </asp:ListItem> <asp:ListItem>Origami </asp:ListItem> <asp:ListItem>Thread art </asp:ListItem> <asp:ListItem>Chess </asp:ListItem> </asp:CheckBoxList> <br /> <asp:label id="label1" runat="server"/> </form> </body> </html>

Default.aspx.vb Partial Class _Default Inherits System.Web.UI.Page Protected Sub Checkd(ByVal sender As Object, ByVal e As System.EventArgs) Dim i label1.Text = "<p>Selected Hobby :</p>" For i = 0 To check1.Items.Count - 1 If check1.Items(i).Selected Then label1.Text += check1.Items(i).Text + "<br />" End If Next End Sub

---------------------------------------------------------------------------------

DropDownList Control
The DropDownList control is used to create a drop-down list. Each item in a DropDownList control is defined by a ListItem element. This control supports data binding. Properties Property SelectedIndex OnSelectedIndexChanged runat
Example: Default.aspx:

Description It return index of a selected item Specifies that the control is a server control. Must be set to "server"

name of the function to be executed when the index of the selected item has cha

Sub button_click(sender As Object, e As EventArgs) Label1.Text="Your selected Hobby: " & drop1.SelectedItem.Text End Sub

default.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_ Default" %>

<html > <body> <form runat="server"> <asp:DropDownList id="drop1" runat="server"> <asp:ListItem>Cricket </asp:ListItem> <asp:ListItem>Magic </asp:ListItem> <asp:ListItem>Origami </asp:ListItem> <asp:ListItem>Thread art </asp:ListItem> <asp:ListItem>Chess </asp:ListItem>

</asp:DropDownList>

<asp:Button Text="Submit" OnClick="button_click"

runat="server"/>
<p><asp:label id="label1"

runat="server"/>
</p> </form> </body>

</html> ------------------------------------------------------------------------------

HyperLink Control
The HyperLink control is used to create a hyperlink. Properties Property ImageUrl NavigateUrl runat Target Text Description The URL of the image to display for the link The target URL of the link Specifies that the control is a server control. Must be set to "server" The target frame of the URL The text to display for the link

Examples
In this example we declare a HyperLink control in an .aspx file.
<html > <body> <form runat="server"> <asp:HyperLink ImageUrl= ~/App_Data/fish.JPG" NavigateUrl="http://www.Google.com" Text="Visit google" Target="_blank" runat="server" /> </form> </body> </html> ------------------------------------------------------------------------

Image Control
The Image control is used to display an image. Properties Property AlternateText Description Text to display in place of image, if image is not available.

DescriptionUrl

The location to a detailed description for the image

GenerateEmptyAlternateText Specifies whether or not the control creates an empty string as an alternate text ImageAlign ImageUrl runat Specifies the alignment of the image in relation to other elements on the web page. The URL of the image to display for the link Specifies that the control is a server control. Must be set to "server"

Examples
In this example we declare an Image control in an .aspx file.
<html > <body> <form runat="server"> <asp:Image runat="server" AlternateText="google" ImageUrl= ~/App_Data/fish.JPG "/> </form> </body> </html> ----------------------------------------------------------------------------------------

ImageButton Control
The ImageButton control is used to display a clickable image.

Properties
Property CausesValidation CommandArgument CommandName GenerateEmptyAlternateText OnClientClick PostBackUrl runat Description Specifies if a page is validated when an ImageButton control is clicked Additional information about the command to perform The command associated with the Command event The name of the function to be executed when the image is clicked Specifies that the control is a server control. Must be set to "server"

Specifies whether or not the control creates an empty string as an alternate te

The URL of the page to post to from the current page when the ImageButton

TagKey ValidationGroup

The group of controls for which the ImageButton control causes validation w the server

The properties of the Image control can also be used on the ImageButton control. When image is clicked, actual location of mouse in image is passed. The position of mouse is recorded in pixels, and origin (0,0) is upper-left corner of the image.

Example
Declare one ImageButton control and one Label control in an .aspx file. When the user clicks on the image, the coordinate is executed. It display coordinate.
Default.aspx Sub Coordinate(sender As Object, e As ImageClickEventArgs) Label1.Text="Coordinates value : " & e.x & ", " & e.y End Sub default.aspx.vb

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_ Default" %>

<html > <body> <form runat="server"> <p>Click on the image:</p> <asp:ImageButton runat="server" ImageUrl="fish.jpg" OnClick="Coordinate"/> <p> <asp:label id="Label1" runat="server"/></p> </form> </body> </html> ----------------------------------------------------------------------------------------

Label Control
The Label control is used to display text on a page. The text is programmable. You can apply styles to its content

Properties Property runat Text Description Specifies that the control is a server control. Must be set to "server" The text to display in the label

Example
Declare one Label control, one TextBox control, and one Button control in an .aspx file. When the user clicks on the button, the button_click is executed. It display content of text box into label. Default.aspx.vb
Sub button_click(Sender As Object, e As EventArgs) label1.Text = txt1.Text End Sub Default.aspx.vb

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_ Default" %>

<html > <body> <form runat="server"> Type text in Box: <asp:TextBox id="text1" Width="200"

runat="server" /> <asp:Button id="button1"

Text="Display on Label" OnClick="button_click" runat="server" />

<p> <asp:Label id="label1" runat="server" /></p> </form> </body> </html> -----------------------------------------------------------------------------------

ListBox Control
The ListBox control is used to create a single- or multi-selection drop-down list. Each item in a ListBox control is defined by a ListItem element. This control supports data binding. Properties Property Rows SelectionMode Description The number of rows displayed in the list Allows single or multiple selections. Its value is either single or multiple.

ListControl Standard Properties AppendDataBoundItems, AutoPostBack, CausesValidation, DataTextField, DataTextFormatString, DataValueField, Items, runat, SelectedIndex, SelectedItem, SelectedValue, TagKey, Text, ValidationGroup, OnSelectedIndexChanged The ListControl control covers all the base functions for list controls. Controls that inherits from this control include the CheckBoxList, DropDownList, ListBox, and RadioButtonList controls.

Example
Here we declare one ListBox control in an .aspx file. When button is clicked, it display selected item, in a Label control.
Default.aspx.vb

Sub Display(Sender As Object,e As EventArgs) Label1.Text="Your hobby is :" & list1.SelectedItem.Text End Sub <html> <body> <form runat="server"> <asp:ListBox id="list1" runat="server">

<asp:ListItem>Cricket </asp:ListItem> <asp:ListItem>Magic </asp:ListItem> <asp:ListItem>Origami </asp:ListItem> <asp:ListItem>Thread art </asp:ListItem>

<asp:ListItem>Chess </asp:ListItem> </asp:ListBox> <asp:Button Text="Display" OnClick="display" runat="server" /> <p><asp:label id="label1" runat="server" /></p> </form> </body> </html> -----------------------------------------------------------------------------------

ListItem Control
The ListItem control creates an item in a list. This control is used with the list controls such as <asp:ListBox>, <asp:RadioButtonList> and <asp:BulletedList>

Syntax
<asp:ListItem Enabled="True|False" Selected="True|False" Text="label" Value="value" />

Properties
Property Attributes Enabled Selected Text Value Description Optional. A collection of attribute name and value pairs for the ListItem that are not directly supported by the class Optional. Specifies if the item is enabled or disabled Optional. Specifies whether or not the item is selected Optional. The text displayed in the ListItem Optional. The value of the the ListItem.

It is possible to use the Text or Value properties and the inner HTML text to set the text displayed for an item in the list.
<asp:ListItem Value="value1" Text="Text1"> Text </asp:ListItem>

ListItems with different properties in ListBox This example shows a ListBox control with some ListItems in an .aspx file. The items in the list uses different properties to show the ListItem text.

<html > <body> <form runat="server"> <asp:ListBox runat="server"> <asp:ListItem Text="Text1" /> <asp:ListItem Value="Text3" Text="Text1">Text2</asp:ListItem> <asp:ListItem Value="Text3" /> </asp:ListBox> </form> </body> </html>

ListItem disabled in ListBox This example shows a ListBox control with one of the ListItems disabled.
<html > <body> <form runat="server">

<asp:ListBox runat="server"> <asp:ListItem Text="Item1" /> <asp:ListItem Text="Item2" /> <asp:ListItem Text="Item3" /> <asp:ListItem Text="Item4" enabled="False"/> </asp:ListBox>

</form> </body> </html>

ListItem selected in RadioButtonList This example shows a RadioButtonList control with one of the ListItems selected.
<html > <body> <form runat="server"> <asp:RadioButtonList runat="server"> <asp:ListItem Text="Item1" /> <asp:ListItem Text="Item2" /> <asp:ListItem Text="Item3" />

<asp:ListItem Text="Item4" selected="True"/> </asp:RadioButtonList>

</form> </body> </html> -------------------------------------------------------------------

TextBox Control
The TextBox control is used to create a text box where the user can input text. Properties Property AutoCompleteType AutoPostBack CausesValidation Columns MaxLength ReadOnly Rows runat TagKey Text TextMode ValidationGroup Wrap OnTextChanged The contents of the textbox Specifies the behavior mode of a TextBox control (SingleLine, MultiLine or Password) The group of controls that is validated when a Postback occurs A Boolean value that indicates whether the contents of the textbox should wrap or not The name of the function to be executed when the text in the textbox has changed Description Specifies the AutoComplete behavior of a TextBox specifies whether the control is automatically posted back to the server when the contents change or not. Default is false Specifies if a page is validated when a Postback occurs The width of the textbox The maximum number of characters allowed in the textbox Specifies whether or not the text in the text box can be changed The height of the textbox (only used if TextMode="Multiline") Specifies that the control is a server control. Must be set to "server"

-----------------------------------------------------------------

RadioButton Control
The RadioButton control is used to display a radio button. To create a set of radio buttons using data binding, use the RadioButtonList control!

Properties Property AutoPostBack Checked id GroupName OnCheckedChanged runat Text TextAlign Description

A Boolean value that specifies whether the form should be posted immediately afte has changed or not. Default is false A Boolean value that specifies whether the radio button is checked or not A unique id for the control The name of the group to which this radio button belongs The name of the function to be executed when the Checked property has changed Specifies that the control is a server control. Must be set to "server" The text next to the radio button On which side of the radio button the text should appear (right or left)

Example
In this example we declare three RadioButton controls, one Button control, and one Label control in an .aspx file. When the submit button is triggered, the submit subroutine is executed. The submit subroutine may respond in three ways: if the radiobutton with id="red" is selected, the server sends the message "You selected Red" to the Label control. If the radiobutton with id="green" is selected, the server sends the message "You selected Green" to the Label control. If the radiobutton with id="green" is selected, the server sends the message "You selected Blue" to the Label control.
Default.aspx.vb Sub submit(Sender As Object, e As EventArgs)

if red.Checked then
Label1.Text="You selected " & red.Text elseIf green.Checked then Label1.Text="You selected " & green.Text elseIf blue.Checked then Label1.Text="You selected " & blue.Text end if

End Sub

Default.aspx

<html> <body> <form runat="server"> Select your favorite color: <br /> <asp:RadioButton id="red" Text="Red" Checked="True" GroupName="colors" runat="server"/> <br /> <asp:RadioButton id="green" Text="Green" GroupName="colors" runat="server"/> <br /> <asp:RadioButton id="blue" Text="Blue" GroupName="colors" runat="server"/> <br /> <asp:Button text="Submit" OnClick="submit" runat="server"/> <p><asp:Label id="Label1" runat="server"/></p> </form> </body> </html> --------------------------------------------------------------------

RadioButtonList Control
The RadioButtonList control is used to create a group of radio buttons. Each selectable item in a RadioButtonList control is defined by a ListItem element! This control supports data binding

Properties
Property CellPadding CellSpacing RepeatColumns RepeatDirection RepeatLayout runat TextAlign Description The amount of pixels between the border and the contents of the table cell The amount of pixels between table cells The number of columns to use when displaying the radio button group Specifies whether the radio button group should be repeated horizontally or vertically The layout of the radio button group Specifies that the control is a server control. Must be set to "server" On which side of the radio button the text should appear

ListControl Standard Properties

AppendDataBoundItems, AutoPostBack, CausesValidation, DataTextField, DataTextFormatString, DataValueField, Items, runat, SelectedIndex, SelectedItem, SelectedValue, TagKey, Text, ValidationGroup, OnSelectedIndexChanged The ListControl control covers all the base functions for list controls. Controls that inherits from this control include the CheckBoxList, DropDownList, ListBox, and RadioButtonList controls.

Examples
In this example we declare one RadioButtonList control, one Button control, and one Label control in an .aspx file. Then we create an event handler for the Click event which displays some text and the selected item, in a Label control.
<script runat="server"> Sub submit(sender As Object, e As EventArgs) label1.Text="You selected " & radiolist1.SelectedItem.Text End Sub </script> <html> <body> <form runat="server"> <asp:RadioButtonList id="radiolist1" runat="server"> <asp:ListItem selected="true">Item 1</asp:ListItem> <asp:ListItem>Item 2</asp:ListItem> <asp:ListItem>Item 3</asp:ListItem> <asp:ListItem>Item 4</asp:ListItem> </asp:RadioButtonList> <br /> <asp:Button text="Submit" OnClick="submit" runat="server"/> <p><asp:Label id="Label1" runat="server"/></p> </form> </body> </html>

-----------------------------------------------------------------------------