Navigate away protection for ASP.NET Web Forms

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();
});