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: lektorat@entwickler-press.de 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 9 1.1 Bestandteile 11 1.2 Einrichtung 12 Kapitel 2: UpdatePanel und Co. 17 2.1 UpdatePanel 18 Trigger 21 Attribute 25 2.2 UpdateProgress 25 2.3 Timer 27 2.4 Clientseitige Steuerung 30 2.5 ScriptManager und Co. 33 2.6 Skripte einbinden 33 2.7 Verschachtelte Sites 34 2.8 Programmieransätze 35 2.9 Fehlerhandling 37 Kapitel 3: JavaScript-API 39 3.1 pageload() 40 3.2 $get() 40 3.3 Event-Handler 41 3.4 Elemente 44 DomElement 45 Komponenten, Controls und Behavior 46 3.5 Erweiterte JavaScript-Objekte 47 3.6 StringBuilder 50 schnell + kompakt 5
Inhaltsverzeichnis Kapitel 4: Web Services und Co. 53 4.1 Web Services 53 Web Service einrichten 54 Web Service aufrufen 57 Fehlerhandling 61 Datenaustausch 62 4.2 Forms Authentication Services 66 Serverseitig 66 Clientseitig 68 4.3 Profile Services 75 Serverseitig 76 Clientseitig 77 Kapitel 5: Control Toolkit 81 5.1 Eigenständige Controls 86 5.2 Extender 89 Formulare und Informationen 89 Modale Fenster 93 Effekte 95 Kapitel 6: Futures und Sonstiges 99 6.1 XML-Script 101 6.2 Drag&Drop 103 6.3 Animationen 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 Ajax- Templates 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.NET- Funktionen 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 Ajax- Controls 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 ZIP- Archivs 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 JavaScript- Dateien 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
UpdatePanel und Co. KAPITEL 2 2.1 UpdatePanel 18 2.2 UpdateProgress 25 2.3 Timer 27 2.4 Clientseitige Steuerung 30 2.5 ScriptManager und Co. 33 2.6 Skripte einbinden 33 2.7 Verschachtelte Sites 34 2.8 Programmieransätze 35 2.9 Fehlerhandling 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! <asp:scriptmanager ID="ScriptManager1" runat="server" /> 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 HTML+JavaScript HTTP-Request Seite anfordern HTTP-Response Server ASPX-Seite UpdatePanel HTTP-Request über XMLHttpRequest Partielle Updates HTTP-Response UpdatePanel -Inhalte und -Methoden 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 <ContentTemplate>: <asp:updatepanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:label ID="Label1" runat="server" Text="Label"> </asp:label> <br /> <asp:button ID="Button1" runat="server" Text="Button" /> </ContentTemplate> </asp:updatepanel> Sie sollten noch ein zweites Label-Control außerhalb des Update- Panel 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