在ASP.NET MVC / jQuery / JS中檢測/處理已更改的數據

Question

我們需要在ASP.NET MVC中普遍處理表單上的已更改數據。 我們的應用程序有大約100個表單，如果用戶開始編輯表單並單擊除保存以外的任何內容（例如“您的數據已被更改”，請單擊“確定”返回到表單，或者單擊“取消”以丟失所有表單）變化。“ ）。

看起來SO使用JavaScript實現了這個（同時提出問題）。 一般來說，這是最好的方法嗎？ 另外，有關如何最好地實現這一點的任何提示？

Answer 1

我這樣做的方法是使用javascript在頁面加載時存儲輸入的初始值。 然后我有一個beforeunload處理程序，它檢查是否有任何輸入具有與加載頁面時不同的值。 如果更改了任何輸入，則會提示用戶確認他們要離開頁面，如果取消則取消操作。 在我的提交邏輯中，我設置了一個標志，用於保持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      
    }