Wednesday, 29 January 2014

ASP.NET - Event Handling

What is an Event?

Event is an action or occurrence like mouse click, key press, mouse movements, or any system generated notification. The processes communicate through events. For example, Interrupts are system generated events. When events occur the application should be able to respond to it.
In ASP.Net an event is raised on the client, and handled in the server. For example, a user clicks a button displayed in the browser. A Click event is raised. The browser handles this client-side event by posting it to the server.
The server has a subroutine describing what to do when the event is raised; it is called the event-handler. Therefore, when the event message is transmitted to the server, it checks whether the Click event has an associated event handler, and if it has, the event handler is executed.

Event Arguments:

ASP.Net event handlers generally take two parameters and return void. The first parameter represents the object raising the event and the second parameter is called the event argument.
The general syntax of an event is:
private void EventName (object sender, EventArgs e);

Application and Session Events:

The most important application events are:
  • Application_Start . it is raised when the application/website is started
  • Application_End . it is raised when the application/website is stopped
Similarly, the most used Session events are:
  • Session_Start . it is raised when a user first requests a page from the application
  • Session_End . it is raised when the session ends

Page and Control Events:

Common page and control events are:
  • DataBinding . raised when a control bind to a data source
  • Disposed . when the page or the control is released
  • Error . it is an page event, occurs when an unhandled exception is thrown
  • Init . raised when the page or the control is initialized
  • Load . raised when the page or a control is loaded
  • PreRender . raised when the page or the control is to be rendered
  • Unload . raised when the page or control is unloaded from memory

Event Handling Using Controls:

All ASP.Net controls are implemented as classes, and they have events which are fired when user performs certain action on them. For example, when a user clicks a button the 'Click' event is generated. For handling these events there are in-built attributes and event handlers. To respond to an event, the event handler is coded.
By default Visual Studio creates an event handler by including a Handles clause on the Sub procedure. This clause names the control and event that the procedure handles.
The asp tag for a button control:
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
The event handler for the Click event:
Protected Sub btnCancel_Click(ByVal sender As Object, 
                              ByVal e As System.EventArgs) 
                              Handles btnCancel.Click
End Sub
An event can also be coded without a Handles clause. Then the handler must be named according to the appropriate event attribute of the control.
The asp tag for a button control:
<asp:Button ID="btnCancel" runat="server" Text="Cancel" 
                              Onclick="btnCancel_Click" />
The event handler for the Click event:
Protected Sub btnCancel_Click(ByVal sender As Object, 
                              ByVal e As System.EventArgs)
End Sub
The common control events are:
EventAttributeControls
ClickOnClickButton, image button, link button, image map
CommandOnCommandButton, image button, link button
TextChangedOnTextChangedText box
SelectedIndexChangedOnSelectedIndexChangedDrop-down list, list box, radio button list, check box list.
CheckedChangedOnCheckedChangedCheck box, radio button
Some events cause the form to be posted back to the server immediately, these are called the postback events. For example, the click events like, Button.Click. Some events are not posted back to the server immediately, these are called non-postback events.
For example, the change events or selection events, such as, TextBox.TextChanged or CheckBox.CheckedChanged. The nonpostback events could be made to post back immediately by setting their AutoPostBack property to true.

Default Events:

The default event for the Page object is the Load event. Similarly every control has a default event. For example, default event for the button control is the Click event.
The default event handler could be created in Visual Studio, just by double clicking the control in design view. The following table shows some of the default events for common controls:
ControlDefault Event
AdRotatorAdCreated
BulletedListClick
ButtonClick
CalenderSelectionChanged
CheckBoxCheckedChanged
CheckBoxListSelectedIndexChanged
DataGridSelectedIndexChanged
DataListSelectedIndexChanged
DropDownListSelectedIndexChanged
HyperLinkClick
ImageButtonClick
ImageMapClick
LinkButtonClick
ListBoxSelectedIndexChanged
MenuMenuItemClick
RadioButtonCheckedChanged
RadioButtonListSelectedIndexChanged

EXAMPLE:

This example has a simple page with a label control and a button control on it. As the page events like, Page_Load, Page_Init, Page_PreRender etc. takes place, it sends a message, which is displayed by the label control. When the button is clicked, the Button_Click event is raised and that also sends a message to be displayed on the label.
Create a new website and drag a label control and a button control on it from the control tool box. Using the properties window, set the IDs of the controls as .lblmessage. and .btnclick. respectively. Set the Text property of the Button control as 'Click'.
The markup file (.aspx):
<%@ Page Language="C#" AutoEventWireup="true" 
                          CodeBehind="Default.aspx.cs" 
                          Inherits="eventdemo._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <asp:Label ID="lblmessage" runat="server" >
     </asp:Label>
        <br />
        <br />
        <br />
     <asp:Button ID="btnclick" runat="server" Text="Click" 
                 onclick="btnclick_Click" />
    </div>
    </form>
</body>
</html>
Double click on the design view to move to the code behind file. The Page_Load event is automatically created without any code in it. Write down the following self-explanatory code lines:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

namespace eventdemo
{
public partial class _Default : System.Web.UI.Page
{
   protected void Page_Load(object sender, EventArgs e)
   {
     lblmessage.Text += "Page load event handled. <br />";
     if (Page.IsPostBack)
     {
       lblmessage.Text += "Page post back event handled.<br/>";
     }
  }
  protected void Page_Init(object sender, EventArgs e)
  {
    lblmessage.Text += "Page initialization event handled.<br/>";
  }
  protected void Page_PreRender(object sender, EventArgs e)
  {
    lblmessage.Text += "Page prerender event handled. <br/>";
  }
  protected void btnclick_Click(object sender, EventArgs e)
  {
    lblmessage.Text += "Button click event handled. <br/>";
  }
 }
}
Run the page. The label shows page load, page initialization and the page pre-render events. Click the button to see effect:
ASP.NET Event Example

coding session : Conversion to Upper Case

Code Section:

The code section provides the handlers for the page and control events along with other functions required. We mentioned that, ASP.Net follows an object model. Now, these objects raises events when something happens on the user interface, like a user clicks a button or moves the cursor. How these events should be handled? That code is provided in the event handlers of the controls, which are nothing but functions bound to the controls.
The code section or the code behind file provides all these event handler routines, and other functions used by the developer. The page code could be precompiled and deployed in the form of a binary assembly.

Page Layout:

The page layout provides the interface of the page. It contains the server controls, text, inline JavaScript and HTML tags:
The following code snippet provides a sample ASP.Net page explaining Page directives, code section and page layout written in C#:
<!-- directives -->
<% @Page Language="C#" %>

<!-- code section -->
<script runat="server">
private void convertoupper(object sender, EventArgs e)
{
 string str = mytext.Value;
 changed_text.InnerHtml = str.ToUpper();
}
</script>

<!-- Layout -->
<html>
<head> <title> Change to Upper Case </title> </head>
<body>
<h3> Conversion to Upper Case </h3>
<form runat="server">
 <input runat="server" id="mytext" type="text" />
 <input runat="server" id="button1" type="submit" 
    value="Enter..." OnServerClick="convertoupper"/>
<hr />
<h3> Results: </h3>
<span runat="server" id="changed_text" />
</form>
</body>
</html>
Copy this file to the web server's root directory. Generally it is c:\inetput\wwwroot. Open the file from the browser to run it and it should generate following result:
ASP.NET First Example

Using Visual Studio IDE:

Let us develop the same example using Visual Studio IDE. Instead of typing the code, you can just drag the controls into the design view:
ASP.NET First Example 2
The content file is automatically developed. All you need to add is the Button1_Click routine, which is as follows:
protected void Button1_Click(object sender, EventArgs e)
{
     string buf = TextBox1.Text;
     changed_text.InnerHtml = buf.ToUpper();
}
The content file code is:
<%@ Page Language="C#" AutoEventWireup="true" 
                       CodeBehind="Default.aspx.cs" 
                       Inherits="firstexample._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
   <form id="form1" runat="server">
   <div>
      <asp:TextBox ID="TextBox1" runat="server" style="width:224px">
      </asp:TextBox>
      <br />
      <br />
      <asp:Button ID="Button1" runat="server" Text="Enter..." 
                  style="width:85px" onclick="Button1_Click" />
      <hr />
      <h3> Results: </h3>
      <span runat="server" id="changed_text" />
   </div>
   </form>
</body>
</html>
Run the example either from Debug menu, or by pressing Ctrl-F5 or by right clicking on the design view and choosing 'View in Browser' from the popup menu. This should generate following result:
ASP.NET First Example 3

ASP.Net Life Cycle

ASP.Net life cycle specifies, how:
  • ASP.Net processes pages to produce dynamic output
  • The application and its pages are instantiated and processed
  • ASP.Net compiles the pages dynamically
The ASP.Net life cycle could be divided into two groups:
  • Application Life Cycle
  • Page Life Cycle

ASP.Net Application Life Cycle:

The application life cycle has the following stages:
  • User makes a request for accessing application resource, a page. Browser sends this request to the web server.
  • A unified pipeline receives the first request and the following events take place:
    • An object of the ApplicationManager class is created.
    • An object of the HostingEnvironment class is created to provide information regarding the resources.
    • Top level items in the application are compiled.
  • Response objects are created . the application objects: HttpContext, HttpRequest and HttpResponse are created and initialized.
  • An instance of the HttpApplication object is created and assigned to the request. The request is processed by the HttpApplication class. Different events are raised by this class for processing the request.

ASP.Net Page Life Cycle:

When a page is requested, it is loaded into the server memory, processed and sent to the browser. Then it is unloaded from the memory. At each of this steps, methods and events are available, which could be overridden according to the need of the application. In other words, you can write your own code to override the default code.
The Page class creates a hierarchical tree of all the controls on the page. All the components on the page, except the directives are part of this control tree. You can see the control tree by adding trace= "true" to the Page directive. We will cover page directives and tracing under 'directives' and 'error handling'.
The page life cycle phases are:
  • Initialization
  • Instantiation of the controls on the page
  • Restoration and maintenance of the state
  • Execution of the event handler codes
  • Page rendering
Understanding the page cycle helps in writing codes for making some specific thing happen at any stage of the page life cycle. It also helps in writing custom controls and initializing them at right time, populate their properties with view-state data and run control behavior code.
Following are the different stages of an ASP.Net page:
  • Page request . when ASP.Net gets a page request, it decides whether to parse and compile the page or there would be a cached version of the page; accordingly the response is sent
  • Starting of page life cycle . at this stage, the Request and Response objects are set. If the request is an old request or post back, the IsPostBack property of the page is set to true. The UICulture property of the page is also set.
  • Page initialization . at this stage, the controls on the page are assigned unique ID by setting the UniqueID property and themes are applied. For a new request postback data is loaded and the control properties are restored to the view-state values.
  • Page load . at this stage, control properties are set using the view state and control state values.
  • Validation . Validate method of the validation control is called and if it runs successfully, the IsValid property of the page is set to true.
  • Postback event handling . if the request is a postback (old request), the related event handler is called.
  • Page rendering . at this stage, view state for the page and all controls are saved. The page calls the Render method for each control and the output of rendering is written to the OutputStream class of the Page's Response property.
  • Unload . the rendered page is sent to the client and page properties, such as Response and Request are unloaded and all cleanup done.

ASP.Net Page Life Cycle Events:

At each stage of the page life cycle, the page raises some events, which could be coded. An event handler is basically a function or subroutine, bound to the event, using declarative attributes like Onclick or handle.
Following are the page life cycle events:
  • PreInit . PreInit is the first event in page life cycle. It checks the IsPostBack property and determines whether the page is a postback. It sets the themes and master pages, creates dynamic controls and gets and sets profile property values. This event can be handled by overloading the OnPreInit method or creating a Page_PreInit handler.
  • Init . Init event initializes the control property and the control tree is built. This event can be handled by overloading the OnInit method or creating a Page_Init handler.
  • InitComplete . InitComplete event allows tracking of view state. All the controls turn on view-state tracking.
  • LoadViewState . LoadViewState event allows loading view state information into the controls.
  • LoadPostData . during this phase, the contents of all the input fields defined with the <form> tag are processed.
  • PreLoad . PreLoad occurs before the post back data is loaded in the controls. This event can be handled by overloading the OnPreLoad method or creating a Page_PreLoad handler.
  • Load . the Load event is raised for the page first and then recursively for all child controls. The controls in the control tree are created. This event can be handled by overloading the OnLoad method or creating a Page_Load handler.
  • LoadComplete . the loading process is completed, control event handlers are run and page validation takes place. This event can be handled by overloading the OnLoadComplete method or creating a Page_LoadComplete handler.
  • PreRender . the PreRender event occurs just before the output is rendered. By handling this event, pages and controls can perform any updates before the output is rendered.
  • PreRenderComplete . as the PreRender event is recursively fired for all child controls, this event ensures the completion of the pre-rendering phase.
  • SaveStateComplete . state of control on the page is saved. Personalization, control state and view state information is saved. The HTML markup is generated. This stage can be handled by overriding the Render method or creating a Page_Render handler.
  • UnLoad . the UnLoad phase is the last phase of the page life cycle. It raises the UnLoad event for all controls recursively and lastly for the page itself. Final cleanup is done and all resources and references, such as database connections, are freed. This event can be handled by modifying the OnUnLoad method or creating a Page_UnLoad handler.