Detectando/manejando datos cambiados en ASP.NET MVC/jQuery/JS

Question

Necesitamos manejar universalmente datos modificados en formularios en ASP.NET MVC. Nuestra aplicación tiene ~ 100 formularios, y se debe solicitar al usuario si comienza a editar un formulario y hacer clic en otra cosa que no sea Guardar (es decir, algo así como "Sus datos han cambiado. Haga clic en Aceptar para regresar al formulario o en Cancelar para perder todos los cambios. ").

Parece que SO implementa esto (al hacer una pregunta) mediante JavaScript. En general, ¿es esta la mejor manera? Además, ¿algún consejo sobre la mejor manera de implementar esto?

Answer 1

JavaScript es la única oportunidad que tiene para hacerlo. Ni siquiera tiene que ser un complicado grupo de código. Todo lo que tiene que hacer es tener una variable global a la bandera si el formulario está en etapas de edición (var formEdited = false; haría), y luego añadir este fragmento a su página:

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 forma en que he hecho esto es usar javascript para almacenar los valores iniciales de las entradas cuando se carga la página. Luego tengo un controlador de descarga previa que verifica si alguna de las entradas tiene un valor diferente de cuando se cargó la página. Si se modifican las entradas, solicita al usuario que confirme que quiere abandonar la página, cancelando la acción si cancelan. En mi lógica de envío, establezco un indicador que impide que la verificación de la carga previa ocurra, por lo que un envío no recibe el aviso.

Sospecho que hay un complemento jQuery para hacer esto, pero no lo he implementado desde que comencé a usar jQuery. Mi código anterior usó Prototype.

Editar: No se pudo encontrar un complemento jQuery, pero podría haberlo perdido. Aquí hay una muestra de cómo podría hacerlo. Obviamente, hay más que se puede hacer. Tenga en cuenta que no pude hacer que funcione con jQuery puro - no estoy seguro exactamente por qué, la ventana emergente aparecería dos veces.

Esto debería funcionar con todos los elementos de entrada. Sin embargo, es posible que desee cambiarlo para ignorar/manejar los botones. Solo lo ajusté para ignorar un botón de enviar (para que pueda publicar de nuevo sin la ventana emergente). Si otros tipos de botones pueden causar la descarga de una página, es posible que deba abordar eso.

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