Understanding Event Handlers in ASP.NET 3.5

Did you notice why the last web form you used acted the way it did when you clicked the submit button? Or did you notice that the time changes every time you reload an .aspx page?  Or that it greets you with “Good morning” when the time is 6 AM or “Good afternoon” when the time is 2 PM?

These are happening because of the usage of “event handlers” in ASP.NET. “Event handlers” are called programmable “triggers” synonymous to “switch on” button of a fluorescent lamp. Once activated, it “fires” the event and causes it to execute something.

You wouldn’t notice it, but every time you see an ASP.NET page (with .aspx extension) event handlers are activated in the process. This article explores the ASP.NET event handlers and illustrates basic coding examples of their actual use and application.

ASP.NET “Click” event handler

Most ASP.NET applications utilize two important types of event handlers with different applications. These are the “page load” and “click” event handlers. The “page load” event handler is triggered every time the web page is requested and loaded by the server, while the “click” event handler is triggered every time a button is clicked.

Let's start with the more common “click” event handler. A typical working example is a web form with a submit button that utilizes the “click” event in such a way that when the submit button is clicked, ASP.NET executes a server side code associated with it. This code might be used to process form information, do form validation, submit form values to a database, and so forth.

One of the previously covered examples utilizing “click" event handlers is in this tutorial: http://www.aspfree.com/c/a/ASP.NET/Design-and-Create-Web-Forms-in-ASPNET/. It utilizes the web form below to ask for a user input and then engages a submit button (“Compute area of the circle”):

When the form is submitted, that is by clicking the “Compute area of the circle” button, the “click” event triggers the execution of the Visual Basic server side script to get user input (the circle's radius in this example) and then compute the area of the circle using the code below:

       'Get the user input radius from the text box field

        'Assigned it as userradius

        Dim Userradius As Integer = radius.Text

        'Calculate Area of the circle

        'Initiate Area as a decimal

        'Formula is 3.1416 x (r^2)

        Dim Area As Decimal

        Area = (3.1416) * ((Userradius) ^ 2)

        'Output the area of the circle back to the browser

        displayarea.Text = "The area of the circle is: " & Area

If the form is not submitted, the button is not clicked. Nothing will happen to the form unless it is triggered by a click event.

ASP.NET page load event handler

The "page load” event handler is entirely different from the “click” event handler. The triggering mechanism is the request to the ASP.NET server to load the page. See the diagram below:

The flow chart is very clear, so let us use a practical example. Let say you are going to develop an ASP.NET application that will simply display the server date and time to the web browser; this is a dynamic ASP.NET application in which the dynamic data (date and time) provided to the web browser changes every time the web page is requested or loaded. Let us call the ASP.NET page “default.aspx.” Once you type the URL in the web browser (http://www.someaspdotnetwebsite.com/Default.aspx) and press enter, you request the page “Default.aspx” from the ASP.NET server.

The server will check whether there is a “page load” event associated with that page. Since there is a server side script that will display the server's date and time, ASP.NET executes the script and then returns the result (date and time) in the form of HTML back to the web browser.

This is dynamic data, so when the date and time is March 9, 2010 6:16PM, when you reload the page 10 minutes later, the “page load” event triggers, and then ASP.NET returns the updated time to the browser, which is March 9, 2010 6:26PM

You can develop countless applications that use “page load” event handlers in the way that "click" event handlers are used. A more complex example is to grab database data that depends on the web page URL. In this application, the associated script attached to the page load event will first grab the requested URL, which will then be used to query the SQL server database and then output the HTML back to the web browser.

Or if you are a practicing SEO and you would like certain URLs to be tagged with <meta name="ROBOTS" content="NOINDEX,NOFOLLOW">, you might use the “page load” event handler with a script that will grab the URL, analyze it, and if it matches the condition, return the meta noindex tag back to the web browser HTML.

How to create an ASP.NET click event handler

Now that you have some understanding of how event handlers work, you will need to put it in action. To create a click event handler, I recommend reading the following tutorial: http://www.aspfree.com/c/a/ASP.NET/Design-and-Create-Web-Forms-in-ASPNET/. Let us use it as an example. Since the most common application of a click event handler is in the development of web forms, the easiest way to create a click event handler is to double click the button in the Design view using Visual Web Developer Express. You will then see the Visual Basic code of the ASP.NET page (for example, if it is Default.aspx, the VB file is Default.aspx.vb)

Partial Class _Default

    Inherits System.Web.UI.Page

    Protected Sub computearea_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles computearea.Click

        'VISUAL BASIC CODE HERE TO COMPUTE THE AREA OF THE CIRCLE

    End Sub

End Class

The important part is highlighted in red. The “computearea” is the button ID used in the web form. The computearea_click and computearea.Click attached the ID to a click event handler.

Between Protected Sub… and End Sub is where you will need to insert your server side script that will fire after the click event. In ASP.NET, there are two popular programming languages that you can select: Visual Basic or Visual C#. For simplicity, we will use Visual Basic.

The Visual Basic code to compute the area of the circle is shown in the previous section. You can create the example provided using Visual Web Developer Express 2008.

How to create an ASP.NET page load event handler

The simplest example that you can create using a page load event handler is to display the text when the page is loaded. Of course, you can create more complex applications, as mentioned earlier; however, for the purpose of illustrating the page load event handler, we will stick to the simplest example, which is displaying text on the browser.

Say you are going to display the following text: “Hey this text is displayed on the browser using ASP.NET page load event handler.” Go through the following steps:

Step 1: Launch Visual Web Developer Express 2008.

Step 2: Under “Recent Projects” which can be found in the Dashboard, click Create à Website.

Step 3: Under Visual Studio installed templates, select “ASP.NET Web site.”

Step 4: Under location, select “File System” and in the path (beside it), you will need to save it like one of your Windows hard drive folders, for example, “E:pageloadevent”

Step 5: Under language, select “Visual Basic.”

Step 6: When everything is done, click OK.

Step 7: The default.aspx file has been created, but it needs your web controls and scripts in order to execute the application we need (such as displaying the text). To display the text to the browser, you will need to click and drag the “Label” web control to put it between <div> and </div> tags. You can locate the web control “Label” in View à Toolbox à Label, and then click and drag it to the intended location mentioned above.

To properly identify this label with the Visual Basic script, you will change the ID to a more meaningful name like “pageloadtext” and then remove the default value of Text=”Label” to Text=””, since we do not need to display default text. The final code will be:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_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></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:Label ID="pageloadtext" runat="server" Text=""></asp:Label>

    </div>

    </form>

</body>

</html>

The above code is the final Default.aspx source code.

Step 8: Now go to the Design view in Visual Web Developer Express and double click anywhere on the white screen. You should see the Default.aspx.vb “Page load” event editor:

Partial Class _Default

    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

End Class

As you can see, it now uses a Page_Load event, aside from the click event discussed earlier. So how do we add the Visual Basic script which displays the text every time the page is loaded? Insert it between Protected Sub and End Sub, so that it will now become:

Partial Class _Default

    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        'Assign text to Label ID

        pageloadtext.Text = "Hey this text is displayed on the browser using ASP.NET page load event handler."

    End Sub

End Class

Step 9: When you view it in the browser (File à View in Browser), it should look like this: