Я реализовал предупреждение «несохраненные изменения», используя методы, описанные на этих страницах:
Клиент / JS Framework для защиты "несохраненных данных"?
http://kenbrowning.blogspot.com/2009/01/using-jquery-to-standardize.html
Это хорошо работает, за исключением DropDownList на странице. Это делает AutoPostBack, и я хочу, чтобы onbeforeunload срабатывал, потому что несохраненные изменения будут потеряны, но это не работает. Должно ли это вызывать событие onbeforeunload? Можно ли как-нибудь заставить его поднять событие?
Изменить:
DropDownList находится внутри UpdatePanel, так что это означает, что он не выгружает страницу, и именно поэтому onbeforeunload не запускается. Есть ли способ, которым я могу вызвать событие программно? Или я должен свернуть свой собственный диалог подтверждения имитации?
Edit2
Теперь у меня есть решение, которое добавляет диалог к асинхронным обратным передачам из UpdatePanel. Я отредактировал оригинальный скрипт, добавив вызов setConfirmAsyncPostBack (), как описано в моем решении.
Вот мой JavaScript:
/****Scripts to warn user of unsaved changes****/
//https://stackoverflow.com/questions/140460
//http://jonstjohn.com/node/23
//Activates the confirm message onbeforeunload.
function setConfirmUnload(on) {
setConfirmAsyncPostBack();
if (on) {
removeCheckFromNoWarnClasses();
fixIEonBeforeUnload();
window.onbeforeunload = unloadMessage
return;
}
window.onbeforeunload = null
}
function unloadMessage() {
return 'You have unsaved changes.';
}
//Moves javascript from href to onclick to prevent IE raising onbeforeunload unecessarily
//http://kenbrowning.blogspot.com/2009/01/using-jquery-to-standardize.html
function fixIEonBeforeUnload() {
if (!$.browser.msie)
return;
$('a').filter(function() {
return (/^javascript\:/i).test($(this).attr('href'));
}).each(function() {
var hrefscript = $(this).attr('href');
hrefscript = hrefscript.substr(11);
$(this).data('hrefscript', hrefscript);
}).click(function() {
var hrefscript = $(this).data('hrefscript');
eval(hrefscript);
return false;
}).attr('href', '#');
}
//Removes warnings from Save buttons, links, etc, that have been can be given "no-warn" or "no-warn-validate" css class
//"no-warn-validate" inputs/links will only remove warning after successful validation
//use the no-warn-validate class on buttons/links that cause validation.
//use the no-warn class on controls that have CausesValidation=false (e.g. a "Save as Draft" button).
function removeCheckFromNoWarnClasses() {
$('.no-warn-validate').click(function() {
if (Page_ClientValidate == null || Page_ClientValidate()) {
setConfirmUnload(false);
}
});
$('.no-warn').click(function() {
setConfirmUnload(false);
});
}
//Adds client side events to all input controls to switch on confirmation onbeforeunload
function enableUnsavedChangesWarning() {
$(':input').one('change', function() {
window.onbeforeunload = function() {
return 'You have unsaved changes.';
}
});
removeCheckFromNoWarnClasses();
}
И на моей странице ASP.NET, когда пользователь вносит изменения:
if (changed)
{
...
//Confirm unload if there are unsaved changes.
//NB we also have to call fixIEonBeforeUnload() to fix links, done in in page load to include links that are rendered during callbacks
ScriptManager.RegisterStartupScript(Page, GetType(), "unsavedchanges", "setConfirmUnload(true);", true);
}
else
...