Partielle Seitenerzeugung

Eintrag zuletzt aktualisiert am: 08.02.2007

Als Partial Page Rendering wird in ASP.NET AJAX der Einsatz des Steuerelements <asp:UpdatePanel> bezeichnet, bei dem durch einen Rückruf zum Webserver (Postback) nur der Inhalt des Update-Panel ausgetauscht wird.

Ausführlicher Text

Die einfachste Nutzung der ASP.NET-AJAX-Lösung stellt die partielle Seitenerzeugung (Partial Page Rendering) dar. Dabei tauscht der Browser bei einem Rundgang zum Server nicht die ganze Seite aus, sondern nur ein oder mehrere Seitenfragmente. Die Seitenfragmente erzeugt der Server im Fall des Einsatzes von ASP.NET durch Ausführung von Serversteuerelementen, die HTML erzeugen. Der Webserver erkennt an speziellen Parametern des Aufrufs, dass nicht die ganze Seite neu zu erzeugen ist, sondern nur einzelne Teile. Der Aufwand für den Browser ist minimal: JavaScript muss nur den Inhalt einer wohl definierten Region im Document Object Model (DOM) der Webseite durch das neue Fragment ersetzen.

Programmieraufwand für die partielle Seitenerzeugung entsteht weder auf dem Client noch auf dem Server: Das notwendige JavaScript als auch die Anpassungen von ASP.NET sind von Microsoft bereits in der Microsoft AJAX Library bzw. den ASP.NET AJAX Extensions hinterlegt. Der Webentwickler muss der Webseite nur zwei Serversteuerelemente hinzufügen: ein ScriptManager-Steuerelement, das die notwendigen Client-Skripte in die Seite einbindet, und ein (oder mehrere) UpdatePanel-Steuerelement(e), das die zu aktualisierenden Seitenfragmente aufspannt. Ein UpdatePanel-Steuerelement bietet selbst keine visuelle Darstellung, sondern grenzt nur statische und dynamische Seitenbereiche voneinander ab. Es kann pro Seite beliebig viele und auch verschachtelte UpdatePa-nel-Steuerelemente geben.

Beispiel

Möchte man zum Beispiel erreichen, dass beim Blättern in einem GridView-Steuerelement nicht jedes Mal die ganze umgebende Seite neu geladen wird, muss der Entwickler nichts anderes tun, als das GridView in das UpdatePanel einzubetten. Fortan kann der Endbenutzer ohne Flackern und ohne Veränderung der Scroll-Position des Browser-Fensters im Datenbestand stöbern.

<asp:ScriptManager ID="SM1" runat="server" AutoPostBack="True">
</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Filter nach Abflugort:
<asp:DropDownList ID="C_Ort" runat="server"
…
</asp:DropDownList>
<asp:GridView ID="C_Fluege" runat="server"
…
</asp:GridView>
</ContentTemplate>
…
<asp:DropDownList ID="C_Seitengroesse" runat="server" AutoPostBack="True"
…
</asp:DropDownList>
</asp:UpdatePanel>
Listing: Einsatz des UpdatePanel-Steuerelements

Hintergründe

Per Voreinstellung führt ein Klick auf eine Schaltfläche oder einen Hyperlink in einem UpdatePanel-Steuerelement zu einem AJAX-Aufruf des Webservers, bei dem ASP.NET den UpdatePanel-Inhalt serverseitig neu erzeugt.

Bei komplexeren Abhängigkeiten zwischen Steuerelementen und zu aktualisierenden Seitenfragmenten kann auch expliziter Programmcode die Aktualisierung einzelner Seitenteile anstoßen, indem man serverseitig die Methode Update() auf dem UpdatePanel-Steuerelement aufruft. Auch clientseitig kann man Code hinzufügen, der zu Beginn oder am Ende eines AJAX-Rückrufs ausgeführt wird.
Mit dem Attribut UpdateMode im UpdatePanel-Steuerelement legt man fest, wann das Seitenfrag-ment aktualisiert wird:

• UpdateMode="Always": Wird immer beim Rückruf aktualisiert. Dies ist die Standardeinstellung.
• UpdateMode="Conditional": Wird nur fallweise aktualisiert, abhängig vom definierten Trigger (siehe nächster Abschnitt) oder vom manuellen Aufruf der Update()-Methode.

Mit ChildrenAsTriggers = "false" legt man fest, dass untergeordnete Steuerelemente bei ei-nem Rückruf nicht automatisch das Seitenfragment aktualisieren.

UpdateProgress

Mit einem UpdateProgress-Steuerelement kann der Entwickler ergänzend zu einem UpdatePanel-Steuerelement definieren, dass während der Aktualisierung eines Seitenfragments der Endbenutzer eine bestimmte Anzeige, z.B. ein animiertes GIF, sehen soll. Außerdem kann man definieren, dass der End-benutzer die Aktion über eine Schaltfläche oder einen Link abbrechen kann. Dazu muss man clientsei-tig abortPostBack() aufrufen, siehe Beispiel.

Ein UpdateProgress-Steuerelement wird bei jedem AJAX-Rückruf durch irgendein UpdatePanel-Steuerelement auf der Seite angezeigt. Die Anzeige kann aber auf ein bestimmtes UpdatePanel-Element reduziert werden.

Trigger

Alle Steuerelemente, die innerhalb eines UpdatePanel-Steuerelements liegen und einen Rückruf zum Server auslösen (weil sie entweder eine Schaltfläche oder mit AutoPostback="True" versehen sind), lösen eine Aktualisierung des Inhalts des UpdatePanel-Steuerelements aus. Auch ein anderes (außen liegendes) Seitenelement oder ein Timer können eine Aktualisierung auslösen. Dafür muss der Webentwickler dem UpdatePanel-Steuerelement einen Trigger zuordnen. Die Maßeinheit beim Trigger sind Millisekunden (Standardwert 60.000, also einmal pro Minute).

Das folgende Listing sorgt dafür, dass das Steuerelement "C_Ort", das nicht im UpdatePanel-Inhalt liegt, eine Aktualisierung des UpdatePanel-Inhalts anstößt, wenn das Ereignis SelectedIndex-Changed() ausgelöst wird.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="C_Ort" EventName="SelectedIndexChanged" />
</Triggers>
…
</asp:UpdatePanel>
Listing: Trigger beim UpdatePanel

Timer

Ein Timer-Steuerelement ist ein Serversteuerelement, das JavaScript zum Browser sendet, mit dem in einem periodischen Intervall ein Skript gestartet werden kann oder mit dem ein UpdatePanel-Steuerelement aktualisiert werden kann.