ASP.NET Controls

ASP.NET supports three types of controls.

  • HTML Controls
  • HTML Server Controls
  • Web Server Controls

HTML Controls

HTML controls are client side controls and parsed by browser. Because these controls are runs on clients, therefore it improves the performance of the web page. In ASP.NET HTML controls are not available to the web server. HTML controls are mainly used in classic ASP. In classic ASP, developers have to write everything (Presentation and business logic) in single page. These controls do not provide state management. HTML controls cannot be accessed form code behind files in ASP.NET.

Classic ASP Web Page

<html>
    <head><title>Employee Page</title></head>
         <body>
               <form name="EmployeeForm" method="post" action="Empupdate.asp"       
           id="EmployeeForm" >
                      <input type="text" name="EmpName" id="EmpName" >
                      <input type="submit" name="SubmitButton" value="Submit" id="SubmitButton" >
             </form>
        </body>
</html>

HTML Server Controls

HTML server controls mainly used for converting classic ASP pages into ASP.NET pages. There is no separate HTML server controls in ASP.NET but if you apply the attribute runat="server", then plain HTML controls is converted to HTML server controls.

Converted ASP.NET code

<html>
<head><title>Employee Page</title></head>
            <body>
                       <form name="EmployeeForm" method="post" id="EmployeeForm"  
  runat="server">
                            <input type="text" name="EmpName" id="EmpName"  runat="server">
                            <input type="submit" name="SubmitButton" value="Submit"          
id="SubmitButton"  runat="server">
</form>
</body>
</html>


Look at the above code, We only add the runat="server" attribute to controls and form tag. The action attribute is removed from the "form" tag. All HTML server control should be placed inside a form tag with runat="server" attribute to operate properly.

Web Server Controls

ASP.NET provides a rich set of web server controls. They provide more functionality compare to HTML server controls.

Properties of web server control:

  • Runs on the web server.
  • All ASP.NET server control have runat="server" attribute, by default.
  • Server controls provide state management.
  • Its execution is slow compare to HTML control.
  • You can access these controls from code-behind.
  • Server controls have predefined classes.
  • Controls are inherited from System.Web.UI.WebControls name space.
Types of server control:

  • Standard Controls
    • Buttons, input fields, and labels etc.
  • Validation Controls
    • RequiredFieldValidator
    • RangeValidator
    • RegularExpressionValidator
    • CompareValidator
    • CustomValidator
    • ValidationSummary
  • Rich Controls
    • Calendars, file upload, Ad-rotator, and multistep wizards etc.
  • Data Controls
    • GridView, DetailView, FormView, ListView, Chart, etc.
    • Navigation Controls
    • Menu, TreeView, SiteMapPath.
  • Login Controls
    • Login, CreateUserWizard, LoginName, etc.
When a user request a web page, then web server process the page by executing different events. The following are the various events of ASP.Net page life cycle.

Page Life Cycle Events

PreInit
This event is responsible for following task:
  • Set a master page dynamically.
  • Set the Theme property dynamically.
  • Creates dynamic controls.
Init
This event fires after each control has been initialized. You can use this event to
read or initialize control properties.

InitComplete
This event is raised after initializations of the page and controls have been completed.

PreLoad
This event is raised before PostBack is processed.

Load
It is an important event of page life cycle. You can use IsPostBack property to avoid unnecessary code to execute during postback.

Control (PostBack) event(s)
Fires those events which caused the PostBack to occur.

LoadComplete
All controls are loaded and initialized completely.

PreRender
This event fires before saving ViewState.  You can do final changes to the page or its control in PreRender.

SaveStateComplete
View state and control state have been saved for the page and for all controls in this event. Any changes to the page’s controls at this stage, is ignored.

Render
HTML, DHTML, and scripts are generated in render event that are necessary to properly display a control at the browser.  

UnLoad
This event is mainly used for cleanup code.

Note: These events are not available in web page by default. You have to explicitly write these events/methods.

Example

using System;
public partial class _Default : System.Web.UI.Page
{
    protected void Page_PreInit(object sender, EventArgs e)
    {
        Label1.Text = Label1.Text + "<br/>" + "PreInit";
    }
    protected void Page_Init(object sender, EventArgs e)
    {
        Label1.Text = Label1.Text + "<br/>" + "Init";
    }
    protected void Page_InitComplete(object sender, EventArgs e)
    {
        Label1.Text = Label1.Text + "<br/>" + "InitComplete";
    }
    protected override void OnPreLoad(EventArgs e)
    {
        Label1.Text = Label1.Text + "<br/>" + "PreLoad";
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        Label1.Text = Label1.Text + "<br/>" + "Load";
    }
    protected void Page_LoadComplete(object sender, EventArgs e)
    {
        Label1.Text = Label1.Text + "<br/>" + "LoadComplete";
    }
    protected override void OnPreRender(EventArgs e)
    {
        Label1.Text = Label1.Text + "<br/>" + "PreRender";
    }
    protected override void OnSaveStateComplete(EventArgs e)
    {
        Label1.Text = Label1.Text + "<br/>" + "SaveStateComplete";
    }
    protected void Page_UnLoad(object sender, EventArgs e)
    {
        Label1.Text = Label1.Text + "<br/>" + "UnLoad";
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = Label1.Text + "<br/>" + "Button1_Click";
    }
}


Output:

When the first time Page Load the output:

PreInit
Init
InitComplete
PreLoad
Load
LoadComplete
PreRender
SaveStateComplete

When you click on the Button the output:

PreInit
Init
InitComplete
PreLoad
Load
LoadComplete
PreRender
PreLoad
Load
Button1_Click
LoadComplete
PreRender
SaveStateComplete

Understanding the View State

During postback, the data is not disappeared in server controls, it means that data is preserved when web page is posted to server. The data that is associated with the server controls is called as control state. View state data is not stored by the server. ASP.NET page contains a hidden form field named __VIEWSTATE. This hidden form field stores the value of the control’s property. When the page is posted back to the server, then the value of __VIEWSTATE is pulled out and re-creates the values of all the properties stored in View State. In this way, ASP.NET Framework preserves the data input by user or some other source across postbacks to the web server.

By default, View State is enabled for every control in ASP.NET. Let’s take an example and understand the view state.

Take a label and button control as given below.

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>    
        <asp:Label ID="Label1" runat="server" Text="1"></asp:Label>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />    
    </div>       
    </form>
</body>
</html>


Default.aspx.cs

using System;
public partial class _Default : System.Web.UI.Page
{   
    protected void Page_Load(object sender, EventArgs e)
    {       
    }   
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = (Int32.Parse(Label1.Text) + 1).ToString();
    }
}


In the above code the text property of label control is set to one. When you click on the button control, the text of label control is increased by one. As you know By default, View State is enabled for every control. If you set EnableViewState=false for label control, then during postback it will not increase the value by one.

Adding Web Server Controls on the web page

You can add controls in different ways.

  • You can simply drag and drop controls from toolbox on web page.
  • You can add Web Server Controls using Source View (in .aspx page).
  • Adding web server controls dynamically using code.
Example:
Every server control has their dedicated class. You can create the control dynamically by creating the object of that control’s class.

TextBox textBox = new TextBox();
textBox.ID = "txtName";
form1.Controls.Add(textBox);
▲