Détection/traitement des données modifiées dans ASP.NET MVC/jQuery/JS

Question

Nous devons gérer de manière universelle les données modifiées sur les formulaires dans ASP.NET MVC. Notre application a ~ 100 formulaires, et l'utilisateur devrait être invité s'ils commencent à éditer un formulaire et cliquez sur autre chose que Enregistrer (par exemple quelque chose comme "Vos données ont été modifiées.Cliquez sur OK pour retourner au formulaire, ou Annuler pour perdre tous les changements. ").

Il semble que SO implémente ceci (en posant une question) en utilisant JavaScript. En général, est-ce la meilleure façon? En outre, des conseils sur la meilleure façon de mettre en œuvre cela?

Answer 1

JavaScript est votre seul coup pour ce faire. Il ne doit même pas être un tas compliqué de code. Tout ce que vous devez faire est d'avoir une variable globale pour signaler si le formulaire est en phase d'édition (var formEdited = false; ferait), puis ajouter cet extrait à votre page:

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

La façon dont j'ai fait cela est d'utiliser javascript pour stocker les valeurs initiales des entrées lorsque la page se charge. Ensuite, j'ai un gestionnaire beforeunload qui vérifie si l'une des entrées a une valeur différente que lorsque la page a été chargée. Si des entrées sont modifiées, l'utilisateur est invité à confirmer qu'il souhaite quitter la page, annulant ainsi l'action s'il annule. Dans ma logique de soumission, je mets un drapeau qui empêche la vérification de beforeunload de se produire, donc une soumission ne reçoit pas l'invite.

Je suppose qu'il existe un plugin jQuery pour cela, mais je ne l'ai pas implémenté depuis que j'ai commencé à utiliser jQuery. Mon code précédent utilisait Prototype.

Modifier: Impossible de trouver un plugin jQuery, mais je pourrais l'avoir raté. Voici un exemple de comment je pourrais le faire. Évidemment, il y a plus à faire. Note: Je n'ai pas réussi à l'utiliser avec jQuery pur - je ne sais pas exactement pourquoi, le popup apparaîtrait deux fois.

Cela devrait fonctionner avec tous les éléments d'entrée. Vous pourriez vouloir le changer pour ignorer/manipuler des boutons, cependant. Je l'ai seulement ajusté pour ignorer un bouton de soumission (ainsi il peut poster en arrière sans le popup). Si d'autres types de boutons peuvent entraîner le déchargement d'une page, vous devrez peut-être y remédier.

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