Client/JS Framework für den Schutz von "ungespeicherten Daten"?

Question

Wir haben eine typische Webanwendung, die im Wesentlichen eine Dateneingabe-Anwendung mit vielen Bildschirmen ist, von denen einige einen gewissen Grad an Komplexität aufweisen. Wir müssen diese Standardfunktion bereitstellen, um sicherzustellen, dass der Benutzer gewarnt wird und abbrechen kann, wenn er vergisst, auf die Schaltfläche "Speichern" zu klicken, bevor er die Navigation abbricht oder seinen Browser schließt (nur wenn Daten ungespeichert oder nicht gespeichert sind).

Ich kenne die Grundlagen dessen, was ich tun muss - ich bin mir sogar ziemlich sicher, dass ich das alles im Laufe der Jahre bereits gemacht habe (Anknüpfung an onbeforeunload, Verfolgung des "dirty" Zustands der Seite usw...) aber bevor ich mich auf das Codieren dieses VORERST NOCHMAL begebe, hat jemand Vorschläge für bereits vorhandene Bibliotheken (kostenlos oder anderweitig), die helfen könnten?

Answer 1

Ich habe eine weitere kleine Verbesserung an den auf dieser Seite aufgeführten jQuery-Implementierungen vorgenommen. Meine Implementierung wird berücksichtigen, wenn Sie die clientseitige ASP.NET-Validierung aktiviert haben und auf einer Seite verwenden.

Es vermeidet den "Fehler", die onBeforeLeave-Funktion zu löschen, wenn die Seite aufgrund eines Validierungsfehlers tatsächlich nicht bei Klick übermittelt. Verwenden Sie einfach die Klasse no-warn-validate bei Schaltflächen/Links, die eine Validierung verursachen. Es gibt immer noch die Klasse no-warn, die bei Steuerelementen verwendet werden kann, bei denen CausesValidation=false ist (z. B. eine "Als Entwurf speichern"-Schaltfläche). Dieses Muster könnte wahrscheinlich auch für andere Validierungs-Frameworks als ASP.NET verwendet werden, daher poste ich es hier als Referenz.

 function removeCheck() { window.onbeforeunload = null; }

$(document).ready(function() {
    //-----------------------------------------------------------------------------------------
    // Verhindere das Navigieren von der Seite weg, wenn Änderungen am Formular vorgenommen wurden. Schaltflächen, Links,
    // etc. können die CSS-Klassen "no-warn" oder "no-warn-validate" erhalten, um eine Warnung beim Absenden zu verhindern.
    // Die Eingaben/Links mit "no-warn-validate" entfernen die Warnung nur nach erfolgreicher Validierung
    //-----------------------------------------------------------------------------------------
    $(':input').one('change', function() {
        window.onbeforeunload = function() {
            return 'Das Verlassen dieser Seite führt dazu, dass die Bearbeitungen verloren gehen.';
        }
    });

    $('.no-warn-validate').click(function() {
        if (Page_ClientValidate == null || Page_ClientValidate()) { removeCheck(); }
    });

    $('.no-warn').click(function() { removeCheck() });
});