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:
- The HTML server controls follow the HTML centric object model. It is similar to HTML
- The controls can interact with the Client side scripting
- The migration of the code can be made easy by adding runat=”server attribute
- The abstraction of the HTML tag is similar to the HTML server control
- The controls do not possess any mechanism for identifying capabilities of the client browser
7.1 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:
<html xmlns=”http://www.w3.org/1999/xhtml” > <head runat=”server”> <title></title> </head> <body> <form id=”form1” runat=”server”> <div> <a id=”a1” runat=”server”>Visit Gmail</a><br/> <a id=”a2” runat=”server”>Visit Yahoo</a><br/> </div> </form> </body> </html>
public partial class _Default: System.Web.UI.Page { protected void Page_Load( object sender, EventArgs e) { a1.HRef=”http://www.gmail.com”; a1.Title=”Welcome to Gmail”; a1.Target=”_blank”; a2.HRef=”http://www.yahoo.com”; a2.Title=”Welcome to yahoo”; a2.Target=”_blank”; } }
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:
<html xmlns=”http://www.w3.org/1999/xhtml” > <head runat=”server”> <title></title> <script language=”javascript” type=”text/javascript”> //<![ CDATA [ function btn1_onclick () { lbl1.innerHTML =”The button clicked is save”; } funciton btn2_onclick() { lbl1.innerHTML =”The button clicked is display”; } //]]> </script> </head> <body> <form id=”form1” runat=”server”> <button id=”btn1” runat=”server” onclick =”return btn1_onclick()” >Save Value </button> <br/> <button id=”btn2” runat=”server” onclick=”return btn2_onclick()” >Display Value</button> <br/> <label id=”lbl” runat=”server”></label> </form> </body> </html>
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”> <head runat=”server”> <title></title> <script runat=”server”> void submit ( object sender, EventArgs e) { lbl1.InnerHtml = “Name inserted is:”+name.Value; } </script> </head> <body> <form id=”form1” runat=”server”> <div> Name: <input is=”name” runat=”server” type=”text” /><br/> <input id=”button1” runat=”server” type=”submit” value=”submit” onserverclick=”submit” style=”height:26px” /> <label id=”lbl1” runat=”server”></label> </div> </form> </body> </html>
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:
<html xmlns=”http:www.w3.org/1999/xhtml”> <head runat=”server”> <title></title> </head> <body> <form id=”form1” runat=”server”> <div> <img id=”img1” runat=”server” /> </div> </form> </body> </html>
public partial class _Default : System.Web.UI.Page { protected void Page_Load( object sender, EventArgs e) { img1.Src =”Image\\Desert.jpg”; img1.Alt = “Desert”; img1.Height=90; img1.Width=100; } }
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:
<html xmlns=”http://www.w3.org/1999/xhtml” > <head runat=”server”> <title></title> <script runat=”server”> void submit( object sender, EventArgs e) { p1.InnerHtml =”Course entered is:”+t1.Value; } </script> </head> <body> <form is=”form1” runat=”server”> <div> Course: <input id=”t1” runat=”server” type=”text” size=”30” /> <br/> <input type=”submit” runat=”server” value=”submit” onserverclick=”submit” /><br/> <p id=”p1” runat=”server”></p> </div> </form> </body> </html>
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) HtmlInputHidden control: The HtmlInputHidden control is sued to control an <input type=”hidden”> 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 |
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:
10) 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:
11) 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:
12) HtmlSelect control: The HtmlSelect control is used to control <select> element. The properties are stated below:
Property | Description |
DataMember | It is the name of the table used |
DataSource | It is data source in use |
DataTextField | It is the data source filed to display the drop down list |
DataValueField | It specifies the value selected from the drop down list |
Multiple | It selects multiple items |
Items | The list of items in the control |
SelectedIndex | It is the index of the selected item |
Size | The visible items in the control |
An example of the control is shown:
Output:
13) HtmlTextArea control: The HtmlTextArea control is used to control <textarea> element. The properties are stated below:
Property | Description |
Cols | It is the number of columns in the control |
Attributes | It returns the attribute name and value pairs of the element |
Value | It is the contents of the text area |
Name | It is unique name of the control |
Rows | It is the number of rows in the control |
An example of the control is shown below:
Output:
14) HtmlTable control: The HtmlTable control is used to control <table> element. The properties are stated below:
Property | Description |
Align | It specifies the table alignment |
BGColor | It is the background color of the table |
Border | It is width of the borders |
CellPadding | It is the space between the cell walls |
CellSpacing | It specifies the space between the cell |
Height | It is the height of the table |
Rows | It returns the HtmlRowCollection object representing all rows |
An example of the control is shown below:
Output:
7.2 Example of Html Server Controls
A small application created using Html Server control is shown below:
The source code for the application is-
The code behind file of the application is as shown below:
The output is as shown below: