Scribd
Upload
83 views

ASP .Net Unit 2 (HTML Server Controls & Rich Control)

The document summarizes various HTML server controls in ASP.NET, including the HtmlAnchor, HtmlButton, HtmlForm, and HtmlGeneric controls. It provides properties and examples of how each control can be implemented. Key advantages of HTML server controls are that they follow the HTML model and allow interaction with client-side scripting while enabling easy migration from HTML to server controls.

Uploaded by

Shubham Joshi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
83 views

ASP .Net Unit 2 (HTML Server Controls & Rich Control)

The document summarizes various HTML server controls in ASP.NET, including the HtmlAnchor, HtmlButton, HtmlForm, and HtmlGeneric controls. It provides properties and examples of how each control can be implemented. Key advantages of HTML server controls are that they follow the HTML model and allow interaction with client-side scripting while enabling easy migration from HTML to server controls.

Uploaded by

Shubham Joshi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

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:

You might also like