Обработка грязных форм на стороне клиента ASP.NET

Question

Я пытался найти лучший способ справиться с этим, предупреждая пользователя веб-формы ASP.NET о надвигающейся потере данных из-за:

- Изменение формы с помощью ссылки, -Разбить "Назад", -Закрытие браузера

Я хочу, чтобы при этом появилось простое диалоговое окно, дающее им возможность изменить свое мнение. Если они это сделают, то форма остается. Если нет, продолжайте.

Я пробовал несколько плагинов jQuery, чтобы справиться с этим, и в настоящее время я использую dirty_form. Он правильно улавливает грязные формы и предупреждает меня, когда я нажимаю на ссылку или пытаюсь закрыть окно (оно не обрабатывается обратно).

К сожалению, обработки ситуации с грязной формой недостаточно, так как я не могу заставить ее ДЕЙСТВОВАТЬ. Мой код:

<script type="text/javascript">
    $(document).ready(function () {
        $("#form2").dirty_form().dirty(function (event, data) {
            /*what here */
        });
    });
</script>

Как мне установить это так, чтобы, если они решат идти вперед, это происходит, а если нет, то нет?

Кроме того, как перехватить функцию браузера «Назад» и обработать ее таким же образом?

Answer 1

После ответа на этот вопрос здесь, на SO, я успешно реализовал этот плагин dirty_form в нашем приложении.Вот что мы в итоге сделали:

// A global variable to table any existing onbeforeunload event
var oldOnBeforeUnloadEvent;

// onDirty event that gets triggered by the plugin.. add visual cue to the user to show dirtiness 
function onDirty(event, data) {
    $("#form2 div.dirtyIndicator").addClass("redAsteriskBG");
}

// onClean event that gets triggered by the plugin.. remove the dirty indicator
function onClean(event, data) {
    $("#form2 div.dirtyIndicator").removeClass("redAsteriskBG");
}

// Check for presence of any inputs that are changed
function checkForDirtyElements() {
    var message = '';
    var dirtyElements = $('.myChangedClassName').length;
    if (dirtyElements > 0) {
        message += "IF YOU CONTINUE, ALL YOUR CHANGES WOULD BE LOST!";
    }
    return message;
}

// Our onbeforeunload event that does all the magic
function myOnBeforeUnload() {
    var message = checkForDirtyElements();
    if (message === '') {
        if (oldOnBeforeUnloadEvent !== null) {
            message = oldOnBeforeUnloadEvent();
        }
    }
    if (message.length > 0) {
        return message;
    }
}

$(document).ready(function () {
    // On page load set-up/initialize the dirty form with onDirty and onClean events
    $("#form2").dirty_form({
        changedClass: 'myChangedClassName'
    }).dirty(onDirty).clean(onClean);

    // Save the existing onbeforeunload event to a global variable and attach our custom onbeforeunload
    oldOnBeforeUnloadEvent = window.onbeforeunload;
    window.onbeforeunload = myOnBeforeUnload;
});