Ich muss eine Eingabeaufforderung "Nicht gespeicherte Änderungen" in einer ASP .Net-Anwendung implementieren. Wenn ein Benutzer Steuerelemente in einem Webformular ändert und versucht, vor dem Speichern zu navigieren, sollte eine Eingabeaufforderung angezeigt werden, die ihn vor nicht gespeicherten Änderungen warnt, und ihm die Option geben, abzubrechen und auf der aktuellen Seite zu bleiben. Die Eingabeaufforderung sollte nicht angezeigt werden, wenn der Benutzer keines der Steuerelemente berührt hat.
Idealerweise würde ich dies gerne in JavaScript implementieren. Gibt es jedoch bereits vorhandene Frameworks oder empfohlene Entwurfsmuster, um dies zu erreichen, bevor ich meinen eigenen Code einrolle? Idealerweise möchte ich etwas, das mit minimalen Änderungen problemlos auf mehreren Seiten wiederverwendet werden kann.
quelle
Antworten:
Verwenden von jQuery:
Nach Bedarf mit
onunload
/onbeforeunload
Methoden kombinieren.In den Kommentaren wird auf alle Eingabefelder verwiesen, ohne dass Code dupliziert wird:
Verwenden
$(":input")
bezieht sich auf alle Eingabe-, Textbereichs-, Auswahl- und Schaltflächenelemente.quelle
change
bei Texteingaben beim Verlassen / Verlieren des Fokus einmal ausgelöst wird, währendinput
bei jedem Tastendruck ausgelöst wird. (Ich benutze es normalerweise zusammenchange
mit JQuery'sone()
, um mehrere Ereignisse zu verhindern.)Ein Teil des Puzzles:
Und noch eine :
Packen Sie alles zusammen und was bekommen Sie?
Möglicherweise möchten Sie auch die Registrierung des
beforeunload
Ereignishandlers ändern, um die Ereignisregistrierung zu verwendenLIBRARY_OF_CHOICE
.quelle
onclick="window.onbeforeunload=null"
)Auf der ASPX-Seite benötigen Sie eine Javascript-Funktion, um festzustellen, ob die Formularinformationen "schmutzig" sind oder nicht.
Fügen Sie im Codebehind die Trigger zu den Eingabefeldern hinzu und setzen Sie sie auf die Schaltflächen zum Senden / Abbrechen zurück.
quelle
Im Folgenden werden die Onbeforeunload-Funktion und die JQuery des Browsers verwendet, um alle Onchange-Ereignisse zu erfassen. Die IT-Abteilung sucht auch nach Schaltflächen zum Senden oder Zurücksetzen, um das Flag zurückzusetzen, das anzeigt, dass Änderungen aufgetreten sind.
quelle
Vielen Dank für die Antworten an alle. Am Ende habe ich eine Lösung mit JQuery und dem Protect-Data- Plug-In implementiert . Auf diese Weise kann ich die Überwachung automatisch auf alle Steuerelemente auf einer Seite anwenden.
Es gibt jedoch einige Einschränkungen, insbesondere beim Umgang mit einer ASP .Net-Anwendung:
Wenn ein Benutzer die Option Abbrechen wählt, gibt die Funktion doPostBack einen JavaScript-Fehler aus. Ich musste den .submit-Aufruf in doPostBack manuell mit einem Try-Catch versehen, um ihn zu unterdrücken.
Auf einigen Seiten kann ein Benutzer eine Aktion ausführen, die ein Postback auf derselben Seite ausführt, jedoch kein Speichern ist. Dies führt dazu, dass die JavaScript-Logik zurückgesetzt wird, sodass sich nach dem Postback nichts geändert hat, wenn sich etwas geändert hat. Ich musste ein verstecktes Textfeld implementieren, das mit der Seite zurückgesendet wird und einen einfachen booleschen Wert enthält, der angibt, ob die Daten verschmutzt sind. Dies wird über Postbacks hinweg beibehalten.
Möglicherweise möchten Sie, dass einige Postbacks auf der Seite den Dialog nicht auslösen, z. B. eine Schaltfläche Speichern. In diesem Fall können Sie mit JQuery eine OnClick-Funktion hinzufügen, mit der window.onbeforeunload auf null gesetzt wird.
Hoffentlich ist dies hilfreich für alle anderen, die etwas Ähnliches implementieren müssen.
quelle
Allgemeine Lösung Unterstützung mehrerer Formulare auf einer bestimmten Seite ( einfach kopieren und in Ihr Projekt einfügen )
Hinweis: Diese Lösung wird aus den Lösungen anderer kombiniert, um eine allgemeine integrierte Lösung zu erstellen.
Eigenschaften:
quelle
_isDirty
von Aaron Powell beschriebene Variable. Ich habe nicht die Notwendigkeit gesehen, Klassen anstelle von Variablen im Javascript zum HTML hinzuzufügen und daraus zu entfernen.Die folgende Lösung funktioniert für Prototypen (getestet in FF, IE 6 und Safari). Es wird ein generischer Formularbeobachter verwendet (der das Formular auslöst: geändert, wenn Felder des Formulars geändert wurden), den Sie auch für andere Elemente verwenden können.
quelle
Hier ist eine einfache Javascript / JQuery-Lösung. Es berücksichtigt "Rückgängigmachungen" durch den Benutzer, ist zur Vereinfachung der Anwendung in einer Funktion gekapselt und löst beim Senden keine Fehlzündungen aus. Rufen Sie einfach die Funktion auf und übergeben Sie die ID Ihres Formulars.
Diese Funktion serialisiert das Formular einmal beim Laden der Seite und erneut, bevor der Benutzer die Seite verlässt. Wenn die beiden Formularzustände unterschiedlich sind, wird die Eingabeaufforderung angezeigt.
Probieren Sie es aus: http://jsfiddle.net/skibulk/Ydt7Y/
quelle
Ich habe kürzlich zu einem Open-Source-jQuery-Plugin namens dirtyForms beigetragen .
Das Plugin ist für die Arbeit mit dynamisch hinzugefügtem HTML ausgelegt, unterstützt mehrere Formulare, unterstützt praktisch jedes Dialog-Framework, greift vor dem Entladen des Dialogfelds auf den Browser zurück und verfügt über ein steckbares Hilfs-Framework, um das Abrufen des Status von benutzerdefinierten Editoren zu unterstützen (ein tinyMCE-Plugin ist enthalten). , funktioniert in iFrames und der Dirty-Status kann nach Belieben eingestellt oder zurückgesetzt werden.
https://github.com/snikch/jquery.dirtyforms
quelle
Das Erkennen von Formularänderungen mithilfe von jQuery ist sehr einfach:
quelle
Ich habe den obigen Vorschlag von Slace erweitert, um die meisten bearbeitbaren Elemente einzuschließen und auch bestimmte Elemente (mit einem CSS-Stil namens "srSearch" hier) vom Setzen des Dirty-Flags auszuschließen.
quelle
window.onbeforeunload = unloadPage;
quelle
Genau das ist das Fleegix.js Plugin
fleegix.form.diff
(http://js.fleegix.org/plugins/form/diff ) wurde für erstellt. Serialisieren Sie den Anfangszustand des Formulars beim Laden mitfleegix.form.toObject
(http://js.fleegix.org/ref#fleegix.form.toObject ) und speichern Sie es in einer Variablen. Vergleichen Sie es dann mit dem aktuellen Statusfleegix.form.diff
beim Entladen. Einfach wie Torte.quelle
Eine Methode , bei der Arrays zum Speichern der Variablen verwendet werden, damit Änderungen nachverfolgt werden können.
Hier ist eine sehr einfache Methode, um Änderungen zu erkennen , aber der Rest ist nicht so elegant.
Eine andere Methode, die ziemlich einfach und klein ist, aus Farfetched Blog :
quelle
In IE document.ready funktioniert nicht richtig, es werden die Werte der Eingabe aktualisiert.
Daher müssen wir das Ladeereignis innerhalb der document.ready-Funktion binden, die auch für den IE-Browser geeignet ist.
Unten finden Sie den Code, den Sie in die Funktion document.ready einfügen sollten.
quelle