webentwicklung-frage-antwort-db.com.de

Wie kann ein Javascript-Rückruf nach einem Postback eines Update-Panels ausgeführt werden?

Ich verwende ein jQuery-Plug-In, um Hilfetipps anzuzeigen, wenn der Benutzer bestimmte Elemente der Seite anzeigt.

Ich muss die Plugin-Ereignisse registrieren, nachdem die Seite mit css-Selektoren geladen wurde.

Das Problem ist, dass ich ein ASP.NET Update Panel verwende. Nach dem ersten Postback funktionieren die Tipps nicht mehr, da das Update Panel den Seiteninhalt ersetzt, die JavaScript-Ereignisse jedoch nicht erneut bindet.

Ich brauche eine Möglichkeit, einen Javascript-Rückruf auszuführen, nachdem das Update-Panel seinen Inhalt aktualisiert hat, sodass ich die JavaScript-Ereignisse erneut binden kann, damit die Tipps wieder funktionieren.

Gibt es eine Möglichkeit, dies zu tun?

javascriptasp.net-ajaxupdatepanelcallback
70
tsbnunes

Anstatt Ihren jQuery-Code in $(document).ready() einzufügen, geben Sie ihn ein 

function pageLoad(sender, args) { 
    ... 
}

pageLoad wird nach jedem Postback synchron oder asynchron ausgeführt. pageLoad ist ein reservierter Funktionsname in ASP.NET AJAX, der zu diesem Zweck verwendet wird. $(document).ready() wird dagegen nur einmal ausgeführt, wenn das DOM anfangs bereit ist/geladen wird.

Siehe diese Übersicht über ASP.NET AJAX - Clientlebenszyklusereignisse

163
Russ Cam

Das PageLoad hat nicht funktioniert. Ich habe das stattdessen verwendet:

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(pageLoaded);

function pageLoaded() {
}
19
rball

Dies ist wahrscheinlich nicht die eleganteste Lösung, aber trotzdem eine Lösung:

public class UpdatePanel : System.Web.UI.UpdatePanel
{
    /// <summary>
    /// Javascript to be run when the updatepanel has completed updating
    /// </summary>
    [Description("Javascript to be run when the updatepanel has completed updating"),
        Category("Values"),
        DefaultValue(null),
        Browsable(true)]
    public string OnUpdateCompleteClientScript
    {
        get
        {
            return (string)ViewState["OnUpdateCompleteClientScript"];
        }
        set
        {
            ViewState["OnUpdateCompleteClientScript"] = value;
        }
    }

    protected override void OnPreRender(System.EventArgs e)
    {
        base.OnPreRender(e);
        if(!string.IsNullOrEmpty(this.OnUpdateCompleteClientScript))
            Page.ClientScript.RegisterStartupScript(this.GetType(), this.ClientID, string.Concat("Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, args){for(var panelId in sender._updatePanelClientIDs){if(sender._updatePanelClientIDs[panelId] == '", this.ClientID, "'){", this.OnUpdateCompleteClientScript, "}}});"), true);
    }
}

Verwenden Sie es so:

<uc:UpdatePanel OnUpdateCompleteClientScript="alert('update complete');">
    <!-- stuff in here -->
</uc:UpdatePanel>

Natürlich müssen Sie das benutzerdefinierte Steuerelement in Ihrer webconfig oder Seite registrieren, um es auf diese Weise verwenden zu können.

Edit: auch hast du jquery.live angesehen?

12
Andrew Bullock

Verwenden Sie das pageLoaded-Ereignis und prüfen Sie, ob Rückruf oder Postback:

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(function (sender, args) {
    if (args._panelsUpdated && args._panelsUpdated.length > 0) {
        //callback;
    }
    else {
        //postback;
    }
});
0
Rover

Wenn Sie vor und nach dem Laden von UpdatePanel bestimmte Vorgänge ausführen möchten, können Sie BeginPostbackRequest und EndPostbackRequest wie folgt überschreiben: 

var postbackControl = null;
var updatePanels = null;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginPostbackRequest);
prm.add_endRequest(EndPostbackRequest);

function BeginPostbackRequest(sender, args) {
    prm._scrollPosition = null;
    postbackControl = args.get_postBackElement();
    postbackControl.disabled = true;
    updatePanels = args._updatePanelsToUpdate;
    // do your stuff
}

function EndPostbackRequest(sender, args) {
    // do your stuff
    postbackControl.disabled = false;
    postbackControl = null;
    updatePanels = null;
}

Dies ist sehr praktisch, wenn Sie nur HTML verarbeiten möchten, das vom Aktualisierungsfenster bereitgestellt wurde. Einige Operationen erfordern mehr Ressourcen und es wäre übertrieben, die gesamte DOM-Struktur auf pageLoad zu verarbeiten.

0
modiX