Scribd
Upload
113 views

Web Server Controls Objectives: The Syntax For Creating A Web Server Control Is

This document discusses web server controls in ASP.NET. It introduces web server controls and their advantages over HTML controls. The main types of web server controls are described, including intrinsic, list-bound, rich and validation controls. Intrinsic controls like labels, textboxes and checkboxes are then explained in detail, including their properties and examples of use. List controls are also covered, along with specific details on checkbox lists.

Uploaded by

Ayushi Khatod
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
113 views

Web Server Controls Objectives: The Syntax For Creating A Web Server Control Is

This document discusses web server controls in ASP.NET. It introduces web server controls and their advantages over HTML controls. The main types of web server controls are described, including intrinsic, list-bound, rich and validation controls. Intrinsic controls like labels, textboxes and checkboxes are then explained in detail, including their properties and examples of use. List controls are also covered, along with specific details on checkbox lists.

Uploaded by

Ayushi Khatod
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 36

CHAPTER 4

WEB SERVER CONTROLS

OBJECTIVES

 To simplify the nomenclature of a control


 To get knowledge about various types of
controls
 To learn the usage of the control with their
associated properties

4.1 Introduction

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.
The syntax for creating a Web server control is:

<asp:control_name id="some_id" runat="server" />


Need for Web Server Control
Since HTML controls can be used server side, we
might question the need for another set of controls
that provide similar functionality. The idea with Web
controls is that it simplifies the nomenclature of a
control. Controls that overlapped in their
functionality have been reduced to a single control.
For example, consider the three input controls in the
following:

<input id=”Name” type=”text” size=40


runat=server>
<input id=”Password” type=”Password” size=40
runat=server>
<TextArea id = “TA” cols=”40” row=”4”
runat=server>

Each of these controls are used for accepting input


from the user, however, there is no consistency. Web
Controls provide a more logical solution.

<asp:TextBox id=”Text1” runat=”server”/>


<asp:TextBox id=”Text2” TextMode=”Password”
runat=”server”/>
<asp:TextBox id=”Text3” TextMode=”Multiline”
rows=”4” runat=”server”/>

Now one control provides the functionality of three.


Web Controls are of the following types:

Intrinsic controls: The rationalized HTML


controls like Text Boxes, Drop Down Lists, etc
that start with asp:prefix.

ListBound controls: Controls that simplify the


task of generating Html for a repeating data
source. These are controls like the DataGrid,
DataList, Repeater and DataReader. (This contol
is dealt in Chapter 6)

Rich controls : These consist of the Calendar


and AdRotator. The AdRotator displays rotating
advertisements

Validation Controls: These include controls


such as Comopare Validator, Range Validator,
Required Field Validator, Regular expression
validator, Custom Validator and Validation
summary. (These controls are dealt in Chapter 5)

4.2 INTRINSIC CONTROLS


4.2.1 Label Control
Definition and Usage
The Label control is used to display text on a page.
The text is programmable.
Properties

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

In this example given below, we declare one Label


control, one TextBox control, and one Button control
in an .aspx file. When the user clicks on the button,
the submit subroutine is executed. The subroutine
copies the content of the TextBox control to the
Label control.

<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

Write some text:


Happy 2008

4.2.2 TextBox Control

Definition and Usage


The TextBox control is used to create a text box
where the user can input text.

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
/>

By default, if textmode is not specified, a textbox will


be created

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

Enter your name:


Your name is Meena
4.2.3 CheckBox
Definition and Usage
The CheckBox control is used to display a check box.

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

ListControl Standard Properties


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.
Definition and Usage
The ListControl class allows you to specify the
source of the data to populate the list control.
Properties

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

4.2.5 Radio Button


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

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

You selected Red


4.2.6 RadioButton List
Definition and Usage
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!
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 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

You selected Item 1


4.2.7 DropDown List
Definition and Usage
The DropDownList control is used to create a drop-
down list.
Each selectable item in a DropDownList control is
defined by a ListItem element!
Tip: This control supports data binding!
Properties

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

You selected Item 3


4.2.8 ListBox
Definition and Usage
The ListBox control is used to create a single- or
multi-selection drop-down list.
Each selectable item in a ListBox control is defined
by a ListItem element!
Tip: This control supports data binding!

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

You selected Item 1

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”
/>

<asp: Button id=”b1” text=”cmdButton”


CommandName=”Hello”
CommandArgument=”World”
onCommand=”Btn_Click” runat=”server”/>

Sub Btn_click (sender As object, E as


commandEventArgs)
Label1.text = e.CommandName &” “ &
e.commandAgrument
End sub

Output : Hello World

<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

You might also like