Unit – 2
ASP.NET Controls
2. HTML Server Controls
HTML Container Control HTML Input Control HTML Image Control
HtmlAnchor Control HtmlInputButton Control HtmlImage
HtmlButton Control HtmlInputButton Control
HtmlInputCheckbox Control
HtmlForm Control
HtmlInputFile Control
HtmlGeneric Control HtmlInputRadioButton Control
HtmlInputText Control
Introduction of HTML Server Controls
The HTML elements are considered as text in ASP.NET file. They cannot be referred as server side code. These
controls can be treated as server control by adding runat=”server” attribute. The id attribute in the element can be
added as reference to the control. All the HTML server controls are written in the <form> tag.
Advantages of using HTML Server Controls:
o The HTML server controls follow the HTML centric object model. It is similar to HTML
o The controls can interact with the Client side scripting
o The migration of the code can be made easy by adding runat=”server attribute
o The abstraction of the HTML tag is similar to the HTML server control
o The controls do not possess any mechanism for identifying capabilities of the client browser
Control List
1) HtmlAnchor control:
The <a> Html element allows the user to create a hyperlink. User can navigate to the page defined in the link. The
Target property is used to display the Web page. The values can be _blank, _self, _parent, _top. The properties are
mentioned below:
Property Description
Id It specifies the unique id for the control
Attributes It returns the attribute name and value pairs of the element
Disabled It is a Boolean value used for defining the control activation
HRef It is the URL target of the link
InnerText It sets or returns the text between the opening and closing tags of the
element.
InnerHtml It sets or returns the content between the opening and closing tags of the
element
OnServerClick The function to be executed when the link is clicked by the user
Runat It specifies that the control is a server control
Name It is the name of the anchor
Style It is used to set or return the CSS properties applied to the control
Target It defines the target window to be opened
TagName It returns the element tag name
Title It defines the title to displayed by the browser
Visible It is a Boolean value whether control should be visible or not
A sample code for HTML Anchor control is shown below:
?
1
<html xmlns=”http://www.w3.org/1999/xhtml” >
2
<head runat=”server”>
3
<title></title>
4
</head>
5 <body>
6 <form id=”form1” runat=”server”>
7 <div>
8 <a id=”a1” runat=”server”>Visit Gmail</a><br/>
<a id=”a2” runat=”server”>Visit Yahoo</a><br/>
9
</div>
10
</form>
11
</body>
12
</html>
13
public partial class _Default: System.Web.UI.Page
1
{
2
protected void Page_Load( object sender, EventArgs e)
3
{
4 a1.HRef=”http://www.gmail.com”;
5 a1.Title=”Welcome to Gmail”;
a1.Target=”_blank”;
6
7
a2.HRef=”http://www.yahoo.com”;
8
a2.Title=”Welcome to yahoo”;
9
a2.Target=”_blank”;
10
}
11
}
12
13
Output:
2) HtmlButton control:
The HtmlButton control is defined using the <button> element. The properties are as mentioned below:
Property Description
Id It defines a unique id for the control
Attributes It returns the attribute name and value pairs of the element
Disabled It is a Boolean value for indicating to enable or disable the control
Runat It specifies that the control is a server control
InnerHtml It sets or returns the content between the opening and closing tags of the element
InnerText It sets or returns the text between the opening and closing tags of the element
OnServerClick The function to be executed when the button is clicked by the user
Style It is used to set or return the CSS properties applied to the control
TagName It returns the element tag name
Visible It is a Boolean value whether control should be visible or not
A sample code to demonstrate HTML Button control is:
?
1 <html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
2
<title></title>
3
<script language=”javascript” type=”text/javascript”>
4
//<![ CDATA [
5
function btn1_onclick ()
6
{
7 lbl1.innerHTML =”The button clicked is save”;
8 }
9 funciton btn2_onclick()
10 {
11 lbl1.innerHTML =”The button clicked is display”;
}
12
//]]>
13
</script>
14
</head>
15
<body>
16
<form id=”form1” runat=”server”>
17 <button id=”btn1” runat=”server” onclick =”return btn1_onclick()” >Save
Value </button>
18
<br/>
19
<button id=”btn2” runat=”server” onclick=”return btn2_onclick()” >Display
20 Value</button>
21 <br/>
<label id=”lbl” runat=”server”></label>
22
</form>
23
</body>
24
</html>
25
26
Output:
3) HtmlForm control:
The Htmlform control is used to control a <form> element. All the
Html server controls are written within the Html form control. User can add only one form control for a web page. The
POST method is the default method of the Html form control. The properties are mentioned below:
Property Description
Action It contains a URL defining where to send the data in the form submitted
Attributes It returns the attribute name and value pairs of the element
Disabled It is a Boolean value for indicating to enable or disable the control
Id It defines a unique id for the control
EncType It is mime type used to encode the content of the form
InnerHtml It sets or returns the content between the opening and closing tags of the element
InnerText It sets or returns the text between the opening and closing tags of the element
Method The form posts the data to the server.
Name It is the name of the form
Runat It specifies that the control is a server control
Style It is used to set or return the CSS properties applied to the control
TagName It returns the element tag name
Target It defines the target window to be opened
Visible It is a Boolean value whether control should be visible or not
A sample code to demonstrate the HTML form control is shown below:
?
<html xmlns=”http://www.w3.org/1999/xhtml”>
1
<head runat=”server”>
2
<title></title>
3 <script runat=”server”>
4 void submit ( object sender, EventArgs e)
5 {
6 lbl1.InnerHtml = “Name inserted is:”+name.Value;
7 }
</script>
8
</head>
9
<body>
10
<form id=”form1” runat=”server”>
11
<div>
12
Name: <input is=”name” runat=”server” type=”text” /><br/>
13 <input id=”button1” runat=”server” type=”submit” value=”submit” onserverclick=”
style=”height:26px” />
14
<label id=”lbl1” runat=”server”></label>
15
</div>
16 </form>
17 </body>
</html>
18
19
20
Output:
4) HtmlGeneric control:
The HtmlGeneric control is used to control elements other than Html server control. The <body>, <div>, <span> and
<p> are used as Html generic control. The properties are as mentioned below:
Property Description
Attributes It returns the attribute name and value pairs of the element
Disabled It is a Boolean value for indicating to enable or disable the control
Id It defines a unique id for the control
InnerHtml It sets or returns the content between the opening and closing tags of the element
InnerText It sets or returns the text between the opening and closing tags of the element
runat It specifies that the control is a server control
Style It is used to set or return the CSS properties applied to the control
TagName It returns the element tag name
Visible It is a Boolean value whether control should be visible or not
5) HtmlImage control:
The HtmlImage control is used to control <img> element. The <img> element is used to display an image. The
properties are as follows:
Property Description
Align It is used to align images depending on the surrounding elements. The values that
can be assigned are top, middle, bottom, left, right.
Alt It is short description of the image
Attributes It returns the attribute name and value pairs of the element
Border It is the width of the borders around the image
Disabled It is a Boolean value indicating whether the control can be disabled
Height It is the height of the image
Id It defines a unique id for the control
Runat It specifies that the control is a server control
Style It is used to set or return the CSS properties applied to the control
Src It is the URL of the image to be displayed
TagName It returns the element tag name
Visible It is a Boolean value whether control should be visible or not
Width It is the width of the image
An example is as mentioned below:
?
1 <html xmlns=”http:www.w3.org/1999/xhtml”>
<head runat=”server”>
2
<title></title>
3
</head>
4
<body>
5
<form id=”form1” runat=”server”>
6
<div>
7 <img id=”img1” runat=”server” />
8 </div>
9 </form>
</body>
10
</html>
11
12
1
public partial class _Default : System.Web.UI.Page
2
{
3 protected void Page_Load( object sender, EventArgs e)
4 {
5 img1.Src =”Image\\Desert.jpg”;
6 img1.Alt = “Desert”;
7 img1.Height=90;
img1.Width=100;
8
}
9
}
10
Output:
6) HtmlInputButton control:
The HtmlInputButton control is used to control <input type=”button”>, <input type=”reset”> and <input
type=”submit”> elements. The properties are as mentioned below:
Property Description
Attributes It returns the attribute name and value pairs of the element
Disabled It is a Boolean value indicating whether the control can be disabled
Id It defines a unique id for the control
Name It is the name of the element
OnServerClick It is the function name to executed when the button is clicked
Runat It specifies that the control is a server control
Style It is used to set or return the CSS properties applied to the control
TagName It returns the element tag name
Visible It is a Boolean value whether control should be visible or not
Type It is the type of element used
Value It is the value of the element
An example is as mentioned below:
?
1 <html xmlns=”http://www.w3.org/1999/xhtml” >
2 <head runat=”server”>
3 <title></title>
<script runat=”server”>
4
void submit( object sender, EventArgs e)
5
{
6
p1.InnerHtml =”Course entered is:”+t1.Value;
7
}
8
</script>
9 </head>
10 <body>
11 <form is=”form1” runat=”server”>
12 <div>
13 Course: <input id=”t1” runat=”server” type=”text” size=”30” />
<br/>
14
<input type=”submit” runat=”server” value=”submit”
15 onserverclick=”submit” /><br/>
16 <p id=”p1” runat=”server”></p>
17 </div>
18 </form>
</body>
19
</html>
20
21
Output:
7) HtmlInputCheckBox control:
The HtmlInputCheckBox control is used to control as <input type=”checkbox”> element. The properties are as
mentioned below:
Property Description
Attributes It returns the attribute name and value pairs of the element
Disabled It is a Boolean value indicating whether the control can be disabled
Checked It is a Boolean value indicating whether the element is to be checked
Id It defines a unique id for the control
Name It is the name of the element
Runat It specifies that the control is a server control
Style It is used to set or return the CSS properties applied to the control
TagName It returns the element tag name
Visible It is a Boolean value whether control should be visible or not
Type It is the type of element used
Value It is the value of the element
An example is as mentioned below:
Output:
8) HtmlInputFile control: The HtmlInputFile control is used to control an <input type=”file”> element. The
properties are as mentioned below:
Property Description
Accept It provides a list of acceptable MIME types
Attributes It returns the attribute name and value pairs of the element
Disabled It is a Boolean value indicating whether the control can be disabled
Id It defines a unique id for the control
MaxLength It defines the maximum number of characters allowed in the element
Name It is the name of the element
PostedFile It gets access to the posted file
runat It specifies that the control is a server control
Size It is the width of the element
Style It is used to set or return the CSS properties applied to the control
TagName It returns the element tag name
Visible It is a Boolean value whether control should be visible or not
Type It is the type of element used
Value It is the value of the element
An example is as mentioned below:
Output:
9) HtmlInputRadioButton: The HtmlInputRadioButton control is used to control an <input type=”radio”> element.
The properties are as mentioned below:
Property Description
Attributes It returns the attribute name and value pairs of the element
Disabled It is a Boolean value indicating whether the control can be disabled
Checked It is a Boolean value indicating whether the element is to be checked
id It defines a unique id for the control
Name It is the name of the element
runat C
Style It is used to set or return the CSS properties applied to the control
TagName It returns the element tag name
Visible It is a Boolean value whether control should be visible or not
Type It is the type of element used
Value It is the value of the element
An example is as mentioned below:
Output:
10) HtmlInputText control: The HtmlInputText control is used to control <input type=”text”> and <input
type=”password”> elements. The properties are stated below:
Property Description
Attributes It returns the attribute name and value pairs of the element
id It defines a unique id for the control
MaxLength It defines the maximum characters allowed in the element
runat It defines a unique id for the control
Size It is the width of the element
Disabled It is a Boolean value indicating whether the control can be disabled
An example of HtmlInputText control is shown below:
Output:
