ASP.NET Update Panel, Callback und jQuery Webservice - Drei Ajax Techniken im Überblick

Roberto — Mon, 02 Nov 2009 21:05:00 GMT

Dass mit diversen Techniken clientseitig über Javascript serverseitige Funktionen aufgerufen werden können ist nichts Neues.
Doch welche Technik überzeugt und welche passt am besten? In diesem Artikel werden drei grundlegende Vorgehensweisen erläutert und miteinander verglichen: Das Updatepanel, das Callback und der clientseitige Webservice Aufruf. Dazu gibt es jeweils ein kurzes Beispiel.

Das Updatepanel – Segen oder Fluch?

Immer wieder wird über folgende Wörter gestolpert: „böses Asp.Net Updatepanel…“. Doch warum wird es dann oft verwendet und vor allem: warum ist es böse?
Grundsätzlich entspricht das Updatepanel dem traditionellen Postbackmodell – eine Anforderung ist immer noch ein vollständiges Postback. Das Formular wird inklusive Viewstate an den Server gesendet. Der Großteil des Lebenszyklus der Seite bleibt erhalten und das Rendern bleibt dem Server überlassen.

„Es ist aber immer noch schneller als ein komplettes Postback!“

Das stimmt tatsächlich - der Unterschied und Vorteil liegt also nicht in der Anforderung, sondern in der Antwort des Servers.
Nur bestimmte Teile der Seite bzw. des Viewstates werden zurückgegeben und ausgetauscht (Partielles Rendering).

Fazit:

Diese Variante ist mit Sicherheit die einfachste. Dadurch, dass sich der auszutauschende Inhalt innerhalb eines Containers befindet, kann das UpdatePanel als relativ elegant bezeichnen werden. Allerdings leidet die Performance unter der Datenmenge die von Client zu Server gesendet wird (gesamte Formulardaten inkl. Viewstate). Das UpdatePanel ist nicht clientseitig beeinflussbar und somit auf Serverseitige Steuerung angewiesen. Die Features leiden darunter.

Einfach
Elegant
Performant

Beispiel:

Um die partiellen UpdatePanel Aktualisierungen nutzen zu können muss der Seite ein ScriptManager hinzugefügt werden

<asp:ScriptManager ID="ScriptManager1" runat="server"/>

Die Deklaration des UpdatePanels siehst dann wie folgt aus (mehr Infos gibt es hier)

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Label ID="Message" Text="This is a update panel…" runat="server" />
        <asp:Button ID="Save" Text="Save" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>

Das Callback – Keine Angst, es beißt nicht!

Das Callback ruft Servercode mittels Clientscript auf, ohne dadurch(zwingend) einen Postback zu verursachen. Klingt auf Anhieb super – aber ohne Postback gibt’s auch keine Formular Daten, d.h. die Anforderung besteht aus Parametern die per Javascript manuell angegeben werden.
Wie das Updatepanel nützt auch das Callback das XmlHttp Objekt intern zum Aufruf der Serverseitigen Methoden.
Die gesendeten Daten sind sehr gering. Allerdings wird der Lebenszyklus der Seite normal durchlaufen. Das kann sich bei einer größeren Seite durchaus bemerkbar machen, denn sie wird wie deren Controls und Members normal erstellt.
Rückgabe des Callbacks können per json Serialisierte Daten oder auch normaler HTML Text sein.

Fazit:

In bestimmten Fällen kann es durchaus Sinn machen, Servercode aufzurufen ohne dadurch ein Postback zu verursachen oder Teile der Seite neu zu rendern. Der Datentransfer ist sehr gering – allerdings wird der Lebenszyklus der Seite trotzdem durchlaufen. Der Einbau ist durch die Implementierung zweier Interfaces relativ einfach und sauber.

Einfach
Elegant
Performant

Beispiel:

Damit das Callback funktioniert müssen folgende Interfaces implementiert werden:

ICallback
ICallbackEventHandler

Diese können sowohl in ein Control, als auch in eine normale Seite implementiert werden.
Das Interface hat zwei Methoden:

RaiseCallbackEvent wird für den clientseitigen Aufruf über eine Javascript Funktion benötigt

public void RaiseCallbackEvent(string eventArgument)
{
  //do something
}

GetCallbackResult wird aufgerufen, wenn RaiseCallbackEvent durch ist. Die Rückgabe würd asynchrony an die Javascript Funktion zurück gegeben.

public string GetCallbackResult() 
{
  return "something";
}

Im Load oder Init Event werden folgende clientseitige Methoden registriert:

CallServer(arg, context) – ruft die serverseitige Methode auf
ReceiveServerData(arg, context) – bekommt das Ergebnis durch den „arg“ Parameter von GetCallbackResult()

protected void Page_Load(object sender, EventArgs e)
{
    ClientScriptManager scriptManager = Page.ClientScript;
    String callbackReference = scriptManager.GetCallbackEventReference(this, "arg",
    "ReceiveServerData", "");
    String callbackScript = "function CallServer(arg, context) {" + callbackReference + "; }";        
    scriptManager.RegisterClientScriptBlock(this.GetType(),"CallServer", callbackScript, true);
}

Die 2 Javascript Funktionen sehen wie folgt aus

function ReceiveServerData(arg, context)
{
  alert(arg);
} 
function CallSrv()
{
  CallServer('get something', '');
}

Scriptservice – jQuery sei Dank!

Durch jQuery wurde es relativ einfach einen Webservice über Javascript aufzurufen. Wie bereits in einem letzten Eintrag beschrieben, werden über einen minimalen HTTP Post Request an den Server die benötigten Daten zurückgesendet. Diese sind in der Regel um einiges geringer als der komplette HTML Code dazu. Diese „reine Ajax Variante“ bringt das Problem mit sich, dass das Rendering auf dem Client stattfindet und dafür gibt es nur zwei simple Funktionen:

innerHTML, das den kompletten Inhalt eines Elements austauscht
DOM APIs, die mit Tags und Attributen arbeiten

Fazit:

In der Praxis ist eine reine Ajax Vorgehensweise meist besser als das UpdatePanel Prinzip. Das Rendering findet auf dem Client statt und der Server schickt nur die benötigten Daten zurück. Dies ist zwar performant, dafür aber aufwendiger zu integrieren. Wer mit jQuery arbeitet, sollte sich auf jeden Fall über diese Möglichkeit Gedanken machen.

Einfach
Elegant
Performant

Beispiel:

Ein kurzer Auszug aus einem Beispiel. (In voller Länge)

Die Webservice methode

[WebMethod]
public string GetTestValue()
{
    return "Test value";
}

Der Javascript Aufruf

$.ajax({
    type        : "POST",
    url         : "Webservices.asmx/GetTestValue",
    data        : "",
    contentType : "application/json; charset=utf-8",
    dataType    : "json",
    success     : function( Result ) {
        // Result.d enthält die Rückgabe
        $("#MyContainer").html(Result.d);
    }
}

Welche Technik nun die passende ist, hängt immer stark vom Anwendungsfall ab - jede Technik hat ihre Stärken und Schwächen.
Grundsätzlich gilt - wenn Post Daten, Control States o.Ä. benötigt werden (bspw. bei einem größeren Eingabe-Formular), kann das UpdatePanel verwenden werden.
Wird darauf verzichtet, sollte das Callback bzw. der Webservice Aufruf in Betracht gezogen werden!

Update:
Einen Vergleich zu Ajax.Pro von René Drescher-Hackel findet sich hier!

Roberto's Blog : Callback, Javascript

ASP.NET Update Panel, Callback und jQuery Webservice - Drei Ajax Techniken im Überblick