ASP.NET, jQuery, dirty-Formulare und Fenster.onbeforeunload

In meinem ASP.NET web-app, die ich versuche zu schaffen, eine Universelle Art und Weise der Warnung der Anwender vor der Navigation Weg von der einen form, wenn Sie änderungen vorgenommen haben, mithilfe von jQuery. Ziemlich standard Sachen, aber nach viel recherche habe ich noch eine Technik finden, die funktioniert.

Hier ist, was ich an dieser Stelle:

    addToPostBack = function(func) {
        var old__doPostBack = __doPostBack;
        if (typeof __doPostBack != 'function') {
            __doPostBack = func;
        } else {
            __doPostBack = function() {
                old__doPostBack();
                func();
            }
        }
    }

    var isDirty = false;

    $(document).ready(function() {
        addToPostBack(function() {
            alert("Postback detected.")
            clearDirty();
        });
        $(':input').bind("change select keydown", setDirty);
        window.onbeforeunload = function(e) {
            var msg = "You have unsaved changes. "
            if (isDirty == true) {
                var e = e || window.event;
                if (e) { e.returnValue = msg; }
                return msg;
            }
        };
    });

    setDirty = function() {isDirty = true;}

    clearDirty = function() {isDirty = false;}

Diese arbeiten so weit als Warnung der Benutzer von der Navigation Weg. Das problem ist, dass ich die Warnung auf jeder derselben-Seite postback. Es gibt eine Reihe von Dingen auf meine Formulare, die möglicherweise auslösen eines Postbacks:

Es Speichern, Abbrechen und Löschen, die linkbuttons auf der Seite
Kann es andere linkbuttons auf der Seite das ausführen von server-side-Funktionen, während Sie auf der gleichen Seite
Kann es andere Steuerelemente mit autopostback=true, die haben auch server-side-Funktionen mit Ihnen verbunden, aber die führen nicht dazu, dass der Benutzer die Seite verlassen.

Keines dieser Dinge sollte provozieren eine Abmahnung, weil der Benutzer nicht die Seite verlassen. Mein code versucht zu entführen addToPostBack ( mehr details auf, dass in dieser Frage ), deaktivieren Sie die isDirty-bit-vor dem posten zurück, aber das problem ist, dass im IE onbeforeunload feuert, bevor die __doPostBack-anscheinend, weil der IE feuert onbeforeunload sofort, wenn ein link angeklickt wird (wie hier beschrieben).

Natürlich, ich könnte den Draht bis jedes dieser Steuerelemente zu deaktivieren Sie die isDirty-bit, aber ich würde es vorziehen, eine Lösung, die arbeitet auf der form-Ebene und verlangt nicht, dass ich berühre, jedes einzelne Steuerelement ein postback auslösen könnte.

Hat jemand einen Ansatz, funktioniert in ASP.NET und die, die nicht die Verdrahtung von jeder Steuerung, die verursachen könnten ein postback?

InformationsquelleAutor der Frage Herb Caudill | 2009-08-05

Stieß ich auf diesen Beitrag beim Googeln nach einer Lösung für das gleiche zu tun, was in MVC. Diese Lösung, angepasst von Kraut ' s vor, die gut zu funktionieren scheint. Da gibt es nichts MVC-Inhaltsangaben, es sollte genauso gut funktionieren für PHP, Classic ASP, oder jede andere Art von Anwendung, die HTML-und JQuery.

var isDirty = false;

$(document).ready(function () {
    $(':input').bind("change select keydown", setDirty);
    $('form').submit(clearDirty);

    window.onbeforeunload = function (e) {
        var msg = "You have unsaved changes. "
        if (isDirty == true) {
            var e = e || window.event;
            if (e) { e.returnValue = msg; }
            return msg;
        }
    };
});

setDirty = function () { isDirty = true; }
clearDirty = function () { isDirty = false; }

InformationsquelleAutor der Antwort Kevin Crumley

2

Konnte man immer erstellen Sie eine inheirited Seite der Klasse, die eine benutzerdefinierte OnLoad/OnUnload-Methode fügt hinzu, dass im unmittelbaren Ausführung javascript.

Dann müssen Sie nicht haben, um es bei einer Kontrolle bestimmte Ebene, sondern vielmehr die form/page-Ebene.

InformationsquelleAutor der Antwort Jonathan

Interessant, aber..., warum nicht tun Sie alles, was mit jQuery?

var  defaultSubmitControl = false;
var  dirty = false;
$(document).ready(function( ) {
    $('form').submit(function( ) { dirty = false });
    $(window).unload(function( ) {
        if ( dirty && confirm('Save?') ) {
            __doPastBack(defaultSubmitControl || $('form :submit[id]').get(0).id, '');
        }
    });
});
···
dirty = true;
···

Nun, wenn das immer noch verursacht das gleiche Problem (unload auslösen, bevor submit), könnten Sie versuchen, eine andere event treeso dass anstelle der Berufung __doPostBack direkt Sie tun...

setTimeout(function( ) {
    __doPastBack(defaultSubmitControl || $('form :submit[id]').get(0).id, '');
}, 1);  //I think using 0 (zero) works too

Habe ich noch nicht versucht, und es ist aus der Spitze von meinem Kopf, aber ich denke, es könnte ein Weg sein, um es zu lösen.

InformationsquelleAutor der Antwort void

Bekam dies funktioniert indem man im Grunde die Verfolgung der position der Maus. Denken Sie daran, Sie können immer noch positiven Werte der Y-Wert (daher mein < 50 Zeile code), aber so lange, wie Sie Ihre submit-buttons sind mehr als 100 Pixel nach unten, Sie sollten in Ordnung sein.

Hier ist das Javascript habe ich Hinzugefügt, um track-änderungen der Maus und erfassen die onbeforeunload-Ereignis:

    <script language="JavaScript1.2">
    <!--

    //Detect if the browser is IE or not.
    //If it is not IE, we assume that the browser is NS.
    var IE = document.all?true:false

    //If NS -- that is, !IE -- then set up for mouse capture
    if (!IE) document.captureEvents(Event.MOUSEMOVE)

    //Set-up to use getMouseXY function onMouseMove
    document.onmousemove = getMouseXY;

    //Temporary variables to hold mouse x-y pos.s
    var tempX = 0
    var tempY = 0

    //Main function to retrieve mouse x-y pos.s

    function getMouseXY(e) {
      if (IE) { //grab the x-y pos.s if browser is IE
        tempX = event.clientX + document.body.scrollLeft
        tempY = event.clientY + document.body.scrollTop
      } else {  //grab the x-y pos.s if browser is NS
        tempX = e.pageX
        tempY = e.pageY
      }  
      //catch possible negative values in NS4
      if (tempX < 0){tempX = 0}
      if (tempY < 0){tempY = 0}  
      //show the position values in the form named Show
      //in the text fields named MouseX and MouseY
      document.Show.MouseX.value = tempX
      document.Show.MouseY.value = tempY
      return true
    }

    //-->
    </script>


    <script type="text/javascript">

        window.onbeforeunload = HandleOnClose;

        function HandleOnClose(e) {

            var posY = 0;
            var elem = document.getElementsByName('MouseY');
            if (elem[0]) {
                posY = elem[0].value;
            }

            if (posY < 50) {    //Your form "submit" buttons will hopefully be more than 100 pixels down due to movement
                return "You have not selected an option, are you sure you want to close?";
            }
        }

    </script>

Dann fügen Sie einfach Folgendes Formular auf Ihrer Seite:

    <form name="Show">
        <input type="hidden" name="MouseX" value="0" size="4">
        <input type="hidden" name="MouseY" value="0" style="display:block" size="0">
    </form>

Und das ist es! Es könnte ein wenig bereinigen (entfernen Sie die MouseX, etc), aber das war in meiner bestehenden ASP.net 3.5 Anwendung und dachte, ich würde post, um jemandem zu helfen. Funktioniert im IE 7 und Firefox 3.6, noch nicht versucht Chrome noch.

InformationsquelleAutor der Antwort Mark Kadlec

ich bin auf der Suche nach diesem auch, aber was ich finde so weit ist, eine Lösung mit allen html-Steuerelemente statt asp.net web-Steuerelemente, haben Sie daran gedacht?

  <script type="text/javascript">
    $(document).ready(function () {
      $("form").dirty_form();
      $("#btnCancel").dirty_stopper();
    });             
  </script>

InformationsquelleAutor der Antwort Nick Kahn

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.