Microsoft Ajax 393908431X, 9783939084310

Citation preview

Microsoft Ajax

Tobias Hauser

Microsoft Ajax

schnell + kompakt

Tobias Hauser Microsoft Ajax schnell + kompakt ISBN 978-3-939084-31-0

© 2007 entwickler.press, ein Imprint der Software & Support Verlag GmbH

1. Auflage, 2007

http://www.entwickler-press.de/ http://www.software-support.biz/ Ihr Kontakt zum Verlag und Lektorat: [email protected] Bibliografische Information Der Deutschen Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.ddb.de abrufbar.

Korrektorat: Petra Kienle Satz: text & form GbR, Carsten Kienle Umschlaggestaltung: Caroline Butz Belichtung, Druck und Bindung: M.P. Media-Print Informationstechnologie GmbH, Paderborn. Alle Rechte, auch für Übersetzungen, sind vorbehalten. Reproduktion jeglicher Art (Fotokopie, Nachdruck, Mikrofilm, Erfassung auf elektronischen Datenträgern oder andere Verfahren) nur mit schriftlicher Genehmigung des Verlags. Jegliche Haftung für die Richtigkeit des gesamten Werks kann, trotz sorgfältiger Prüfung durch Autor und Verlag, nicht übernommen werden. Die im Buch genannten Produkte, Warenzeichen und Firmennamen sind in der Regel durch deren Inhaber geschützt.

Inhaltsverzeichnis Vorwort

7

Kapitel 1: Grundlagen 1.1 Bestandteile 1.2 Einrichtung

9 11 12

Kapitel 2: UpdatePanel und Co. 2.1 UpdatePanel Trigger Attribute 2.2 UpdateProgress 2.3 Timer 2.4 Clientseitige Steuerung 2.5 ScriptManager und Co. 2.6 Skripte einbinden 2.7 Verschachtelte Sites 2.8 Programmieransätze 2.9 Fehlerhandling

17 18 21 25 25 27 30 33 33 34 35 37

Kapitel 3: JavaScript-API 3.1 pageLoad() 3.2 $get() 3.3 Event-Handler 3.4 Elemente DomElement Komponenten, Controls und Behavior 3.5 Erweiterte JavaScript-Objekte 3.6 StringBuilder

39 40 40 41 44 45 46 47 50

schnell + kompakt

5

Inhaltsverzeichnis

Kapitel 4: Web Services und Co. 4.1 Web Services Web Service einrichten Web Service aufrufen Fehlerhandling Datenaustausch 4.2 Forms Authentication Services Serverseitig Clientseitig 4.3 Profile Services Serverseitig Clientseitig

53 53 54 57 61 62 66 66 68 75 76 77

Kapitel 5: Control Toolkit 5.1 Eigenständige Controls 5.2 Extender Formulare und Informationen Modale Fenster Effekte

81 86 89 89 93 95

Kapitel 6: Futures und Sonstiges 6.1 XML-Script 6.2 Drag&Drop 6.3 Animationen

99 101 103 112

Stichwortverzeichnis

115

6

Vorwort Noch ein Ajax-Framework? Als Microsoft sein Ajax-Framework, damals noch unter dem Namen Atlas ankündigte, gab es schon eine Menge Frameworks auf dem Markt. Und während Microsoft noch entwickelte, wurden es immer mehr. Warum also sollte man auf die Lösung von Microsoft setzen? Zum einen gibt es für ASP.NET nicht so viele Alternativen. Außerdem garantiert Microsofts Engagement die Weiterentwicklung und man hält sich an die Standardlösung für ASP.NET. Zu guter Letzt soll noch ein subjektives Argument folgen: Microsoft ASP.NET Ajax ist zwar bei weitem noch nicht perfekt, enthält aber eine Unmenge an Funktionen und ist auf dem Weg, ein wirklich gutes Ajax-Framework zu werden. Dieses Buch möchte Ihnen dabei helfen, Microsoft ASP.NET Ajax zu verstehen und einzusetzen. Dazu werden alle wichtigen Möglichkeiten des Framework näher beleuchtet und anhand von Beispielen erklärt. Im Einzelnen ist Folgendes enthalten: 쐌 Kapitel 1 erläutert die Bestandteile von Microsoft ASP.NET Ajax. 쐌 Kapitel 2 zeigt die grundlegenden Möglichkeiten, um nur Teile einer Seite zu aktualisieren. Im Vordergrund stehen das UpdatePanel und die wichtigen Helfer. 쐌 Kapitel 3 stellt die JavaScript-API von Microsoft ASP.NET Ajax vor. Seien es einfacher formatierbare Datumswerte, schnellerer DOM-Zugriff oder Event-Handler, Microsoft bietet viel Nützliches für den Alltag. 쐌 Kapitel 4 kümmert sich um den Zugriff auf Web Services. Sie sind ein einfacher und schneller Weg, um per Microsoft ASP.NET Ajax Daten auszutauschen. Außerdem werden die

schnell + kompakt

7

Vorwort

Dienste zur Nutzerauthentifizierung und Personalisierung behandelt. 쐌 Kapitel 5 beschreibt die nützlichen Steuerelemente aus dem Control Toolkit. Sie lernen Animationen, Register und Formularhelfer kennen. 쐌 Kapitel 6 beleuchtet die Ajax-Erweiterungen in den Microsoft ASP.NET Futures. Themen sind unter anderem Drag&Drop und Animationen. Die Beispiele zum Buch stehen Ihnen unter http://www.hauserwenz.de/support/ zur Verfügung. Dort finden Sie außerdem Errata und Updates zum Buch. In unserem Weblog unter http:// www.hauser-wenz.de/blog/ gibt es regelmäßig neue Einträge zu den aktuellen Themen der Webentwicklung, darunter natürlich auch Microsoft ASP.NET Ajax. Für Anregungen und Kritik zum Buch oder zur von Christian Wenz und mir mitgestalteten Buchreihe schnell + kompakt finden Sie unter http://www.hauser-wenz.de/ support/kontakt/ ein entsprechendes Formular. Auch Fragen zum Buch sind selbstverständlich willkommen und werden möglichst zeitnah beantwortet. Aus Fairness gegenüber den zahlenden Kunden kann ich leider keine Fragen abseits des Buchinhalts kostenlos beantworten. Auch dieses Buch wäre ohne Hilfe nicht möglich gewesen. Christian sei für sein Feedback, seine Anregungen und seine Unterstützung gedankt, Christiane und Erik für ihr Engagement. Viel Spaß mit Microsoft ASP.NET Ajax! Tobias Hauser Im Mai 2007

8

KAPITEL 1 Grundlagen 1.1

Bestandteile

11

1.2

Einrichtung

12

Ajax ist in aller Munde. Aber das Entwickeln von Ajax-Anwendungen ist nicht gerade trivial. Eine Hürde ist der Einsatz von JavaScript mit allen Browser-Abhängigkeiten und Schwierigkeiten, die eine interpretierte Skriptsprache so mit sich bringt. Dementsprechend sprießen an allen Ecken und Enden die Frameworks und Bibliotheken, die die Arbeit erleichtern. Man kann dabei grob Bibliotheken unterscheiden, die auf JavaScript basieren, und solche, die eng mit einer serverseitigen Technologie verbunden sind. Für die hauseigene serverseitige Technologie ASP.NET will Microsoft selbst das Standardrahmenwerk schaffen. Nach langer Vorbereitungszeit unter dem Codenamen Atlas gibt es jetzt Microsoft ASP.NET 2.0 Ajax. Das Framework besteht sowohl aus serverseitigen als auch aus clientseitigen Teilen. Es hat in relativ kurzer Zeit unter den ASP.NET-Entwicklern große Verbreitung gefunden und gilt schon jetzt als Quasistandard. Einige prominente Beispielprojekte wie http://www.pageflakes.com/ setzen trotz der durchaus noch vorhandenen Kinderkrankheiten auf Microsoft ASP.NET 2.0 Ajax. Und auch das bekannte auf ASP.NET basierende Open Source CMS DotNetNuke integriert mittlerweile das Ajax-Framework.

schnell + kompakt

9

1 – Grundlagen

Hinweis Eine Alternative zu Microsoft ASP.NET Ajax soll nicht verschwiegen werden: Ajax.NET Professional von Michael Schwarz (http://www.ajaxpro.info/) bietet ein klassisches Ajax-Rahmenwerk. Die zentrale Anlaufstelle für das Ajax-Framework ist http:// ajax.asp.net/. Dort finden Sie alle Bestandteile, Dokumentation, Beispiele und Aktuelles.

Abb. 1.1: Auf der Ajax-Homepage finden Sie alle Dateien und Informationen

10

Bestandteile

1.1 Bestandteile Microsoft ASP.NET 2.0 Ajax ist kein integriertes Framework an sich, sondern besteht aus verschiedenen Teilen, die auch alle einzeln zur Verfügung stehen: 쐌 ASP.NET 2.0 Ajax Extensions 1.0 ist der zentrale Teil. Er besteht aus den grundlegenden Funktionen und den AjaxTemplates für die Entwicklungsumgebung Visual Studio und Visual Web Developer. Die grundlegenden Funktionen lassen sich grob in serverseitige Controls (UpdatePanel etc.), in Dienste (Web Services, Profile Services etc.) und in clientseitige Objekte unterteilen. Entsprechende Themen, die die Extensions betreffen, finden Sie in Kapitel 2, 3 und 4. 쐌 ASP.NET Ajax Control Toolkit enthält Steuerelemente wie Schieberegler, modale Popups und vieles mehr. Die Entwicklung obliegt allerdings einem Community-orientierten Ansatz unter Microsoft-Kontrolle. Das heißt auch, dass sich im Control Toolkit viele Änderungen ergeben. Erläuterungen zum Control Toolkit finden Sie in Kapitel 5. 쐌 ASP.NET Ajax Futures enthält noch in der Entwicklung befindliche Funktionen und eine eigene Vorlage für auf der CTP basierende Websites in Visual Studio und Visual Web Developer. Es wurde mittlerweile (Stand Mai 2007) mit neuen Funktionen für ASP.NET kombiniert. Unter den Ajax-Funktionen sind schon gut nutzbare Drag&Drop-Funktionen. Da sich die Futures jederzeit ändern kann, finden Sie nur eine kurze Schilderung in Kapitel 6. Von allen drei integralen Bestandteilen steht auch der Quellcode zur Verfügung. Für die Extensions gibt es eine eigene Version des Quellcodes, für das Control Toolkit wählen Sie beim Download aus der Version mit und ohne Quellcode. Bei der Futures ist der JavaScript-Quellcode mit dabei. Allerdings ist die Quellcode-

schnell + kompakt

11

1 – Grundlagen

Version hier mit debug benannt, da sie Formatierungen und Zeilenumbrüche enthält. Hinweis Von den JavaScript-Bestandteilen gibt es sogar eine eigene, von ASP.NET unabhängige Version namens Microsoft Ajax Library. Sie lässt sich beispielsweise auch in andere Technologien integrieren. Außerdem gibt es natürlich eine Dokumentation. Die zentrale Dokumentation auf der Website (http://ajax.asp.net/docs/) dreht sich um die clientseitigen und serverseitigen Fähigkeiten der ASP.NET 2.0 Ajax Extensions 1.0. Sie ist herunterladbar oder auch online einsetzbar. Daneben gibt es auf der Website noch Beispiele und Videotutorials. Das ASP.NET Ajax Control Toolkit wird dagegen mit einer eigenen Dokumentation ausgeliefert, die gleich mit entsprechenden Beispielen der Steuerelemente verbunden ist. Und für die ASP.NET Ajax Futures ist Dokumentation im Moment noch Mangelware. In der Tat ist es teilweise sogar schwierig, weil im Web zu einigen Funktionen wie Drag&Drop noch auf früheren Atlas-Versionen basierende Beispiele grassieren. Hier hilft oft nur ein Blick in den Quellcode.

1.2 Einrichtung Sehr empfehlenswert und in der Praxis auch fast unumgänglich ist der Einsatz einer Entwicklungsumgebung. Hier gibt es verschiedene Möglichkeiten: Microsoft selbst bietet die professionelle Entwicklungsumgebung Visual Studio in verschiedenen Versionen. Für Ajax ist jede Version geeignet. Eine kostenfreie Alternative von Microsoft ist Visual Web Developer Express

12

Einrichtung

(http://www.microsoft.com/germany/msdn/vstudio/products/express/ vwd/default.mspx). Dieser Editor bietet die meisten der ASP.NETFunktionen von Visual Studio und besitzt dieselbe Oberfläche. Wer nicht zu einem Microsoft-Produkt greifen möchte, wird bei SharpDevelop fündig (http://www.icsharpcode.net/OpenSource/SD/ Default.aspx). Hinweis In diesem Buch kommt Visual Web Developer Express zum Einsatz. Die Erläuterungen gelten allerdings genauso für Visual Studio. Für einige Funktionen wie die Erweiterung von Controls ist sogar Visual Studio notwendig. Sie sollten Visual Web Developer installieren, bevor Sie die Installation von ASP.NET 2.0 Ajax Extensions 1.0 beginnen. Das benötigte .NET Framework 2.0 wird, falls noch nicht vorhanden, bei dieser Installation mit eingerichtet. Die ASP.NET 2.0 Ajax Extensions 1.0 sind schnell installiert. Laden Sie das msi-Installer-Paket herunter und starten Sie dann per Doppelklick die Installation. Sie müssen nur noch die Lizenz bestätigen, dann läuft die Installation durch. Installiert wird standardmäßig in C:\Programme\Microsoft ASP.NET\ASP.NET 2.0 Ajax Extensions. In das übergeordnete Microsoft ASP.NET-Verzeichnis wird später auch die CTP installiert. In Visual Studio und Visual Web Developer integrieren sich die Ajax Extensions an zwei Stellen: 쐌 Zum einen gibt es eine Vorlage für neue Websites. Sie können nun also eine Ajax-Anwendung erzeugen. Sie enthält gegenüber einer normalen Website schon eine Datei, die den sogenannten ScriptManager integriert. Jede Microsoft Ajax-Webseite benötigt einen ScriptManager. Mehr dazu im nächsten Kapitel.

schnell + kompakt

13

1 – Grundlagen

쐌 Zum anderen sind in der Toolbox bereits serverseitige AjaxControls verfügbar. Auch dazu mehr im nächsten Kapitel.

Abb. 1.2: Eine neue Vorlage für eine Website mit Ajax Extension

Das ASP.NET Ajax Control Toolkit wird etwas anders installiert. Es kommt als ZIP-Archiv daher. Sie müssen es nun an einen beliebigen Ort entpacken. Es wird auf CodePlex in zwei Varianten angeboten: mit und ohne Quellcode. Die Variante mit Quellcode benötigen Sie, wenn Sie sich ansehen wollen, wie die Controls entwickelt werden, und wenn Sie eigene entwickeln wollen. Sie ist auf jeden Fall zu empfehlen. Zentrales Element des ZIPArchivs ist ein Visual-Studio-Projekt (AjaxControlToolkit.sln). Wenn Sie es öffnen und das Projekt ausführen, sehen Sie alle Steuerelemente und auch den Quellcode. Die ASP.NET Ajax Futures wurde mittlerweile (Stand Mai 2007) in die ASP.NET Futures integriert. Sie ist wie die Extensions ein .msi-Installationspaket. Sie installieren sie durch Doppelklick.

14

Einrichtung

Anschließend bestätigen Sie die Lizenz. Sie finden das installierte Futures-Paket standardmäßig unter C:\Programme\Microsoft ASP.NET. Außerdem installiert es eine Visual Studio- und Visual Web Developer-Vorlage, die es Ihnen erlaubt, eine neue Ajax CTP-Website anzulegen. Diese Website besitzt neben dem ScriptManager für die Standardseite auch noch die DLL Microsoft.Web.Preview.dll. Sie enthält die eigentlichen JavaScriptDateien des Futures CTP. Zu finden sind die Dateien auch in der Installation unter C:\Programme\Microsoft ASP.NET\ASP.NET Futures May 2007\v1.1.61025\ScriptLibrary\Microsoft.Web.Preview\ 1.1.61025.0. Hinweis Bei den Futures sind dauernde Änderungen an der Tagesordnung. Neben den Pfaden haben sich auch schon die Namensräume und auch der Name der DLL geändert. Es gibt keine Garantie, dass das in Zukunft nicht weiterhin so ist.

schnell + kompakt

15

KAPITEL 2 UpdatePanel und Co. 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9

UpdatePanel UpdateProgress Timer Clientseitige Steuerung ScriptManager und Co. Skripte einbinden Verschachtelte Sites Programmieransätze Fehlerhandling

18 25 27 30 33 33 34 35 37

Das Herzstück von Microsofts Ajax-Framework sind die Extensions. Und darin gibt es wiederum serverseitige und clientseitige Fähigkeiten sowie die Möglichkeit, mit Diensten zwischen Client und Server zu kommunizieren. In diesem Kapitel stehen die serverseitigen ASP.NET Controls im Vordergrund, mit denen Sie eine Ajax-Anwendung erstellen können, ohne sich um JavaScript Sorgen machen zu müssen. Sie finden die Controls unter dem Register AJAX EXTENSIONS in der Toolbox von Visual Web Developer oder Visual Studio. Sollten Sie keine Entwicklungsumgebung einsetzen, verwenden Sie einfach den in diesem Kapitel gezeigten Code. Das zentrale Steuerelement ist der ScriptManager. Sie benötigen ihn bei jedem Einsatz von Microsoft Ajax, egal ob für serverseitige Controls, clientseitige Steuerung, Control Toolkit oder die CTP-Funktionen.

schnell + kompakt

17

2 – UpdatePanel und Co.

Abb. 2.1: Die Controls in der Toolbox

Wenn Sie als neue Website eine ASP.NET Ajax-Enabled Web Site gewählt haben, ist er schon integriert. Wenn nicht bzw. wenn Sie ein neues WebForm hinzufügen, müssen Sie ihn einfügen. Bedenken Sie aber, dass Sie nur einen ScriptManager pro Seite einsetzen dürfen!

Wenn Sie die Seite nun ausführen, sehen Sie noch nichts. Ein Blick in den Quellcode im Browser verrät, dass der ScriptManager bereits einige Skripte integriert.

2.1 UpdatePanel Das UpdatePanel ist das zentrale serverseitige Steuerelement. Es grenzt einen Bereich der Seite ein, der unabhängig vom Rest aktualisiert wird. Für die Aktualisierung kommt im Hintergrund – wenig überraschend – ein Ajax-Aufruf per XMLHttpRequest-Objekt zum Einsatz. Hinweis Microsoft nennt diese Funktionalität auch Partial Page Rendering. Nur ein Teil der Seite wird also aktualisiert. Der Aufruf ist auch ein asynchroner PostBack.

18

UpdatePanel

Client

HTTP-Request

HTML+JavaScript

Seite anfordern

Server ASPX-Seite

HTTP-Response HTTP-Request über XMLHttpRequest

UpdatePanel

Partielle Updates

UpdatePanel -Inhalte und -Methoden

HTTP-Response

Abb. 2.2: Die Client-Server-Architektur mit UpdatePanel

Um ein UpdatePanel einzusetzen, ziehen Sie es einfach in Ihr Dokument. In das UpdatePanel werden dann die Elemente eingefügt, die neu geladen werden sollen. Für ein erstes Beispiel kommen ein Label-Control und eine Schaltfläche zum Einsatz. Die Elemente, die in das UpdatePanel eingefügt werden, landen im :








Sie sollten noch ein zweites Label-Control außerhalb des UpdatePanel einfügen, damit Sie die teilweise Aktualisierung der Seite auch sehen können. Nun müssen den Label-Controls noch Werte zugewiesen werden. Dies geschieht im Code (hier in der separaten Datei) bei der Methode Page_Load, die beim Laden der Seite ausgeführt wird:

schnell + kompakt

19

2 – UpdatePanel und Co.

protected void Page_Load(object sender, EventArgs e) { Random ran = new System.Random(); Int32 zahl = ran.Next(0, 100000); Label1.Text = zahl.ToString(); Label2.Text = zahl.ToString(); }

Beide Label-Controls erhalten eine gemeinsame Zufallszahl zwischen 0 und 100000 zugewiesen. Das heißt, beim ersten Laden der Seite enthalten beide die gleiche Zufallszahl. Klicken Sie nun aber auf die Schaltfläche, lädt das UpdatePanel nur den Bereich mit dem ersten Label neu und aktualisiert dementsprechend auch die Zufallszahl. In den nächsten Abschnitten lernen Sie noch mehr Möglichkeiten kennen, diese Aktualisierung zu steuern.

Abb. 2.3: Gleich: Beide Label enthalten dieselbe Zufallszahl

20

UpdatePanel

Abb. 2.4: Neu: Das erste Label wurde dank UpdatePanel ohne Neuladen der Seite aktualisiert

Trigger Im ersten Beispiel wurde die Aktualisierung des UpdatePanelInhalts durch den Klick auf die Schaltfläche ausgelöst. ASP.NET erkennt automatisch, dass eine Schaltfläche vorhanden ist, und verwendet diese als Auslöser, als Trigger. Zu verdanken ist das dem Standardwert true für das Attribut ChildrenAsTriggers für das UpdatePanel. Ist ChildrenAsTriggers nicht auf false gesetzt, werden direkte Kindelemente im Inhalt des UpdatePanel automatisch als Auslöser verwendet. Sind mehrere Elemente vorhanden, die potenzielle Auslöser sind, werden alle als Auslöser registriert. Auch Verschachtelungen in andere Steuerelemente, z.B. eine Tabelle, sind möglich. Hinweis UpdatePanel-Elemente lassen sich auch verschachteln. Dabei ist die automatische Erkennung von untergeordneten Auslösern aber nicht mehr möglich. Ein untergeordnetes UpdatePanel wird vielmehr aktualisiert, wenn das übergeordnete aktualisiert wird.

schnell + kompakt

21

2 – UpdatePanel und Co.

In den meisten Fällen ist die automatische Erkennung von Auslösern sinnvoll. Wenn Sie allerdings z.B. aus einem UpdatePanel ein anderes aktualisieren möchten, sollten Sie die Erkennung mit ChildrenAsTriggers deaktivieren. Ist ChildrenAsTriggers auf false gesetzt, muss gleichzeitig das Attribut UpdateMode auf Conditional stehen:

Der UpdateMode gibt an, wann das UpdatePanel aktualisiert wird. Zur Wahl stehen zwei Optionen: 쐌 Always ist der Standardwert. Er gibt an, dass der Inhalt des UpdatePanel bei jedem PostBack aktualisiert wird, also z.B. auch beim Neuladen der Seite oder bei einem asynchronen Neuladen aus einem anderen UpdatePanel. 쐌 Conditional ruft das Neuladen nur auf, wenn das Aktualisieren durch einen Trigger für das UpdatePanel ausgelöst wird (ob explizit angegeben oder direkt im UpdatePanel, spielt dabei keine Rolle) oder per Code über die serverseitige Methode Update() aufgerufen wird. Wenn ChildrenAsTriggers auf false gesetzt wurde oder wenn ein Element als Auslöser verwendet werden soll, das sich nicht oder tiefer verschachtelt im UpdatePanel befindet, müssen und können Sie die Auslöser selbst setzen. Hier ein Beispiel, bei dem sich die Schaltfläche als gewünschter Auslöser außerhalb des UpdatePanel befindet:

22

UpdatePanel










Um einen Auslöser explizit zu setzen, verwenden Sie den Bereich unterhalb des UpdatePanel. Sie können dort Trigger für einen normalen PostBack, sprich für das Neuladen der gesamten Seite, einfügen. Die häufiger benötigte Alternative sind aber Trigger für asynchrone PostBacks. Damit können Sie ein beliebiges Element und ein beliebiges Ereignis angeben, um die Aktualisierung auszulösen. Hier ein Beispiel, das die Schaltfläche Button1 bei Klick als Auslöser verwendet:



Sie können übrigens auch der Schaltfläche selbst noch Befehle mitgeben. Ein Schaltflächenereignis wird angelegt, wenn Sie die Schaltfläche in der Entwurfsansicht von Visual Web Developer bzw. Visual Studio doppelt anklicken. Alternativ können Sie selbst mit dem Attribut OnClick den Funktionsnamen vergeben und die Funktion schreiben. Das folgende Beispiel fügt an die Zufallszahl von Label1 noch einen Text an:

schnell + kompakt

23

2 – UpdatePanel und Co.

protected void Button1_Click(object sender, EventArgs e) { Label1.Text += " Schaltfläche"; }

Dass der Text erst nach der Zufallszahl folgt, zeigt die Ausführreihenfolge (auch Lebenszyklus genannt) der ASP.NET-Seite. Zuerst wird Page_Load() ausgeführt, dann das Klickereignis für die Schaltfläche. Dies gilt nicht nur für „normale“ ASP.NET-Seiten, sondern auch für die Ausführreihenfolge von asynchronen PostBacks per UpdatePanel. Würden Sie auch einen Text für Label2 vergeben, würde dieser nicht angezeigt, da der asynchrone PostBack nur den Bereich des UpdatePanel betrifft.

Abb. 2.5: Ergänzung: Per Schaltflächenklick wird zusätzlicher Text ausgegeben

Hinweis Manche Controls sind nicht mit dem UpdatePanel kombinierbar. Dazu zählt z.B. das Menu-Control. Eine vollständige Liste finden Sie unter http://ajax.asp.net/docs/overview/UpdatePanelOverview.aspx#UpdatePanelCompatibleControls. Teil-

24

UpdateProgress

weise gibt es schon Abhilfen, die den JavaScript-Code von Microsoft Ajax verändern (http://siderite.blogspot.com/2007/ 04/using-menu-inside-updatepanel.html). Als kleine Entschädigung für die Einschränkung ist das UpdatePanel selbst auch mit Masterseiten kombinierbar und in anderen Steuerelementen wie etwa dem GridView einsetzbar.

Attribute Neben den im letzten Abschnitt erläuterten ChildrenAsTriggers und UpdateMode gibt es noch ein paar Attribute für das UpdatePanel. Der RenderMode gibt an, ob das UpdatePanel als Blockelement (sprich ) oder als Inline-Element (sprich ) realisiert wird. Außerdem können Sie das UpdatePanel natürlich auch mit Visible ein- und ausblenden.

2.2 UpdateProgress Ergänzend zum UpdatePanel können Sie den UpdateProgress einsetzen. Dieses Steuerelement zeigt den Fortschritt des Ladevorgangs der Anwendung an. Allerdings sollten Sie sich darunter keine Fortschrittsmeldung mit verlässlichen Prozentangaben vorstellen. Das gibt das allen Ajax-Aufrufen zu Grunde liegende XMLHttpRequest-Objekt nicht her. Vielmehr können Sie mit dem UpdateProgress einfach eine Meldung anzeigen, während die Inhalte geladen werden. Profitipp In Ajax-Anwendungen (z.B. den diversen Webmail-Diensten) gibt es oft animierte Ladeanzeigen mit Ladebalken. Auch dort sind die Informationen nicht genau, sprich, der Nutzer weiß nicht, wie viel Prozent schon geladen wurde oder wie viel noch geladen werden muss. Durch die Animation wird dem

schnell + kompakt

25

2 – UpdatePanel und Co.

Nutzer nur gezeigt, dass etwas passiert. Eine solche Animation können Sie natürlich auch innerhalb des UpdateProgressElements einfügen. Um die Fortschrittsanzeige lokal testen zu können, schicken Sie das Skript in der Page_Load()-Methode für einige Sekunden zum Schlafen: System.Threading.Thread.Sleep(4000);

Die Angabe erfolgt in Millisekunden, sprich, das Skript ruht vier Sekunden. Nun fügen Sie das UpdateProgress-Element in das UpdatePanel ein. Am schnellsten geht das natürlich per Drag&Drop aus der Toolbox. Die Meldung für die Fortschrittsanzeige folgt im :







Neue Zufallszahl wird geladen ...



26

Timer

Abb. 2.6: Fortschrittlich: Die Lademeldung erscheint

Das UpdateProgress-Element besitzt selbst noch einige Attribute zur Steuerung: 쐌 AssociatedUpdatePanelID bindet eine Aktualisierungsmeldung an ein UpdatePanel, wenn das UpdateProgress-Element außerhalb des UpdatePanel liegt. 쐌 DisplayAfter verzögert die Ladeanzeige um den angegebenen Wert in Millisekunden (Standard sind 500 Millisekunden, also eine halbe Sekunde), damit der Nutzer nicht sofort eine Lademeldung sieht. 쐌 DynamicLayout gibt an, ob der Platz für die Lademeldung schon reserviert ist (false) oder die Meldung erst eingefügt wird, wenn sie notwendig ist (true). Ersteres wird über die CSSEigenschaft visibility, Letzteres über die CSS-Eigenschaft display realisiert.

2.3 Timer Ein weiteres Control im Standardlieferumfang der Ajax Extensions ist der Timer. Mit ihm lassen sich regelmäßige Aufrufe tätigen – er kapselt insofern die JavaScript-Funktionen setTimeout() und setInterval(). Sie setzen den Timer genauso ein wie eine

schnell + kompakt

27

2 – UpdatePanel und Co.

Schaltfläche. Das heißt, in Verbindung mit einem UpdatePanel fügen Sie ihn entweder im UpdatePanel ein:





Oder Sie setzen ihn außerhalb ein und setzen einen Trigger auf den Timer.







Hinweis Wenn Sie den Timer nicht mit einem UpdatePanel verbinden, führt er automatisch einen PostBack der gesamten Seite durch. Das einzige Attribut, das im Timer gesetzt werden muss, ist das Intervall, in dem der Timer aufgerufen wird. Dies geschieht mit

28

Timer

dem Attribut Interval. Die Angabe erfolgt wie bei den zugrunde liegenden JavaScript-Funktionen in Millisekunden. Ein Wert von 1000 entspricht also einer Sekunde. Profitipp Eine zu schnelle Aktualisierung sorgt nicht nur am eventuell schwachen Client für Performance-Probleme, sondern belastet auch den Server mit sehr vielen Requests. Versuchen Sie, hier ein vernünftiges Maß zu finden und Aktualisierungen zu verbinden. Sie können einen Timer auch für mehrere UpdatePanels verwenden, indem Sie in jedem einen Trigger auf dasselbe Timer-Control einsetzen. In Verbindung mit einem UpdatePanel wird die Aktualisierung übrigens nur durchgeführt, wenn die letzte Abfrage schon beendet ist. Das kann relevant sein, wenn das serverseitige Skript länger braucht und das Intervall sehr kurz gewählt ist. Das Ereignis, das der Timer auslöst, heißt tick. Sie können das z.B. im Trigger verwenden:

Außerdem haben Sie die Möglichkeit, serverseitig darauf zu reagieren.

Sie schreiben nun nur noch eine Methode Timer1_Tick, die bei jeder Aktualisierung – auch in Verbindung mit einem UpdatePanel – aufgerufen wird.

schnell + kompakt

29

2 – UpdatePanel und Co.

2.4 Clientseitige Steuerung Das UpdatePanel lässt sich mit einigen Einschränkungen auch per JavaScript steuern. Das hilft beispielsweise, um dem Nutzer die Möglichkeit zum Abbruch des Update-Prozesses zu geben. Verantwortlich dafür ist die Klasse PageRequestManager. Ein Objekt dieser Klasse erhalten Sie nicht auf üblichem Wege, sondern mit der Methode getInstance(). Das folgende Beispiel zeigt, wie Sie damit einen Aufruf abbrechen. Zuerst benötigen Sie die Schaltflächen. Hier werden sie mit einem UpdateProgress-Element kombiniert, um das Abbrechen plastisch zu zeigen:












Neue Zufallszahl wird geladen ...



Die weitere Steuerung erfolgt im JavaScript-Code. Sie müssen prüfen, ob es sich um einen asynchronen Aufruf handelt, und an-

30

Clientseitige Steuerung

schließend mit abortPostback() den Aufruf abbrechen. Dazu erstellen Sie zuerst eine Instanz des PageRequestManager. Dies geschieht hier in der Funktion pageLoad(). Diese Funktion wird von Microsoft Ajax automatisch ausgeführt, nachdem die Seite und alle Skripte geladen sind. Mit add_initializeRequest() wird ein Event-Handler definiert, der bei einer Änderung des Status, sprich einem Request, ausgeführt wird.

schnell + kompakt

31

2 – UpdatePanel und Co.

Abb. 2.7: Das Laden wird gestartet ...

Abb. 2.8: ... und wieder abgebrochen

In dieser Konstellation lädt die Abbrechen-Schaltfläche selbst dann einen PostBack, wenn sie angeklickt wird, während kein PostBack läuft. Dies können Sie verhindern, indem Sie immer mit set_cancel() die Übermittlung abbrechen:

32

ScriptManager und Co.

if (args.get_postBackElement().id == 'Abbrechen') { args.set_cancel(true); }

Hinweis Einen kompletten Überblick über die PageRequestManager-Klasse erhalten Sie in der Referenz unter http://ajax.asp.net/docs/ ClientReference/Sys.WebForms/PageRequestManagerClass/ default.aspx.

2.5 ScriptManager und Co. Das ScriptManager-Control ist das Herzstück von Microsoft Ajax und wird in diesem Abschnitt deswegen etwas ausführlicher gewürdigt. Der ScriptManager wird nicht nur für UpdatePanel und Konsorten benötigt, sondern hier binden Sie auch Web Services und eigene JavaScript-Skripte ein. Besonders aufpassen müssen Sie bei verschachtelten Seiten, da immer nur ein ScriptManagerControl auf einer Seite liegen darf.

2.6 Skripte einbinden Sie können im ScriptManager Web Services und andere JavaScript-Skripte einbinden. In Kapitel 4 erfahren Sie, wie Web Services funktionieren. Hier ein kleines Beispiel für ein Skript:

102

Drag&Drop

Abb. 6.2: Per XML-Skript wird Text und Kodierung gesetzt

Hinweis Sollten Sie noch ältere Atlas-Beispiele besitzen, können Sie sie eventuell mit der XML-Script-Erweiterung des Future zum Laufen bringen. Insgesamt ist XML-Script aber nicht die Zukunft.

6.2 Drag&Drop In Sachen Drag&Drop bietet Microsoft ASP.NET Ajax diverse Funktionen: 쐌 Den DragPanelExtender im Control Toolkit. Dieses Control macht ein beliebiges Element ziehbar. 쐌 ReorderList im Control Toolkit. Diese Elemente sorgen für per Drag&Drop sortierbare Listen. Hinweis Im Control Toolkit verwenden außerdem einige andere Elemente wie der Slider, ein Schieberegler, Grundzüge von Drag&Drop.

schnell + kompakt

103

6 – Futures und Sonstiges

쐌 Den DragDropManager in den Futures. Hierbei handelt es sich um eine Drag&Drop-Schnittstelle, die sich an alte MicrosoftImplementierungen für Drag&Drop anlehnt. Sie wird auch im DraggableListItemExtender verwendet – allerdings ist sie dort als abgewandelte Kopie integriert, um das Control Toolkit nicht von den Futures abhängig zu machen. 쐌 Die Implementierung DragDropList in den Futures, die auf dem DragDropManager aufsetzt Sehen Sie sich die verschiedenen Alternativen einmal an. Der DragPanelExtender macht ein beliebiges Element ziehbar:

Kasten



Die notwendigen Angaben sind das zu ziehende Element (TargetControlID) und der Anfasser, an dem gezogen wird (DragHandleID). Der Einfachheit halber ist das hier dasselbe Element. Drag&Drop klappt nur im Inhaltsbereich der Seite, sprich an Stellen, an denen sich Inhalt befindet. Außerhalb landet das Element wieder am Ausgangspunkt. Vor allem beim Testen kann das verwirren, weil das gezogene Element oft das einzige auf der Seite ist. Das Beispiel im Control Toolkit verwendet dafür einen kleinen JavaScript-Fix, der die Höhe des body-Bereichs setzt und auch auf Fenstergrößenänderungen reagiert:

104

Drag&Drop

Hinweis Die Koordinaten für das jeweilige Element lassen sich – wie bei jeder Drag&Drop-Operation – natürlich auch z.B. über die Profile speichern. So bleibt für Nutzer auch nach dem Neuladen die ursprüngliche Position erhalten.

Abb. 6.3: Das Element wird gezogen

schnell + kompakt

105

6 – Futures und Sonstiges

Etwas aufwändiger sind per Drag&Drop sortierbare Listen. Hierfür gibt es das ReorderList-Element. Ähnlich wie das Accordion aus dem letzten Kapitel ist es ein unabhängiges Control, erweitert also nichts. Das Element verwendet eine Datenquelle, um Inhalte aufzunehmen. Wie die Ausgabe aussehen soll, wird dann über Templates gespeichert, z.B. ein für die Elemente. Das folgende Beispiel verwendet eine einfache XML-Datenquelle, um eine sortierbare Liste anzuzeigen:

Erstes Element

Zweites Element

Die XmlDataSource ist für die ReorderList an sich nur bedingt geeignet, da sie nur lesbar ist. Hier reicht sie allerdings zur Schilderung der Grundfunktion. Sie müssen in der ReorderList eine Datenquelle angeben. Außerdem benötigen Sie das zentrale Datenfeld und das Feld für die Sortierung. Beide sind in unserem Fall Eigenschaften in Elementen der ersten Ebene, da diese von der XmlDataSource zur Verfügung gestellt werden. Der eigentliche Inhalt wird dann im über einen XPath-Ausdruck geladen:

106

Drag&Drop





Abb. 6.4: Die Liste ist per Drag&Drop sortierbar

In den Futures von Microsoft ASP.NET (Ajax) gibt es nicht nur den DragDropManager als Grundlage für eigene Anpassungen, sondern die vollständig nutzbaren Implementierungen DragDropList und DraggableListItem. Mit DragDropList machen Sie ein Element, z.B. ein -Element, zu einem Ziel, in das die DraggableListItem-Elemente gezogen werden können. Außerdem lassen sich diese Elemente innerhalb der Liste verschieben. Die Liste selbst ist also quasi das Ziel für alle DraggableListItemElemente. Dementsprechend können Sie auch mehrere Listen in

schnell + kompakt

107

6 – Futures und Sonstiges

Spalten- oder Reihenform wählen und zwischen ihnen Elemente austauschen. Im folgenden Beispiel sollen zwei Reihen zum Einsatz kommen. Zur Vorbereitung steht erst eimal ein wenig HTML- und CSSArbeit an. Zuerst benötigen Sie zwei sogenannte Templates, eines für den Zielbereich (hier release genannt) und eines für eine leere Liste. Beim Zielbereich soll sich in unserem Fall die Hintergrundfarbe ändern, damit der Nutzer weiß, dass er hier die Maustaste loslassen darf. Damit das Ganze in Reihe angeordnet wird, ergänzen Sie noch ein float: left. Wollten Sie eine vertikale Liste, müssten Sie das weglassen.

Leere Liste

Die eigentlichen Listen sind hier jeweils 600 Pixel breit und ein wenig voneinander entfernt. Die erste enthält standardmäßig zwei Elemente, die zweite drei. Die Elemente sind in diesem Beispiel nur so breit, dass drei nebeneinander in eine Liste passen würden. Sie werden auch mit float: left horizontal angeordnet:

Drag & Drop 1

Drag & Drop 2

108

Drag&Drop

Drag & Drop 3

Anschließend werden beim Laden der Seite in der Methode pageLoad() die Listen und alle Elemente initalisiert. Für die Liste zuständig ist Sys.Preview.UI.DragDropList(Element). Als Einstellungen definieren Sie noch, wie und was gezogen wird. Außerdem müssen Sie die Richtung einstellen:

Abb. 6.5: Elemente sind innerhalb und außerhalb der „Listen“ verschiebbar

schnell + kompakt

111

6 – Futures und Sonstiges

Profitipp Der große Vorteil am Drag&Drop über die Listenfunktion in den Futures ist, dass Sie alle Einstellungen per JavaScript vornehmen können und so die Möglichkeit haben, beliebige Elemente dynamisch zu generieren und per JavaScript zu steuern.

6.3 Animationen Für Animationen haben Sie im letzten Kapitel bereits das Animation-Control kennengelernt. Allerdings gibt es auch in den Futures Animationsmöglichkeiten. Die Bandbreite geht von der Transparenzanimation bis zur Animation beliebiger Attributwerte (NumberAnimation). Außerdem gibt es aus anderen Animationen zusammengesetzte Kompositionen (CompositeAnimation). Um die Funktionen zu nutzen, müssen Sie PreviewGlitz einbinden. PreviewScript ist hier für den später eingesetzten Timer notwendig:



Das folgende Beispiel verwendet eine Aus- und Einblendeanimation (FadeAnimation) und kombiniert sie noch mit einem Timer, um die Animationen zeitgesteuert aufzurufen. Das Zielobjekt der Animation ist ein einfaches Panel:

Inhalt des Panel

112

Animationen

Beim Laden der Seite wird es mit einer FadeAnimation ausgeblendet. Dazu müssen Sie zuerst auf das Element zugreifen. Es muss ein Control sein. Das Control kann per Sys.UI.Control(), also Ajax Extension-Funktionalität, definiert werden. Alternativ gibt es auch noch einige spezielle Controls in den Futures. Im Abschnitt zu XML-Script haben Sie beispielsweise Sys.Preview.UI.Label() kennengelernt. Den Effekt, also das Ausblenden, steuern Sie über set_effect(). Die Dauer steuern Sie mit set_duration(Sekunden). Der Wert ist ein Wert in Sekunden. Wollen Sie kleinere Einheiten, verwenden Sie einfach Dezimalzahlen mit Punkt als Trennzeichen. Mit play() wird die Animation dann abgespielt. var control = null; function pageLoad() { control = new Sys.UI.Control($get('Panel1')); var ani = new Sys.Preview.UI.Effects.FadeAnimation(); ani.set_target(control); ani.set_effect(Sys.Preview.UI.Effects.FadeEffect.FadeOut); ani.set_duration(4); ani.play(); var timer = new Sys.Preview.Timer(); timer.set_enabled(true); timer.set_interval(6000); timer.add_tick(fadeIn); timer.initialize(); }

Der Timer basiert auf der Klasse Sys.Preview.Timer(). Er erhält mit set_interval(Millisekunden) ein Intervall in Millisekunden. Das heißt in diesem Beispiel, das Einblenden startet zwei Sekunden nach dem Ausblenden. Mit add_tick(Funktion) wird ein Event-Handler registriert, der jedes Mal aufgerufen wird, wenn die Intervallzeit erreicht ist. Gestartet wird der Timer mit initialize().

schnell + kompakt

113

6 – Futures und Sonstiges

Eine Referenz auf den Timer wird an die aufgerufene Funktion übergeben. Sie können mit set_enabled(false) den Timer wieder ausschalten und so verhindern, dass die Einblendanimation immer wieder gezeigt wird. Die Einblendanimation entspricht weitgehend der Ausblendanimation, nur dass als Effekt FadeIn verwendet wird: function fadeIn(sender) { var ani = new Sys.Preview.UI.Effects.FadeAnimation(); ani.set_target(control); ani.set_effect(Sys.Preview.UI.Effects.FadeEffect.FadeIn); ani.set_duration(6); ani.play(); sender.set_enabled(false); }

Abb. 6.6: Das Element verschwindet

114

Stichwortverzeichnis

abortPostback() 31 Accordion 86

AccordionPane 86 add_initializeRequest() 31 add_tick() 113 addComponent() 46 addCssClass() 45 Ajax Dokumenation 12 Einrichtung 12 Homepage 10 JavaScript-API 39 Ajax.NET Professional 10 AjaxControlToolkit.sln 81 Aktualisierung 29 alert() (JavaScript) 93 allowAnonymous (Attribut) 77 Always (Wert) 22 Animationen 95, 112 AnimationExtender 96 Anonyme Profile 77 append() 51 appendLine() 51 Application 46 Architektur 19 Array 48 ASP.NET Konfiguration 67 ASP.NET 2.0 Ajax Extensions 1.0 11 ASP.NET Ajax Control Toolkit 11 ASP.NET Ajax Futures 11 ASP.NET Ajax-Enabled Web Site 18 Assembly 83 AssociatedUpdatePanelID (Attribut) 27

schnell + kompakt

115

$addHandler() 42, 58 $addHandlers() 44 $clearHandlers() 44 $find() 46 $get() 40 $removeHandler() 44 96