07 - HTML Server Controls

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:

Like us on Facebook