Web Server Controls Objectives: The Syntax For Creating A Web Server Control Is
Web Server Controls Objectives: The Syntax For Creating A Web Server Control Is
OBJECTIVES
4.1 Introduction
Property Description
runat Specifies that the control is a server
control. Must be set to "server"
Text The text to display in the label
ASP.NET Web Control Standard Properties
Properties
The following table describes the properties inherited from the
WebControl class:
Property Description
AccessKey The keyboard key for accessing a
control
BackColor The background color of a control
BorderColor The border color of a control
BorderStyle The border style of a control
BorderWidth The border width of a control
Font The font attributes for the control
ForeColor The foreground color of the
control
Height The height of the control
TabIndex The tab order of the control
ToolTip The text that appears when the
user rests the mouse pointer over a
control
Width The width of the control
Example
<script runat="server">
Sub submit(Sender As Object, e As EventArgs)
label1.Text=txt1.Text
End Sub
</script>
<html>
<body>
<form runat="server">
Write some text:
<asp:TextBox id="txt1" Width="200" runat="server"
/>
<asp:Button id="b1" Text="Copy to Label"
OnClick="submit" runat="server" />
<p><asp:Label id="label1" runat="server" /></p>
</form>
</body>
</html>
Output
Properties
Property Description
Columns The width of the textbox
MaxLength The maximum number of
characters allowed in the textbox
Rows The height of the textbox (only
used if TextMode="Multiline")
runat Specifies that the control is a
server control. Must be set to
"server"
Text The contents of the textbox
TextMode Specifies the behavior mode of a
TextBox control (SingleLine,
MultiLine or Password)
Wrap A Boolean value that indicates
whether the contents of the
textbox should wrap or not
OnTextChangedThe name of the function to be
executed when the text in the
textbox has changed
To Create a TextBox
<asp: TextBox
id = “text1”
columns = “25”
MaxLength=”30”
TextMode=”single line”
runat = server
/>
To Create a TextArea
<asp: TextBox
id = “text1”
columns = “25”
MaxLength=”30”
TextMode=”Multiline”
rows=”7”
runat = server
/>
To Create a Password
<asp: TextBox
id = “text1”
columns = “25”
MaxLength=”30”
TextMode=”password”
runat = server
/>
Example
<script runat="server">
Sub submit(sender As Object, e As EventArgs)
lbl1.Text="Your name is " & txt1.Text
End Sub
</script>
<html>
<body>
<form runat="server">
Enter your name:
<asp:TextBox id="txt1" runat="server" />
<asp:Button OnClick="submit" Text="Submit"
runat="server" />
<p><asp:Label id="lbl1" runat="server" /></p>
</form>
</body>
</html>
In this example we declare one TextBox control, 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 writes
a text to the Label control.
Output
Properties
Property Description
AutoPostBack Specifies whether the form
should be posted immediately
after the Checked property
has changed or not. Default is
false
Checked Specifies whether the check
box is checked or not
runat Specifies that the control is a
server control. Must be set to
"server"
Text The text next to the check
box
TextAlign On which side of the check
box the text should appear
(right or left)
OnCheckedChangedThe name of the function to
be executed when the
Checked property has
changed
Example:
<script runat="server">
Sub Check(sender As Object, e As EventArgs)
if check1.Checked then
work.Text=home.Text
else
work.Text=""
end if
End Sub
</script>
<html>
<body>
<form runat="server">
<p>Home Phone:
<asp:TextBox id="home" runat="server" />
<br />
Work Phone:
<asp:TextBox id="work" runat="server" />
<asp:CheckBox id="check1"
Text="Same as home phone" TextAlign="Right"
AutoPostBack="True" OnCheckedChanged="Check"
runat="server" />
</p>
</form>
</body>
</html>
Output
If the checkbox is checked, the following output is
got
Home Phone:
Work Phone: Same as home phone
If the CheckBox is not checked, then you have the
output as follows:
Home Phone:
Work Phone: Same as home phone
Property Description
AutoPostBack Specifies whether the
form should be posted
immediately after the
index of the selected
item has changed or not
DataTextField A field in the data
source to be displayed
in the drop-down list
DataValueField A field in the data
source that specifies the
value of each selectable
item in the drop-down
list
runat Specifies that the
control is a server
control. Must be set to
"server"
SelectedIndex The index number of
the selected item in a
list
SelectedItem The text of the selected
item in a list
SelectedValue The value of the
selected item in a list
ValidationGroup The group of controls
that is validated when a
Postback occurs
OnSelectedIndexChange The name of the
d function to be executed
when the index of the
selected item has
changed
4.2.4 CheckBoxList
Definition and Usage
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!
Tip: This control supports data binding!
Properties
Property Description
CellPadding The amount of pixels between the
border and the contents of the
table cell
CellSpacing The amount of pixels between
table cells
RepeatColumns The number of columns to use
when displaying the check box
group
RepeatDirectionSpecifies whether the check box
group should be repeated
horizontally or vertically
RepeatLayout The layout of the check box
group
runat Specifies that the control is a
server control. Must be set to
"server"
TextAlign On which side of the check box
the text should appear
Example
script runat="server">
Sub Check(sender As Object, e As EventArgs)
dim i
mess.Text="Selected Item(s):"
for i=0 to check1.Items.Count-1
if check1.Items(i).Selected then
mess.Text+=check1.Items(i).Text + "<br />"
end if
next
End Sub
</script>
<html>
<body>
<form runat="server">
<asp:CheckBoxList id="check1"
AutoPostBack="True"
TextAlign="Right"
OnSelectedIndexChanged="Check"
runat="server">
<asp:ListItem>Item 1</asp:ListItem>
<asp:ListItem>Item 2</asp:ListItem>
<asp:ListItem>Item 3</asp:ListItem>
<asp:ListItem>Item 4</asp:ListItem>
<asp:ListItem>Item 5</asp:ListItem>
<asp:ListItem>Item 6</asp:ListItem>
</asp:CheckBoxList>
<br />
<asp:label id="mess" runat="server"/>
</form>
</body>
</html>
Output
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Selected Item(s):
Item 4
Item 5
Item 6
Properties
Property Description
AutoPostBack A Boolean value that specifies
whether the form should be
posted immediately after the
Checked property has changed
or not. Default is false
Checked A Boolean value that specifies
whether the radio button is
checked or not
id A unique id for the control
GroupName The name of the group to which
this radio button belongs
OnCheckedChangedThe name of the function to be
executed when the Checked
property has changed
runat Specifies that the control is a
server control. Must be set to
"server"
Text The text next to the radio button
TextAlign On which side of the radio
button the text should appear
(right or left)
Example:
<script runat="server">
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
</script>
<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>
Output
Select your favorite color:
Red
Green
Blue
Properties
Property Description
CellPadding The amount of pixels between
the border and the contents of
the table cell
CellSpacing The amount of pixels between
table cells
RepeatColumns The number of columns to use
when displaying the radio button
group
RepeatDirectionSpecifies whether the radio
button group should be repeated
horizontally or vertically
RepeatLayout The layout of the radio button
group
runat Specifies that the control is a
server control. Must be set to
"server"
TextAlign On which side of the radio
button the text should appear
Example
<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>
Output
Item 1
Item 2
Item 3
Item 4
Property Description
SelectedIndex The index of a selected
item
OnSelectedIndexChange The name of the
d function to be executed
when the index of the
selected item has
changed
runat Specifies that the
control is a server
control. Must be set to
"server"
<script runat="server">
Sub submit(sender As Object, e As EventArgs)
mess.Text="You selected " &
drop1.SelectedItem.Text
End Sub
</script>
<html>
<body>
<form runat="server">
<asp:DropDownList id="drop1" runat="server">
<asp:ListItem>Item 1</asp:ListItem>
<asp:ListItem>Item 2</asp:ListItem>
<asp:ListItem>Item 3</asp:ListItem>
<asp:ListItem>Item 4</asp:ListItem>
<asp:ListItem>Item 5</asp:ListItem>
<asp:ListItem>Item 6</asp:ListItem>
</asp:DropDownList>
<asp:Button Text="Submit" OnClick="submit"
runat="server"/>
<p><asp:label id="mess" runat="server"/></p>
</form>
</body>
</html>
Output
Properties
Property Description
Rows The number of rows displayed in
the list
SelectionModeAllows single or multiple
selections
Example:
<script runat="server">
Sub submit(Sender As Object,e As EventArgs)
mess.Text="You selected " &
drop1.SelectedItem.Text
End Sub
</script>
<html>
<body>
<form runat="server">
<asp:ListBox id="drop1" rows="3" 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:ListItem>Item 5</asp:ListItem>
<asp:ListItem>Item 6</asp:ListItem>
</asp:ListBox>
<asp:Button Text="Submit" OnClick="submit"
runat="server" />
<p><asp:label id="mess" runat="server" /></p>
</form>
</body>
</html>
Output
4.2.9 Button
Definition and Usage
The Button control is used to display a push button.
The push button may be a submit button or a
command button. By default, this control is a submit
button.
A submit button does not have a command name and
it posts the Web page back to the server when it is
clicked. It is possible to write an event handler to
control the actions performed when the submit button
is clicked.
A command button has a command name and allows
you to create multiple Button controls on a page. It is
possible to write an event handler to control the
actions performed when the command button is
clicked.
<asp:Button
Id=”submitbut”
Text=”Text on Button”
OnClick = “ProcedureName”
Runat=”server”
/>
<asp:Button
Id=”commandbut”
Text=”Text on Button”
CommandName=”Passed to Procedure”
CommandArgument=”Passed to Procedure”
onCommand=”Procedurename”
Runat=”server”
/>
<script runat="server">
Sub submit(Source As Object, e As EventArgs)
button1.Text="You clicked me!"
End Sub
</script>
<html>
<body>
<form runat="server">
<asp:Button id="button1" Text="Click me!"
runat="server" OnClick="submit" />
</form>
</body>
</html>
4.2.10 LinkButton
Definition and Usage
The LinkButton control is used to create a hyperlink
button.
<asp: LinkButton
Id= “MyLinkButton”
Runat=”server”
Text=”Click Here”
onClick=”SubmitBtnClick”
/>
Note: This control looks like a HyperLink control but
has the same functionality as the Button control.
Example:
<script runat="server">
Sub lblClick(sender As Object, e As EventArgs)
Label1.Text="You clicked the LinkButton control"
End Sub
</script>
<html>
<body>
<form runat="server">
<asp:LinkButton Text="Click me!"
OnClick="lblClick" runat="server" />
<p><asp:Label id="Label1" runat="server" /></p>
</form>
</body>
</html>
Output
Click me!
You clicked the LinkButton control
4.2.11 ImageButton
Definition and Usage
The ImageButton control is used to display a
clickable image.
To create a submit type of button or a command
type if button through the ImageButton Control
The control differs from the Button control in
two important ways
First the control displays an image instead of
a standard button.
Second, when you create a submit type of
image button, you can also retrieve the
position on the image where the visitor
clicked
<asp: ImageButton
Id=IB1
AlternateText=”Press Me”
ImageURL =”c:\x.gif”
ImageAlign=”Middle”
onClick=”submitbtn_click”
runat=”server”
/>
Example:
<script runat="server">
Sub getCoordinates(sender As Object, e As
ImageClickEventArgs)
mess.Text="Coordinates: " & e.x & ", " & e.y
End Sub
</script>
<html>
<body>
<form runat="server">
<p>Click on the image:</p>
<asp:ImageButton
runat="server"
ImageUrl="smiley.gif"
OnClick="getCoordinates"/>
<p><asp:label id="mess" runat="server"/></p>
</form>
</body>
</html>
Output
Click on the image:
Coordinates: 8, 13
4.2.12 HyperLink
This control allows you to place an Anchor HTML
tag into you ASP.NET page. This control is useful
when you to display a link to a site that comes from a
database where the text and the URL are not fixed
Usage:
<asp: HyperLink
Id=”hyp2”
Runat=”server”
Text=”Click to go to google”
ImageURl= “c:\x.gif”
Target = “new”
NavigateURL=http://www.google.com/>
Example
<html>
<body>
<form runat="server">
<asp:HyperLink
ImageUrl="/banners/w6.gif"
NavigateUrl="http://www.MOP.org"
Text="Visit MOP"
Target="_blank"
runat="server" />
</form>
</body>
</html>
4.2.13 Image
The image control is used to display an image in the
page.
<asp:Image runat=”server” ImageUrl =
“gifcon.gif”></asp:Image>
4.2.14 Table
Definition and Usage
The Table control is used in conjunction with the
TableCell control and the TableRow control to create
a table.
Properties
Property Description
BackImageUrl A URL to an image to use as an
background for the table
Caption The caption of the table
CaptionAlign The alignment of the caption
text
CellPadding The space between the cell
walls and contents
CellSpacing The space between cells
GridLines The gridline format in the table
HorizontalAlignThe horizontal alignment of the
table in the page
Rows A collection of rows in the
Table
runat Specifies that the control is a
server control. Must be set to
"server"
<html>
<body>
<form runat=server>
<asp:Table runat="server" CellPadding="5"
GridLines="horizontal" HorizontalAlign="Center">
<asp:TableRow>
<asp:TableCell>1</asp:TableCell>
<asp:TableCell>2</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>3</asp:TableCell>
<asp:TableCell>4</asp:TableCell>
</asp:TableRow>
</asp:Table>
</form>
</body>
</html>
Output of the Table
1 2
3 4