It’s a common problem: “I have an ASP .Net data entry form and all of my users are mad at me because they closed their browser and they lost their unsaved data!”
If I had a dollar for every time I had to re-enter my shipping address because I used my back button when the site creator didn’t want me to… well I’d have enough dollars to make the mistake a few more times, probably buying robot parts on
Sparkfun.
Amazingly though, adding
JavaScript code to your ASPX page to prevent this is almost trivial once you know what you’re doing (the previous link is for reference only… if you haven’t heard of JavaScript, you’ve been in a coma since the late 90’s). JavaScript lets you fire the special “onbeforeunload” event before the data is lost on the page, something that you can’t really do using code behind.
This event lets you warn the user before they navigate away from the page via clicking the explorer back button, following a link on the page, or even by closing the browser window! For more details of the onbeforeunload event, see my previous blog,
here.
Assign the appropriate JavaScripts to your page controls (guidelines are shown in the tables below):
|
Which JavaScript Functions to Use
|
|
Data Entry Controls
|
javascript:DataEdit()
|
|
Data Entry Controls that Post back
|
javascript:DataEditWithPostback()
|
|
Non Data Entry Controls that Post back (i.e. action buttons on the form)
|
javascript:Postback()
|
|
Controls that save the data
|
javascript:DataSave()
|
|
Properties to Assign Scripts To
|
|
Textbox
|
onkeyup and/or onchange
|
|
DropDownList
|
onchange
|
|
Checkbox
|
onclick
|
|
Button
|
onclientclick
|
|
Description
|
Example
|
Code Snippet
|
|
Textbox that does not post back
|
A username field
|
<asp:TextBox ID="txtUsername" runat="server" onkeyup="javascript:DataEdit()" onchange="javascript:DataEdit()"/>
|
|
Textbox that does post back
|
An amount field that is used in a running total
|
<asp:TextBox ID="txtAmount" runat="server" AutoPostBack="True" onkeyup="javascript:DataEdit()" onchange="javascript:DataEditWithPostBack()"/>
|
|
DropDownList that does not post back
|
A selection from a list, such as a group
|
<asp:DropDownList ID="ddlGroup" runat="server" onchange="javascript:DataEdit()"/>
|
|
DropDownList that does post back
|
A selection such as a type that changes the context of the form
|
<asp:DropDownList ID="ddlType" runat="server" AutoPostBack="True" onchange="javascript:DataEditWithPostBack()"/>
|
|
A checkbox
|
A “Yes / No” field
|
<asp:CheckBox ID="cxbNotify" runat="server" onclick="javascript:DataEdit()"/>
|
|
A button that posts back
|
A “Next Page” button
|
<asp:Button ID="btnNextPage" runat="server" Text="Next" onclientclick="javascript: PostBack()"/>
|
|
A button that posts back and changes data
|
An “Add New Row” button
|
<asp:Button ID="btnAddRow" runat="server" Text="Add Row" onclientclick="javascript: DataEditPostBack()"/>
|
|
Button that runs code to save data
|
Button that runs the page save function
|
<asp:Button ID="btnSave" runat="server" Text="Save" onclientclick="javascript:DataSave()" OnClick="fnSave"/>
|
Finally, copy this code onto the bottom of you ASCX page:
<div style="display: none;">
<asp:CheckBox ID="chkShowWarning" runat="server" />
</div>
<script type="text/javascript">
var bShowWarning=new Boolean();
var bPostBack=new Boolean();
function DataEdit() {
bShowWarning = true;
document.getElementById('<%=chkShowWarning.ClientID%>').checked = bShowWarning;
}
function PostBack() {
bPostBack = true;
}
function DataEditWithPostBack() {
bShowWarning = true;
bPostBack = true;
document.getElementById('<%=chkShowWarning.ClientID%>').checked = bShowWarning;
}
function DataSave() {
bShowWarning = false;
bPostBack = true;
document.getElementById('<%=chkShowWarning.ClientID%>').value = bShowWarning;
}
function LoadWindow() {
bShowWarning = document.getElementById('<%=chkShowWarning.ClientID%>').checked
bPostBack = false;
}
function UnLoadWindow() {
if (!(bShowWarning) || bPostBack) {
return
}
return 'If you leave the page your data will be lost.'
}
window.onbeforeunload = UnLoadWindow;
window.onload = LoadWindow;
</script>
If you’ve done everything right, your application should now show a pop-up warning if and only if you try to navigate away from the page after editing a control and before saving.