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.
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
Reasons to use onbeforeunload
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
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.
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.
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 calls the
HandleOnClose function which checks if the variable
currentElement has a value or not.
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.
The implementation of the function
FunctiontoCallSaveData is the same as previously sent, which is as follows:
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:
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.