Navigate away protection for ASP.NET Web Forms

John Avis 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.
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

Computers & Internet Web Development Website Hosting

500 Internal Server Error after migrating from IIS 7.5 to IIS 10

by John Avis | November 4, 2019

As support ends for Microsoft Windows Server 2008 I have recently gone through migrating some websites to a new server running Windows Server 2016 and IIS 10 but some of the websites did not work.


Jquery/Javascript Web Development

tagInput: A simple jQuery plugin for tag entry using Bootstrap 4

by John Avis | October 15, 2019

For a website project I needed a way to enter multiple tags. I just wanted something simple that I could easily modify to suit my own needs, so I wrote my own.


ASP.NET Web Forms Web Development

ASP.NET bug with RadioButton GroupName in Repeater

by John Avis | September 1, 2019

I rediscovered a bug in ASP.NET that affects RadioButtons inside repeaters. Here is my solution to the problem.

Comments

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

Leave a Comment

Tags

About me

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

Subscribe

Get the latest posts delivered to your inbox.