ASP.NET, jQuery, les formulaires sales et window.onbeforeunload

Dans mon ASP.NET web app, je suis en train de créer un moyen universel d'avertir les utilisateurs avant de naviguer à l'extérieur à partir d'un formulaire quand ils ont fait des modifications, à l'aide de jQuery. Les choses assez standard, mais après beaucoup de recherche je n'ai pas encore trouver une technique qui fonctionne.

Voici ce que j'ai à ce point:

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

Cela fonctionne aussi loin que l'avertissement à l'utilisateur de naviguer à l'extérieur. Le problème est que je reçois le message d'avertissement sur tous les mêmes-la page de publication. Il y a un certain nombre de choses sur mes formulaires qui pourraient déclencher une publication:

Il y a Enregistrer, Annuler et Supprimer des linkbuttons sur la page
Il y a peut être d'autres linkbuttons sur la page d'exécuter côté serveur fonctionnalité, tout en restant sur la même page
Il pourrait y avoir d'autres contrôles avec autopostback=true qui ont également des fonctions côté serveur attaché à eux, mais qui n'étaient pas le résultat à l'utilisateur de quitter la page.

Aucune de ces choses devraient provoquer un avertissement, parce que l'utilisateur n'est pas quitter la page. Mon code tente de détourner addToPostBack (plus de détails sur cette question) pour effacer le isDirty peu avant de les publier, mais le problème est que dans IE onbeforeunload feux avant __doPostBack, apparemment parce que IE feux onbeforeunload immédiatement lorsque le lien est cliqué (comme décrit ici).

De stage, j'ai pu relier chacun de ces contrôles pour effacer le isDirty peu, mais je préfère une solution qui fonctionne sur le niveau de forme et qui ne nécessite pas que je touche à tous de contrôle unique qui pourrait déclencher une publication.

Quelqu'un aurait-il une approche qui fonctionne dans ASP.NET et qui n'implique pas de câblage à tous les contrôles qui pourraient causer une publication?

source d'informationauteur Herb Caudill

Je suis tombé sur ce post en Googler pour trouver une solution pour faire la même chose dans MVC. Cette solution, adaptée à partir de la plante ci-dessus, semble bien fonctionner. Depuis il n'y a rien MVC-spécifique à ce sujet, il devrait fonctionner tout aussi bien pour PHP, ASP Classique, ou tout autre type d'application qui utilise le HTML et 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; }

2

Vous pouvez toujours créer un inheirited la page de la classe qui a une coutume OnLoad/OnUnload méthode qui ajoute immédiate de l'exécution de javascript.

Alors vous n'avez pas à le traiter à un contrôle spécifique, mais plutôt de la forme/au niveau de la page.

Intéressant, mais... pourquoi ne pas tout faire avec 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;
···

Maintenant, si ça provoque toujours le même problème (unload déclenchement avant submit), vous pourriez essayer un autre événement arbredonc au lieu d'appeler __doPostBack directement vous faire...

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

Je n'ai pas essayé et c'est à partir du haut de ma tête, mais je pense que ça pourrait être une manière de le résoudre.

Eu que cela fonctionne essentiellement par le suivi de la position de la souris. Gardez à l'esprit que vous pouvez toujours obtenir des valeurs positives à votre valeur de Y (d'où mon < 50 lignes de code), mais aussi longtemps que vos boutons de soumission sont plus de 100 pixels vers le bas, vous devriez être bien.

Ici, c'est le Javascript, j'ai ajouté à la piste de la souris change et de capturer l'événement onbeforeunload:

    <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>

Puis il suffit d'ajouter le formulaire ci-dessous sur votre page:

    <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>

Et c'est tout! Il pourrait utiliser un peu de nettoyage (suppression de la MouseX, etc), mais cela a fonctionné dans mon ASP.net 3.5 application et de la pensée, je post pour aider quelqu'un. Fonctionne sous IE 7 et Firefox 3.6, n'ai pas essayé Chrome encore.

0

je suis à la recherche après cette trop mais ce que j'ai trouver, une solution qui utilise tous les contrôles html au lieu de asp.net contrôles web, avez-vous pensez de cela?
```
  <script type="text/javascript">
$(document).ready(function () {
$("form").dirty_form();
$("#btnCancel").dirty_stopper();
});             
</script>
```

Vous devez vous connecter pour publier un commentaire.