Monday, March 7, 2011

Handle Browser Close Event on the Server-Side

Introduction

During the last couples of years, we have already seen so many questions, on forums.asp.net website, asking how to fire some code on the server side when the user closes the browser.  The answer was always, the browser will only fire a client side event and the server side cannot be notified when the page is closed.
This is true and valid until AJAX came into life! Using AJAX we can do anything we want on the server side of the page whenever the user closes the browser.
One possible thing we might want to do is when the user closes the browser, kill the session on the server side immediately without having to wait until the session times out! This means, we will fire the Session_End event on the spot when the session is killed and this way we make sure the Session_End will fire for sure! Believe me, this is very helpful.
The Concept

The idea behind calling a server side code when the browser is closed by the user is based on the new concept introduced by ASP.NET 2.0 AJAX 1.0 Extensions, which is Page Methods. So, when the user closes the browser, the unload event fires on the client side and causes the callback method to fire in its turn (callback method is the one we attached to the unload event). Inside the callback method, we do a page method call to a public and static method in the code-behind of the page. In that method, we abandon the session, thus, clearing completely the session and firing the Session_End, which you can use to do any cleanup work for the session.
Demonstration

First of all, create a new ASP.NET page in your favorite IDE and add an instance of the ScriptManager to it. Make sure you configure the ScriptManager to enable Page Methods.
Listing 1
<asp:scriptmanager id="ScriptManager1" runat="server" enablepagemethods="true" />
Next, we will subscribe to the unload event of the body tag of the ASP.NET page and assign a callback method to be called when this event fires.
Listing 2
<body onunload="HandleClose()">
The HandleClose function is placed within the Head section of the page.
Listing 3
<script language="javascript" type="text/javascript">
  //<![CDATA[
  function HandleClose() 
   {
     alert("Killing the session on the server!!");
      PageMethods.AbandonSession();
   }
   //]]>
</script>
As you can see, the function shows an alert message box informing the user that the session will be killed on the server side. Then it makes a call to the AbandonSession server side method that is a Script-enabled method. For more information about the Page Methods in AJAX 1.0, make sure you check the AJAX documentation.
On the server side, all that you have to do is define the AbandonSession method and add to it the WebMethod attribute.
Listing 4
[WebMethod]
public static void AbandonSession()
 {
   HttpContext.Current.Session.Abandon();
 }
The above line of code makes sure that the session is now cleared and causes the Session_End event, which is defined inside the Global.asax to fire.
Inside the Global.asax you can place any code you want to execute when the session ends.
That is all what you have to do to run any server side code when the browser is closed by the user!
Hope this snippet is helpful and that you have enjoyed it!!
Conclusion

In this article you learned how to handle the close event of the browser on the client side and execute a server side method on the server code with the help of supported code samples.

2 comments:

  1. Hi,
    I tried the same code snippet but getting the following error
    Microsoft JScript runtime error: 'PageMethods' is undefined
    Please help me

    ReplyDelete
  2. if child form open in new tab and if it will be closed and parent page is as it is then what happans??

    ReplyDelete