1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

HTML Server controls

Discussion in 'ASP.NET' started by MinalS, Jul 17, 2015.

  1. The HTML server controls are processed by the web server and the use of .NET framework utilities is done. They are specified using the attribute runat="server" and the id attribute is added for server side processing.

    Advantages of HTML server controls



    There are various ASP.NET server controls used for performing the functionalities provided by the HTML server controls. But the controls can be used when:
    • HTML page is converted to execute under ASP.NET
    • Static tables for the layout use.
    Some of the HTML Server controls are explained below:

    1. HTMLInputButton

    The HTML elements allow user to create submit button, reset button and command button. The server side maps to the <input type=button> and <input type=reset>.

    The general syntax for the InputButton control is:

    Code:
    <input type=button | submit | reset id="btn1" OnServerClick="onserverclickhandler"
    runat="server">
    
    When the user clicks the HTML InputButton, input from the control is processed. The response is sent back to the client.

    2. HTMLAnchor

    The HTMLAnchor is similar to the <a> tag. It creates an hyperlink useful for navigating from one page to another.

    The general syntax for the HTMLAnchor control is:

    Code:
    
    <a id="Anchor1" runat="server" name="User1" OnServerClick="onserverClickHandler" title="Value to be shown" target="linktosite" href="linkurl" > Welcome </a>
    
    
    where,

    id is the unique identifier assigned to the control
    name is the reference for the client side
    target is the frame or window on which the page is specified
    title is the tooltip value for the attribute
    href is the URL of the page on which it is linked

    3. HTMLForm

    The server side control mapping the <form> HTML element and creates a container for the web page elements.

    The general syntax is:
    Code:
    <form id="form1" runat="server" action="pageURL" method= POST | GET >
    </form>
    
    4. HTMLInputText

    The control is similar to HTML <input type="text"> tag but it works on the server. It collects the information from the user.

    The general form of the control is:
    Code:
    <input type=text | password
        id = "input1"
        maxlength = "maxnoofchar"
        size = "width"
        value = "textboxdata"
        runat="server" >
    
    where,

    id is the unique identifier for the control
    type specifies the mode of work
    size is the width of the control
    maxlength is the maximum number of characters added to the textbox
    value of the textbox or password box

    5. HTMLInputCheckBox

    It works similar to the HTML checkbox control but executes on the server. The user can select values from the two option either yes or no.

    The general form of the control is:
    Code:
    <input type="checkbox" id="check1" Checked runat="server" >
    
    Where,

    id is the unique identifier for the control
    Checked states whether the control is checked

    6. HTMLInputRadioButton

    It works similar to the HTML <input type = "radio"> tag. Multiple choice type questions can be created using the HTMLInputRadioButton control.

    The general syntax for the control is:
    Code:
    <input type="radio" runat="server" Checked Name="radiogroup" id="radio1">
    
    Where,

    id is the unique identifier for the control
    Checked is the status of the button
    Name is the option button group
    Value is used to get or set the value of the control

    7. HTMLSelect

    User can create a listbox using the HTMLSelect control. When user needs to select an option from the list, the control is used.

    The general form of the control is:
    Code:
    <select id="select1" runat="server" Items="optionelements" Multiple SelectedIndex="indexofcurrentitem" Size="noofitems" Value="itemvalue" >
    
    Where,

    id is the unique identifier
    Items provides the list of items
    Multiple states whether multiple items can be selected
    SelectedIndex is the index of the selected item
    Size is the number of visible items
    Value is the number of items selected

    8. HTMLTable

    The table is created using the <table> element.

    The general form is:

    Code:
    
    <table id = "table1" runat="server" align =left | right | center bgcolor="background color" bordercolor="bordercolor" height = "tableheight" rows="rowscollection" width="tablewidth" cellpadding = "spacingwithincells" cellspacing ="spacingbetweencells" >
     
    <tr>
        <td></td>
    </tr>
    
    </table>
    
    
    Where,

    id is the id for the table created
    align specifies the alignment of the table
    bgcolor is the background color of the table
    bordercolor is the color of the border
    Height is the table height
    width is the table width
    cellpadding defines the space in the cells
    cellspacing is the distance between the cells

    Example of HTML control



    The following example shows the HTML table for the page layout. Perform the steps mentioned below:
    1. Open Visual Studio application in the system and create an ASP.NET web application.
    2. In the source view window, add the following code.
      Code:
      
      <head runat="server">
      <title></title>
      </head>
      <body>
          <form id="form1" runat="server">
          <div>
          <table style="width:50%>
          <tr>
          <td style="width:150px">SrNo:</td>
          <td>
          <asp:TextBox ID="txt1" runat="server" style="width:200px">
          </asp:TextBox>
          </td>
          </tr>
      
          <tr>
          <td >Name:</td>
          <td>
          <asp:TextBox ID="txt2" runat="server" style="width:200px">
          </asp:TextBox>
          </td>
          </tr>
      
          <tr>
          <td >Course:</td>
          <td>
          <asp:TextBox ID="txt3" runat="server" style="width:200px">
          </asp:TextBox>
          </td>
          </tr>
          
          <tr>
          <td id="Showrow" runat="server" style="width:200px">
          </td>
          </tr>
      
          </table>
          </div>
          <asp:Button ID="btn1" runat="server" Text="Show" OnClick="btn1_Click" />
          </form>
      </body>
      </html>
      
      
    3. In the code behind file, add the following code.

      Code:
      
      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
      using System.Web.UI;
      using System.Web.UI.WebControls;
      
      public partial class _Default : System.Web.UI.Page
      {
          protected void Page_Load(object sender, EventArgs e)
          {
          }
          
          protected void btn1_Click(object sender, EventArgs e)
          {
              string s = "  ";
              s += txt1.Text +"<br/>";
              s += txt2.Text + "<br/>";
              s += txt3.Text + "<br/>";
              Showrow.InnerHtml = s;
          }
      }
      
    4. The following output is generated when the code is executed.

      [​IMG]
     

Share This Page