SimpleModal unterbricht ASP.Net-Postbacks

StackOverflow https://stackoverflow.com/questions/29174

Frage

Ich benutze jQuery Und SimpleModal in einem ASP.Net-Projekt, um einige nette Dialoge für eine Web-App zu erstellen.Leider können alle Schaltflächen in einem modalen Dialog ihre Postbacks nicht mehr ausführen, was nicht wirklich akzeptabel ist.

Es gibt eine Quelle, die ich mit a gefunden habe Problemumgehung, aber ich schaffe es beim besten Willen nicht, es zum Laufen zu bringen, vor allem, weil ich nicht alle notwendigen Schritte vollständig verstehe.

Ich habe auch eine Problemumgehung, die darin besteht, die Postbacks zu ersetzen, aber das ist hässlich und wahrscheinlich nicht die zuverlässigste.Ich würde die Postbacks wirklich gerne wieder zum Laufen bringen.Irgendwelche Ideen?

AKTUALISIEREN:Ich sollte klarstellen, dass die Postbacks nicht funktionieren, weil das zum Ausführen der Postbacks verwendete Javascript auf irgendeine Weise fehlerhaft ist, sodass beim Klicken auf die Schaltfläche überhaupt nichts passiert.

War es hilfreich?

Lösung

Sie waren beide auf dem richtigen Weg.Mir ist aufgefallen, dass SimpleModal den Dialog an den Textkörper anhängt, der sich außerhalb von ASP.Net befindet <form>, was die Funktionalität beeinträchtigt, da die Elemente nicht gefunden werden können.

Um das Problem zu beheben, habe ich einfach die SimpleModal-Quelle geändert, um alles daran anzuhängen 'form' anstatt 'body'.Wenn ich den Dialog erstelle, verwende ich auch die persist: true Option, um sicherzustellen, dass die Tasten beim Öffnen und Schließen an Ort und Stelle bleiben.

Vielen Dank an alle für die Vorschläge!

AKTUALISIEREN: Version 1.3 fügt eine hinzu appendTo Option in der Konfiguration zur Angabe, an welches Element der modale Dialog angehängt werden soll. Hier sind die Dokumente.

Andere Tipps

Alle Standard-ASP.NET-Postbacks funktionieren durch den Aufruf einer __doPostBack-Javascript-Methode auf der Seite.Diese Funktion sendet das Formular (ASP.NET mag eigentlich nur ein Formular pro Seite), das ein verstecktes Eingabefeld enthält, in dem der gesamte Ansichtszustand und andere nützliche Dinge gespeichert sind.

Auf den ersten Blick kann ich in SimpalModal nichts sehen, was das Formular Ihrer Seite oder eine der versteckten Standardeingaben vermasseln würde, es sei denn, der Inhalt dieses Modals stammt zufällig von einem HTTP-GET zu einer ASP.NET-Seite.Das würde dazu führen, dass zwei ASP.NET-Formulare in einem DOM gerendert würden, und würde mit ziemlicher Sicherheit die __doPostBack-Funktion vermasseln.

Haben Sie darüber nachgedacht, das zu verwenden? ASP.NET AJAX ModalPopup-Steuerelement?

Webbrowser posten keine deaktivierten oder ausgeblendeten Formularelemente.

Was also passiert ist:

  1. Der Benutzer klickt auf eine Schaltfläche in Ihrem Dialog.
  2. Die Schaltfläche ruft die close()-Methode von SimpleModal auf und blendet den Dialog und die Schaltfläche aus
  3. Der Client sendet das Formular (ohne die ID der Schaltfläche) per Post.
  4. Das ASP.NET-Framework kann nicht herausfinden, auf welche Schaltfläche geklickt wurde
  5. Ihr serverseitiger Code wird nicht ausgeführt.

Die Lösung besteht darin, alles zu tun, was Sie auf dem Client tun müssen (in diesem Fall den Dialog zu schließen) und dann selbst __doPostback() aufzurufen.

Beispiel (wobei „dlg“ die clientseitige SimpleModal-Dialogreferenz ist):

btn.OnClientClick = string.Format("{0}; dlg.close();",
                        ClientScript.GetPostBackEventReference(btn, null));

Dadurch sollte der Dialog ausgeblendet, das Formular gesendet und das serverseitige Ereignis aufgerufen werden, das Sie für diese Schaltfläche haben.

@Dan

Alle Standard-ASP.NET-Postbacks funktionieren durch den Aufruf einer __doPostBack-Javascript-Methode auf der Seite.

asp:Buttons rufen __doPostback() nicht auf, da HTML-Eingabesteuerelemente das Formular bereits senden.

Das hat mich überrascht – vielen Dank an tghw und alle anderen Mitwirkenden im Appendto-Formular anstelle von Body Fix.(durch Attribute in der Version 1.3 gelöst)

Übrigens:Wenn jemand den Dialog programmgesteuert über .net schließen muss, können Sie diese Art von Syntax verwenden

private void CloseDialog()
{
    string script = string.Format(@"closeDialog()");
    ScriptManager.RegisterClientScriptBlock(this, typeof(Page), UniqueID, script, true);
}

wo das Javascript von Closedialog so ist ....

    function closeDialog() {
        $.modal.close();
    }

Ich habe die folgenden Werke gefunden, ohne simplemodal.js zu ändern:

function modalShow(dialog) {

    // if the user clicks "Save" in dialog
    dialog.data.find('#ButtonSave').click(function(ev) {
        ev.preventDefault();

        //Perfom validation                

        // close the dialog
        $.modal.close();

        //Fire the click event of the hidden button to cause a postback
        dialog.data.find('#ButtonSaveTask').click();
    });

    dialog.data.find("#ButtonCancel").click(function(ev) {
        ev.preventDefault();
        $.modal.close();
    });
}

Anstatt also die Schaltflächen im Dialog zu verwenden, um das Postback auszulösen, verhindern Sie deren Übermittlung, suchen dann eine versteckte Schaltfläche im Formular und rufen deren Klickereignis auf.

FWIW, ich habe das aktualisiert Blogbeitrag, auf den Sie hingewiesen haben mit der folgenden Klarstellung, hier erneut gepostet – die Begründung und weitere Details finden Sie im Blog-Beitrag:

Die Lösung (Stand meines letzten Check-ins vor dem Mittagessen):

  1. Überschreiben Sie das onClose-Ereignis des Dialogs und gehen Sie wie folgt vor:
    1. Rufen Sie die Standardfunktion „Schließen“ des Dialogs auf
    2. Legen Sie den innerHTML-Wert des Dialog-Divs auf ein einzelnes fest
    3. Entführen Sie __doPostBack und verweisen Sie es auf eine neue Funktion, newDoPostBack

Aufgrund einiger Kommentare, die ich im Internet gesehen habe, bedarf Punkt 1 einer Klarstellung.Leider bin ich nicht mehr beim selben Arbeitgeber und habe keinen Zugriff auf den Code, den ich verwendet habe, aber ich werde tun, was ich kann.Zunächst müssen Sie die onClose-Funktion des Dialogs überschreiben, indem Sie eine neue Funktion definieren und Ihren Dialog wie folgt darauf verweisen:

$('#myJQselector').modal({onClose: mynewClose});
  • Rufen Sie die Standardfunktion „Schließen“ des Dialogs auf.In der von Ihnen definierten Funktion sollten Sie zunächst die Standardfunktionalität aufrufen (eine bewährte Methode für fast alles, was Sie normalerweise überschreiben):
  • Legen Sie den innerHTML-Wert des Dialog-Divs auf ein einzelnes fest– Dies ist kein erforderlicher Schritt. Überspringen Sie ihn also, wenn Sie ihn nicht verstehen.
  • Entführen Sie __doPostBack und verweisen Sie es auf eine neue Funktion, newDoPostBack 
function myNewClose (dialog)
{
    dialog.close();
    __doPostBack = newDoPostBack;
}
  1. Schreiben Sie die newDoPostBack-Funktion: 
function newDoPostBack(eventTarget, eventArgument)
{
    var theForm = document.forms[0];
    if (!theForm)
    {
        theForm = document.aspnetForm;
    }
 
    if (!theForm.onsubmit || (theForm.onsubmit() != false))
    {
        document.getElementById("__EVENTTARGET").value = eventTarget;
        document.getElementById("__EVENTARGUMENT").value = eventArgument;
        theForm.submit();
    }
}

Das neue Jquery.simplemodal-1.3.js verfügt über eine Option namens appendTo.Fügen Sie also eine Option namens appendTo:'form' hinzu, da die Standardeinstellung appendTo:'body' ist, was in asp.net nicht funktioniert.

Hatte das gleiche Problem, aber {appendTo:'form'} hat dazu geführt, dass das modale Popup völlig falsch gerendert wurde (als ob ich ein CSS-Problem hätte).

Es stellt sich heraus, dass die Vorlage, auf der ich aufbaue, Einbindungen enthält, die andere Formulare auf der Seite platzieren.Sobald ich eingestellt habe {appendTo:'#aspnetForm'} (die standardmäßige Asp.net-Formular-ID), alles hat großartig funktioniert (einschließlich des Postbacks).

Zusätzlich zur Antwort von tghw hat mir dieser hervorragende Blog-Beitrag geholfen: jQuery:Korrigieren Sie Ihre Postbacks in modalen Formularen – speziell BtnMikes Kommentar:"Sie dürfen auch keine CSSCLASS =" SimpleModal-Close "haben" auf Ihrem ASP: "-Taste." Das von der Klasse abzunehmen war die nicht offensichtliche Lösung.

-John

Wenn Sie die SimpleModal-Quelle nicht ändern möchten.Versuche dies..

Nachdem Sie die Methode modal() aufgerufen haben, fügen Sie Folgendes hinzu:

$("#simplemodal-overlay").appendTo('form');
$("#simplemodal-container").appendTo('form');

Das SimpleModal-Plugin fügt zwei davon zu Ihrem Markup hinzu.

  1. 'simplemodal-overlay' für den Hintergrund
  2. „simplemodal-container“ enthält das Div, das Sie als Popup-Modal verwenden möchten.
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top