ASP.NET MVC/jQuery/JSで変更されたデータを検出/処理する

Question

ASP.NET MVCのフォームで変更されたデータを汎用的に処理する必要があります。私たちのアプリケーションは〜100のフォームがあり、フォームの編集を開始して保存以外のものをクリックすると、ユーザにメッセージが表示されます（"あなたのデータは変更されました。すべての変更。 "）。

これは、JavaScriptを使用してSOが（質問しながら）実装しているようです。一般に、これが最善の方法ですか？また、どのようにこれを実装するための最良のヒント？

Answer 1

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  
    } 

Answer 2

私がこれをやったやり方は、ページが読み込まれたときに入力の初期値を保存するためにjavascriptを使うことです。次に、ページのロード時とは異なる入力値があるかどうかを確認するbeforeunloadハンドラがあります。いずれかの入力が変更された場合、ユーザーはページを離れることを確認するように指示し、キャンセルするとそのアクションを取り消します。私のサブミットロジックでは、beforeunloadチェックが起きないようにフラグを設定して、サブミットがプロンプトを表示しないようにします。

これを行うためのjQueryプラグインがあると思われますが、jQueryを使い始めて以来これを実装していません。私の以前のコードではPrototypeを使用しました。

：jQueryプラグインを見つけることができませんでしたが、私はそれを見逃していた可能性があります。ここで私はそれをどうやって行うのかのサンプルを紹介します。明らかに、もっと多くのことができます。注：純粋なjQueryで動作するようにはできませんでした。なぜ、ポップアップが2回現れるのか正確にはわかりません。

これはすべての入力要素で機能するはずです。ただし、ボタンを無視/処理するように変更することもできます。私は送信ボタンを無視するように調整しただけです（ポップアップなしでポストバックすることができます）。他のボタンタイプがページのアンロードを引き起こす可能性がある場合は、それに対処する必要があります。

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(); 
    }); 
});