Click here to Skip to main content
15,868,141 members
Articles / Web Development / ASP.NET

Save Changes on Close of Browser or When Exiting the Page

Rate me:
Please Sign up or sign in to vote.
4.36/5 (23 votes)
24 Sep 2007CPOL4 min read 265.1K   5.2K   115   30
This article will show how to save changes on the close of the browser or when exiting a page.

Introduction

This article describes how to implement the functionality of saving changes on browser close or navigating away from the current web application. It also discusses the various ways that the user can exit a page and how to save data on those events.

Background

Many have been trying to implement the functionality of saving data on closing the browser. I was also one of them trying to find a way to implement the same. I had been to many forums and discussion boards, but couldn't find a way to implement this. I finally landed on a piece of JavaScript code (attached below) to trap the close event of an IE window, which actually helped me in implementing this functionality.

Using the Code

Navigation in a site can happen in two ways. Following is a list of actions by which users can navigate:

  • Navigating to pages using controls provided within the site.
  • Navigating to pages using browser controls, shortcut keys, or right click options.

Following are ways through which the user can navigate away from a page. All these are covered in this solution.

Navigation or postback using controls available in the application:

  • Image buttons
  • Link buttons
  • Submit buttons
  • Server controls with the "Autopostback" option set to true

Navigation through user actions, browser buttons, shortcut keys, closing the browser. Following is a list of ways by which this is achieved:

  • Back button on the browser Toolbar
  • Refresh button on the browser Toolbar
  • Close button on the browser Toolbar
  • Home button on the browser Toolbar
  • ALT + F4 to close the browser
  • CTRL + F4 (for tabbed browsers)
  • F5 or CTRL + R or Right click for refresh
  • ALT + Home button (to navigate to client's Home page)
  • Click backspace (alternative for Back button)
  • Typing a URL and navigating to a different page
  • Selecting a URL from the Favorites button
  • Right click and select Refresh

Identifying the different actions and enabling save for each action is a tedious process. The save functionality can be implemented in a simpler way using the JavaScript onbeforeunload event.

Reasons to use onbeforeunload

The onbeforeunload event (which is called before the unload event) is called when:

  • Navigating to another page (as mentioned above)
  • Postback due to a control event
  • Using controls on the browser
  • Closing the page

Thus, onbeforeunload is the appropriate event at which the save functionality can be implemented.

Implementation of the Save functionality

To differentiate between a user initiated event and a control initiated event, an attribute named tag is added with a value "DonotCallSaveonLoad" to all the known controls in the application, using which the Save method can be called without prompting the user to save the page.

Screenshot - Attributes-Add.png

event.srcElement will set the object of the control to the variable currentElement which initiated the postback. This will be set on the onClick event of the control.

Note: The onClick event is the only point where the Control object can be retrieved because the object of the control is destroyed when the process reaches the onbeforeUnload event.

The onbeforeUnload event calls the HandleOnClose function which checks if the variable currentElement has a value or not.

Screenshot - body-load.png

The JavaScript function HandleOnClose checks for this attribute tag of the currentElement object. If currentElement is null or the value of the tag attribute of currentElement is not DonotCallSaveonLoad, then it calls the function FunctiontoCallSaveData; otherwise, the save functionality on the code-behind is called.

Screenshot - Handle-Close.png

The implementation of the function FunctiontoCallSaveData is the same as previously sent, which is as follows:

Screenshot - Save-Data_Function.png

form.submit will in turn call Page_Load in which the Save functionality can be called. Error handling can also be performed for this functionality. The same is shown in the code snippet below:

Screenshot - Page-Load.png

Points to Note

This functionality cannot be debugged using breakpoints. This functionality can be verified by checking if the data has been updated in the data source. In the attached demo, there is a SQL script which creates a temporary table to which data is stored on the close of the browser. Please make necessary changes to the function SaveDataonPage on the .vb file as per your convenience. Exception Handling is implemented using Enterprise Library 2.0. Customizations can be done to its Exception Handling mechanism also.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect Spozzle
India India
A highly experienced and influential Technical Manager / Team Leader and Architect, an inspirational leader who has effectively managed, developed and motivated internal and external teams. Strong ability to quickly understand and analyze business strategies ensuring technology solutions meet business requirement, to quickly adapt to all new technologies and challenges.

My attention to detail, high technical aptitude and hands on approach together with a high degree of motivation and professionalism would make me an asset to any progressive organization or demanding position within IT industry.

What do I do?

I work at Spozzle(www.spozzle.me) as a Software Architect and currently working on the following technologies.

Web Technologies using

Java
PHP
XCode 4 and IPhone Development
HTML 5 and CSS
Android Development

My Experience

I have spent my last 7 years working on .NET Technology building application both on the Web and Windows.

I provide Technical consultations to people on

- .NET Development, Best Practices and Issues
- Best Practices on Web based Architecture and Hosting applications on Cloud.

I have not moved on to PHP, Java and Mobile Development. I now work at Spozzle developing really cool application for the Sports Fanatics on Facebook. Checkout http://apps.facebook.com/spozzle

Comments and Discussions

 
GeneralServer Postback Issue... Pin
Rohan Christian2-Oct-07 12:08
Rohan Christian2-Oct-07 12:08 
GeneralRe: Server Postback Issue... Pin
Abishek R Srikaanth3-Oct-07 21:31
Abishek R Srikaanth3-Oct-07 21:31 
GeneralRe: Server Postback Issue... Pin
Rohan Christian4-Oct-07 8:45
Rohan Christian4-Oct-07 8:45 
Generalmissed some events Pin
SkullKiller25-Sep-07 10:15
SkullKiller25-Sep-07 10:15 
AnswerRe: missed some events Pin
Abishek R Srikaanth3-Oct-07 21:27
Abishek R Srikaanth3-Oct-07 21:27 
GeneralIncomplete (defective) code Pin
fwsouthern12-Sep-07 23:10
fwsouthern12-Sep-07 23:10 
GeneralRe: Incomplete (defective) code Pin
Abishek R Srikaanth24-Sep-07 20:18
Abishek R Srikaanth24-Sep-07 20:18 
GeneralVery helpful Pin
samerh11-Sep-07 2:04
samerh11-Sep-07 2:04 
GeneralRe: Very helpful Pin
ricobano23-Oct-07 5:10
ricobano23-Oct-07 5:10 
GeneralNice Pin
Pooya Musavi7-Sep-07 10:05
Pooya Musavi7-Sep-07 10:05 
AnswerRe: Nice Pin
Rodrigo Rodriguez12-Sep-07 4:48
Rodrigo Rodriguez12-Sep-07 4:48 
Questiondoesn't work with FireFox Pin
barbod_blue1-Sep-07 20:50
barbod_blue1-Sep-07 20:50 
AnswerRe: doesn't work with FireFox Pin
Abishek R Srikaanth3-Sep-07 20:51
Abishek R Srikaanth3-Sep-07 20:51 
GeneralRe: doesn't work with FireFox Pin
dinesh12345815-Nov-10 23:35
dinesh12345815-Nov-10 23:35 
Questiondoesn't work with FireFox Pin
barbod_blue1-Sep-07 20:49
barbod_blue1-Sep-07 20:49 
GeneralGood Article Pin
merlin98129-Aug-07 4:53
professionalmerlin98129-Aug-07 4:53 
GeneralRe: Good Article Pin
Thanks for all the fish29-Aug-07 9:07
Thanks for all the fish29-Aug-07 9:07 
GeneralRe: Good Article Pin
merlin98129-Aug-07 11:47
professionalmerlin98129-Aug-07 11:47 
GeneralRe: Good Article Pin
Vimalsoft(Pty) Ltd31-Oct-07 20:03
professionalVimalsoft(Pty) Ltd31-Oct-07 20:03 
Questiondetect changes made? and go to other page? Pin
Thanks for all the fish29-Aug-07 3:32
Thanks for all the fish29-Aug-07 3:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.