Navigate away protection for ASP.NET Web Forms

johna by | May 20, 2015 | ASP.NET Web Forms Jquery/Javascript Web Development

I have wanted to add protection from vavigating away from some of my web forms but most of the solutions I have seen do not work well with ASP.NET with it's many possible ways of posting back and AJAX using Update Panels.

For my situation I wanted to protect against the user navigating away using the website's main navigation, closing the browser, clicking back or forward or even going to a favourite website. I did not want to protect against the user clicking any Button, Link Button or any control with AutoPostBack enabled within my form.

After a Stack Overflow question and investigation of many possible solutions I have created the following JavaScript/jQuery code that does this better than anything I found.

Please note that this code does not check whether any changes were made to the values in the form, although this functionality could be added easily. In my situation I wanted to protect against navigating away because my system had a form of record locking in place that required the user to exit correctly (or wait for lock to timeout).

var navigateAway = function (e) {
e = e || window.event;

//This is the message that is shown when navigating away improperly
var message = "Exiting the form this way will result in this record being locked to you. Use cancel changes instead to exit correctly";

if (e) {
e.returnValue = message;
}

return message;
}

function EnableUnloadEvent() {
window.onbeforeunload = navigateAway;
}

$(function () {
$("#myform select").change(function () {
window.onbeforeunload = null;
window.setTimeout("EnableUnloadEvent()", 100);
});

$("#myform").click(function (e) {
window.onbeforeunload = null;
window.setTimeout("EnableUnloadEvent()", 100);
});

EnableUnloadEvent();
});


#myform refers to the ID of the container (eg. DIV) that contains all of your form elements that can be clicked or changed without triggering the unload message. Anything outside of this container will trigger the message.

Should you want to only show the message if one or more of the form elements anywhere on the page have been changed, you could add functionality to store the initial values, then compare these in the unload event (some code sourced from Code Project). Note that if you have anything on your page that causes a full PostBack (rather than a partial PostBack) it will set and compare the initial values from the most recent PostBack, so won't be accurate.

var initialValue = "";

var navigateAway = function (e) {

if (initialValue != GetFormValues()) {

e = e || window.event;

var message = "Exiting the form this way will result in this record being locked to you. Use cancel changes instead to exit correctly";

if (e) {
e.returnValue = message;
}

return message;
}
}

function EnableUnloadEvent() {
window.onbeforeunload = navigateAway;
}

function GetFormValues() {
var formValues = "";
$.each($("form").serializeArray(), function (i, field) {
if (field.name != "__EVENTVALIDATION"
&& field.name != "__EVENTTARGET"
&& field.name != "__EVENTARGUMENT"
&& field.name != "__VIEWSTATE"
&& field.name != "__VIEWSTATEENCRYPTED") {

var inputField = $("[name=" + field.name + "]");
var displayProperty = $(inputField).css("display");

if (displayProperty != "none") {
formValues = formValues + "-" + field.name + ":" + field.value;
}
}
});

$(":checkbox").each(function () {
formValues = formValues + "-" + $(this).attr("checked");
});

$(":radio").each(function () {
formValues = formValues + "-" + $(this).attr("checked");
});

$(":file").each(function () {
formValues = formValues + "-" + $(this).val();
});
return formValues;
}

$(function () {

initialValue = GetFormValues();

$("#form select").change(function () {
window.onbeforeunload = null;
window.setTimeout("EnableUnloadEvent()", 100);
});

$("#form").click(function (e) {
window.onbeforeunload = null;
window.setTimeout("EnableUnloadEvent()", 100);
});

EnableUnloadEvent();
});

Related Posts

Web Development

How to set up a debugging using the Turnkey Linux LAMP stack and VS Code

by johna | December 19, 2023
The second part in my guide to setting up a website and database using the Turnkey Linux LAMP stack.

Website Hosting Web Development

How to set up a website and database using the Turnkey Linux LAMP stack

by johna | November 18, 2023
If you need to host your own website for the purposes of web development, Turnkey Linux LAMP Stack is an easy to install all-in-one solution that you can set up on a spare computer or a VM (Virtual Machine).

Web Development

Intermittent "Unable to read data from the transport connection: net_io_connectionclosed" errors

by johna | May 6, 2020
If you are having intermittent problems sending email in .NET using System.Net.Mail consider switching libraries.

Comments

There are no comments yet. Be the first to leave a comment!

Leave a Comment

About

...random postings about web development and programming, Internet, computers and electronics topics.

I recommend ASPnix for web hosting and Crazy Domains for domain registration.

Subscribe

Get the latest posts delivered to your inbox.