Navigate away protection for ASP.NET Web Forms

John Avis by | May 20, 2015 | ASP.NET Web Forms Jquery/Javascript

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

Jquery/Javascript Responsive Web Design

Yet another enhancement of the simple Pinterest Style Grid Layout jQuery Plugin

by John Avis | November 16, 2017

I have made another change to the modified version of Mediademons Simple jQuery Plugin To Create Pinterest Style Grid Layout - Pinterest Grid.


Jquery/Javascript

Back to top button like Facebook app

by John Avis | September 15, 2017

The Facebook app on Windows phone has a nice and unobtrusive back to top button that only appears once you scroll past a certain point, and only when you start scrolling up the page. This code offers similar functionality using jQuery.


Bootstrap ASP.NET Web Forms

ASP.NET Web Forms and Bootstrap 3 Modals

by John Avis | July 6, 2017

There are a few methods for hiding and showing Bootstrap 3.x modals in an ASP.NET Web Forms application. This technique is pure ASP.NET (requires no client script) and allows you to show and hide modals by changing the Visible property of a containing PlaceHolder or Panel.

Comments

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

Leave a Comment
Tags
ASP.NET Html Forms ASP.NET MVC ASP.NET Web Forms ASP.NET Web Pages Bootstrap C# Classic ASP Cool Websites Databases eBay and PayPal Electrical Repairs General Hardware HTML/CSS Jquery/Javascript Media Center Mobile Phones Responsive Web Design SEO and Social Networking Web Design Web Development Web Security web+db Website Hosting Windows XP

About me

...mostly about web development and programming, with a little bit of anything else related to the Internet, computers and technology.

Subscribe

Get the latest posts delivered to your inbox.