Click here to Skip to main content
11,489,693 members (72,026 online)
Click here to Skip to main content

AJAX Dirty-Panel

, 30 Apr 2007 68K 420 61
Rate this:
Please Sign up or sign in to vote.
This is a Panel that automatically shows an alert if the user tries to leave the page before saving the data.

Introduction

Have any of your users ever told you that after filling that long data entry form he accidentally closed the browser or moved to another page and forgot to click the save button? I heard this story more than once, and at the end my responses I often told he user something like "Well, you should pay more attention when you're filling out a form." Of course, I didn't say it using these words, but that was the only thing we could say.

In fact, keeping track of fields that were changed in classical ASP.NET forms is not an easy task. Since every postback fires the onbeforeunload event, there was no generic way of knowing if the postback was intentional or not. So we had to write a lot of custom JavaScript to manage that.

Now in the AJAX world, this limitation is gone. If we have a 100% "ajaxfied" page, the onbeforeunload event will fire only if the user actually leaves the page. It makes our lives much easier.

This is a Panel that automatically detects if any control inside it was changed and shows an alert if the user tries to leave the page before saving the data.

Click here to see a sample page.

Using the code

Once again I am using the Anthem.NET library to give AJAX functionality. This webcontrol inherits from the Anthem Panel, so what you need to do is to put all your data entry controls within this panel and set the property OnLeaveMessage. This property corresponds to the message that will be shown when the user tries to leave the page without saving its contents. When the user actually clicks the save button, you need to tell the panel to store the new values so it won't show the alert when the user leaves the page. This is done by calling the panel's Reset method when the data is saved.

The download file contains the webcontrol and a sample page.

Conclusion

This is a simple to use, yet very useful webcontrol that can enhance the usability of your web application.

I hope you enjoy it.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Cassio Mosqueira
Software Developer (Senior) Intelligent Coder
Canada Canada
I've been developing .NET enterprise applications since 2000.

I am originally from Rio de Janeiro and I am currently working at http://www.intelligentcoder.com in Ontario.

I also have my own startup where we offer client intake forms.

Comments and Discussions

 
Generalnice Work :-D Pin
XITIJ_CODE_0417-Feb-11 10:38
memberXITIJ_CODE_0417-Feb-11 10:38 
Generalneed licence for DirtyPanel.dll??? Urgent Pin
t1111117-May-09 22:46
membert1111117-May-09 22:46 
GeneralRe: need licence for DirtyPanel.dll??? Urgent Pin
Cassio Mosqueira8-May-09 3:47
memberCassio Mosqueira8-May-09 3:47 
GeneralCross Broswer Pin
Navneet Anuth22-Apr-09 2:41
memberNavneet Anuth22-Apr-09 2:41 
QuestionAJAX 1.0 (w/o anthem) Pin
dB.6-Aug-07 20:38
memberdB.6-Aug-07 20:38 
AnswerRe: AJAX 1.0 (w/o anthem) Pin
Cassio Alves6-Aug-07 21:41
memberCassio Alves6-Aug-07 21:41 
GeneralRe: AJAX 1.0 (w/o anthem) Pin
dB.10-Aug-07 17:41
memberdB.10-Aug-07 17:41 
Generalasp:FormView - Not Working Pin
Qasim Javed18-Jul-07 3:30
memberQasim Javed18-Jul-07 3:30 
GeneralRe: asp:FormView - Not Working Pin
Cassio Alves6-Aug-07 21:44
memberCassio Alves6-Aug-07 21:44 
GeneralTooltip Image Data Pin
ngovanphuc13-Jul-07 0:54
memberngovanphuc13-Jul-07 0:54 
Generalit does not work when you have item template in grid view [modified] Pin
tahhan11-May-07 20:44
membertahhan11-May-07 20:44 
GeneralRe: it does not work when you have item template in grid view Pin
Cassio Alves12-May-07 5:55
memberCassio Alves12-May-07 5:55 
GeneralPerfect timing Pin
Bryan Avery9-May-07 0:05
memberBryan Avery9-May-07 0:05 
GeneralVery cool Pin
Michael J. Collins8-May-07 9:09
memberMichael J. Collins8-May-07 9:09 
GeneralRe: Very cool Pin
Cassio Alves8-May-07 11:42
memberCassio Alves8-May-07 11:42 
GeneralRe: Very cool Pin
zhulei_209-May-07 16:32
memberzhulei_209-May-07 16:32 
GeneralDoesn't work in Opera 9.20 Pin
richzilla8-May-07 8:48
memberrichzilla8-May-07 8:48 
GeneralRe: Doesn't work in Opera 9.20 Pin
Cassio Alves8-May-07 11:52
memberCassio Alves8-May-07 11:52 
Questionhow to use control on on tab page Pin
just_kideng7-May-07 19:58
memberjust_kideng7-May-07 19:58 
AnswerRe: how to use control on on tab page Pin
Cassio Alves8-May-07 5:01
memberCassio Alves8-May-07 5:01 
AnswerRe: how to use control on on tab page Pin
just_kideng8-May-07 22:27
memberjust_kideng8-May-07 22:27 
GeneralNice work! Pin
Tim Brats6-May-07 9:15
memberTim Brats6-May-07 9:15 
GeneralCode project is not source repository Pin
Maruf Maniruzzaman30-Apr-07 17:35
memberMaruf Maniruzzaman30-Apr-07 17:35 
GeneralRe: Code project is not source repository Pin
Cassio Alves30-Apr-07 18:49
memberCassio Alves30-Apr-07 18:49 
GeneralRe: Code project is not source repository Pin
Maruf Maniruzzaman30-Apr-07 19:26
memberMaruf Maniruzzaman30-Apr-07 19:26 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150520.1 | Last Updated 30 Apr 2007
Article Copyright 2007 by Cassio Mosqueira
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid