Обнаружение / обработка измененных данных в ASP.NET MVC / jQuery / JS

Question

Нам нужно универсально обрабатывать измененные данные в формах в ASP.NET MVC. Наше приложение имеет ~ 100 форм, и пользователь должен получить запрос, если он начнет редактировать форму и щелкнет что-либо, кроме «Сохранить» (например, что-то вроде «Ваши данные были изменены. Нажмите« ОК », чтобы вернуться к форме, или« Отмена »). потерять все изменения. ").

Похоже, что SO реализует это (задавая вопрос), используя JavaScript. В общем, это лучший способ? Кроме того, какие-либо советы о том, как лучше всего это реализовать?

Answer 1

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

Я подозреваю, что для этого есть плагин jQuery, но я не реализовал это с тех пор, как начал использовать jQuery. Мой предыдущий код использовал Prototype.

Редактировать : Не удалось найти плагин jQuery, но я мог просто пропустить его. Вот пример того, как я могу это сделать. Очевидно, что это еще не все. Обратите внимание, что я не смог заставить его работать с чистым jQuery - точно не знаю почему, всплывающее окно появилось бы дважды.

Это должно работать со всеми элементами ввода. Вы могли бы хотеть изменить это, чтобы игнорировать / обрабатывать кнопки, все же. Я только настроил его, чтобы игнорировать кнопку отправки (чтобы он мог публиковать сообщения без всплывающего окна). Если другие типы кнопок могут вызвать выгрузку страницы, вам может потребоваться решить эту проблему.

var CheckOnClose = function() {
    this.initialize();
}

CheckOnClose.prototype = {
    submitting: false,
    initialize: function() {
        var that = this;
        window.onbeforeunload = function() { return that.checkLeavePage(); }
    },
    isChanged: function() {
        var changed = false;
        $('input:not(:submit)').each( function() {
            var iv = $(this).data('initialValue');
            if ($(this).val() != iv) {
                changed = true;
                return false;
            }
        });
        return changed;
    },
    setSubmitting: function() {
        this.submitting = true;
    },
    checkLeavePage: function() {
        if (!this.submitting && this.isChanged()) {
            return 'You have some unsaved changes.';
        }
    }
}

var checker = new CheckOnClose();

$(document).ready(function() {

    $(':input:not(:submit)').each( function() {
        $(this).data('initialValue',$(this).val() );
    });
    $(':submit').click( function() {
        checker.setSubmitting();
    });
});

Answer 2

JavaScript - ваш единственный шанс сделать это. Это даже не должно быть сложной связкой кода. Все, что вам нужно сделать, это иметь глобальную переменную, которая помечает, если форма находится на стадии редактирования (var formEdited = false; сделает), а затем добавьте этот фрагмент на свою страницу:

 window.onbeforeunload = confirmExit;
    function confirmExit()
    {
        if (formEdited)
        {
                return "You have attempted to leave this page.  If you have made any changes to the fields without Submitting the form, your changes will be lost.  Are you sure you want to exit this page?";
         }
          // no changes - return nothing      
    }