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      
    }

在ASP.NET MVC / jQuery / JS中检测/处理已更改的数据

2 个答案: