Tobias Hauser. Microsoft Ajax. schnell + kompakt

Microsoft Ajax

Tobias Hauser Microsoft Ajax

Tobias Hauser Microsoft Ajax 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 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 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 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. 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- 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. 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. 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. 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: 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 UpdatePanel- Inhalts 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 Update- Panel wird vielmehr aktualisiert, wenn das übergeordnete aktualisiert wird. 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: <asp:updatepanel ID="UpdatePanel1" ChildrenAsTriggers="false" UpdateMode="Conditional" runat="server"> 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 <asp:updatepanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:label ID="Label1" runat="server" Text="Label"> </asp:label> <br /> </ContentTemplate> </asp:updatepanel> <asp:button ID="Button1" runat="server" Text="Button" /> <br /><br /> <asp:label ID="Label2" runat="server" Text="Label"> </asp:label> Um einen Auslöser explizit zu setzen, verwenden Sie den Bereich <Triggers> 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: <Triggers> <asp:asyncpostbacktrigger ControlID="Button1" EventName="click" /> </Triggers> 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: 23

2 UpdatePanel und Co. 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/update- PanelOverview.aspx#UpdatePanelCompatibleControls. Teilprotected 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 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 Update- Panel. Der RenderMode gibt an, ob das UpdatePanel als Blockelement (sprich <div>) oder als Inline-Element (sprich <span>) 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 25

2 UpdatePanel und Co. Nutzer nur gezeigt, dass etwas passiert. Eine solche Animation können Sie natürlich auch innerhalb des UpdateProgress- Elements 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 <ProgressTemplate>: <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" /> <br /> <asp:updateprogress ID="UpdateProgress1" runat="server"> <ProgressTemplate> Neue Zufallszahl wird geladen... </ProgressTemplate> </asp:updateprogress> </ContentTemplate> </asp:updatepanel> 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 CSS- Eigenschaft 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 27

2 UpdatePanel und Co. Schaltfläche. Das heißt, in Verbindung mit einem UpdatePanel fügen Sie ihn entweder im UpdatePanel ein: <asp:updatepanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:label ID="Label1" runat="server" Text="Label"> </asp:label> <asp:timer ID="Timer1" runat="server" Interval="1000"> </asp:timer> </ContentTemplate> </asp:updatepanel> Oder Sie setzen ihn außerhalb ein und setzen einen Trigger auf den Timer. <asp:updatepanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:label ID="Label1" runat="server" Text="Label"></asp:Label> </ContentTemplate> <Triggers> <asp:asyncpostbacktrigger ControlID="Timer1" /> </Triggers> </asp:updatepanel> <asp:timer ID="Timer1" runat="server" Interval="1000"> </asp: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 Update- Panels 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: <asp:asyncpostbacktrigger ControlID="Timer1" EventName="tick" /> Außerdem haben Sie die Möglichkeit, serverseitig darauf zu reagieren. <asp:timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick"> Sie schreiben nun nur noch eine Methode Timer1_Tick, die bei jeder Aktualisierung auch in Verbindung mit einem Update- Panel aufgerufen wird. 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: <asp:updatepanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:label ID="Label1" runat="server" Text="Label"> </asp:label> <br /> <asp:button ID="Laden" runat="server" Text="Laden" /> <br /> <asp:button ID="Abbrechen" runat="server" Text="Abbrechen" /> <br /> <asp:updateprogress ID="UpdateProgress1" runat="server"> <ProgressTemplate> Neue Zufallszahl wird geladen... </ProgressTemplate> </asp:updateprogress> </ContentTemplate> </asp:updatepanel> 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. <script language="javascript" type="text/javascript"> var manager = null; function pageload() { manager = Sys.WebForms.PageRequestManager.getInstance(); manager.add_initializerequest(pruefestatus); } Der Event-Handler prüft zuerst, ob der PageRequestManager existiert und ob es sich um einen asynchronen Aufruf handelt (get_isinasyncpostback()). Anschließend erhalten Sie aus dem zweiten Parameter des Event-Handler die Information, welches Element für den PostBack verantwortlich war. Ist es die Abbrechen-Schaltfläche, wird der PostBack mit abortpostback() abgebrochen und mit args.set_cancel(true) jeder Neuversuch unterdrückt. function pruefestatus(sender, args) { if (manager!= null && manager.get_isinasyncpostback() && args.get_postbackelement().id == 'Abbrechen') { manager.abortpostback(); args.set_cancel(true); } } </script> 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 ScriptManager- Control auf einer Seite liegen darf. 2.6 Skripte einbinden Sie können im ScriptManager Web Services und andere Java- Script-Skripte einbinden. In Kapitel 4 erfahren Sie, wie Web Services funktionieren. Hier ein kleines Beispiel für ein Skript: <asp:scriptmanager ID="ScriptManager1" runat="server"> <Scripts> <asp:scriptreference Path="js/MeinSkript.js" /> </Scripts> </asp:scriptmanager> 33

2 UpdatePanel und Co. Damit das Skript komplett geladen ist, wenn Microsoft Ajax die JavaScript-Funktion pageload() ausführt, sollten Sie am Ende des eingebundenen Skripts noch folgenden Code hinzufügen: if (typeof(sys)!= "undefined") { Sys.Application.notifyScriptLoaded(); } Hinweis Für das ScriptReference-Control können Sie noch einige Attribute setzen. Sie haben unter anderem die Möglichkeit, ein JavaScript-Skript aus einer Assembly einzusetzen. Das kommt z.b. beim Microsoft Ajax Futures CTP zum Einsatz. Eine Übersicht über die Möglichkeiten erhalten Sie unter http://ajax.asp.net/docs/mref/t_system_web_ui_scriptrefer ence.aspx. 2.7 Verschachtelte Sites Pro Seite ist nur ein ScriptManager-Control erlaubt. Das gilt auch bei verschachtelten Elementen mit Masterseiten und User-Controls. Sollte eines der verschachtelten Elemente allerdings noch eigene Erweiterungen benötigen z.b. ein eigenes JavaScript- Skript, können Sie dort das ScriptManagerProxy-Control einsetzen: <asp:scriptmanagerproxy ID="ScriptManagerProxy1" runat="server"> <Scripts> <asp:scriptreference Path="js/MeinScript.js" /> </Scripts> </asp:scriptmanagerproxy> 34

Programmieransätze Abb. 2.9: Zwei ScriptManager sind nicht möglich 2.8 Programmieransätze UpdatePanel, ScriptManager etc. lassen sich nicht nur deklarativ, sondern auch per serverseitiger Programmierung steuern. Das Herzstück ist auch hier der ScriptManager bzw. die Script- Manager-Klasse. Sie haben zum Beispiel die Möglichkeit, mit der Methode RegisterAsyncPostbackControl() ein Control für das Aktualisieren von UpdatePanel-Bereichen anzugeben. Außerdem sind natürlich, wie in ASP.NET gewohnt, Attribute, die deklarativ gesetzt werden können, auch per Programmierung setzbar. UpdatePanels lassen sich über die Klasse UpdatePanel steuern. Hier gibt es beispielsweise die Methode Update(), die serverseitig eine Aktualisierung hervorruft. 35

2 UpdatePanel und Co. Das folgende Beispiel verbindet die Steuerung von Script- Manager und UpdatePanel. Das UpdatePanel wird auf Knopfdruck aktualisiert, allerdings erfolgt die Verbindung nicht deklarativ per Trigger, sondern per Programmierung. Dafür muss der UpdateMode des UpdatePanel in Conditional geändert werden: <asp:updatepanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server"> <ContentTemplate> <asp:label ID="Label1" runat="server" Text="Label"> </asp:label> <br /> </ContentTemplate> </asp:updatepanel> <asp:button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> Die Aktualisierung erfolgt in der Schaltfläche bei Klick. Die serverseitige Methode ruft die Update()-Methode des UpdatePanel auf: protected void Button1_Click(object sender, EventArgs e) { UpdatePanel1.Update(); } Damit nun kein kompletter PostBack durchgeführt wird, muss die Schaltfläche noch für asynchrone Aufrufe registriert werden. Das geschieht beim Laden der Seite mit der RegisterAsyncPost- BackControl()-Methode des ScriptManager: 36

Fehlerhandling protected void Page_Load(object sender, EventArgs e) { ScriptManager1.RegisterAsyncPostBackControl(Button1); Random ran = new System.Random(); Int32 zahl = ran.next(0, 100000); Label1.Text = zahl.tostring(); Label2.Text = zahl.tostring(); } Hinweis Eine komplette Übersicht erhalten Sie in der Server-Referenz der ASP.NET Ajax-Dokumentation (http://ajax.asp.net/docs/ mref/r_project.aspx). 2.9 Fehlerhandling Der ScriptManager kann auch für das Fehlerhandling verwendet werden. Dazu gibt es die Eigenschaft OnAsyncPostBackError: <asp:scriptmanager ID="ScriptManager1" runat="server" OnAsyncPostBackError="PostbackError" /> Diese serverseitige Methode verarbeitet Fehlermeldungen, die auf dem Server auftreten. Im einfachsten Fall übergeben Sie die Nachricht mit dem Fehler an den ScriptManager, um sie clientseitig auszugeben: protected void PostbackError(object sender, AsyncPostBackErrorEventArgs e) { ScriptManager1.AsyncPostBackErrorMessage = e.exception.message; } 37

2 UpdatePanel und Co. Nun müssen Sie nur noch auf Knopfdruck einen Fehler beim asynchronen Aufruf produzieren. Dazu benötigen Sie eine Schaltfläche, die einen asynchronen Aufruf einer serverseitigen Methode (hier Fehler()) provoziert: <asp:button ID="Button1" runat="server" Text="Button" OnClick="Fehler" /> Für den asynchronen Aufruf muss sich die Schaltfläche entweder im UpdatePanel befinden oder per Trigger bzw. per serverseitiger Programmierung als asynchrones Control registriert sein. Der provozierte Fehler kann hier natürlich künstlich sein. Geben Sie dazu einfach eine Exception an: protected void Fehler(object sender, EventArgs e) { throw new Exception("Klappt nicht!"); } 38

KAPITEL 3 JavaScript-API 3.1 pageload() 40 3.2 $get() 40 3.3 Event-Handler 41 3.4 Elemente 44 3.5 Erweiterte JavaScript-Objekte 47 3.6 StringBuilder 50 Microsoft ASP.NET Ajax besteht nicht nur aus serverseitigen Komponenten und Web-Service-Integration, sondern auch aus einer umfangreichen JavaScript-API. Sie steht als separater Download zur Verfügung, ist aber auch in die normalen Ajax Extensions integriert. Sobald Sie einen ScriptManager auf der Seite integriert haben, werden die entsprechenden JavaScript- Bibliotheken eingebunden und die API steht zur Verfügung. Hinweis In Atlas, der Vorabversion von Microsoft ASP.NET Ajax, gehörte XML-Script, eine deklarative clientseitige Sprache, zum Standardumfang. In der finalen Version wurde sie in den Futures CTP verbannt und die komplette Steuerung erfolgt per JavaScript. Die Dokumentation egal ob online oder offline enthält eine Referenz mit allen clientseitigen Funktionalitäten der JavaScript- API. In diesem Kapitel stellen wir Ihnen wichtige Bestandteile der API vor. Einige Funktionen lernen Sie auch in den folgenden Kapiteln kennen oder haben Sie wie den PageRequestManager schon kennengelernt. Alle in diesem Buch vorgestellten und 39

3 JavaScript-API ebenso die nicht vorgestellten Teile finden Sie unter http:// ajax.asp.net/docs/clientreference/. Organisiert ist die JavaScript-API in Namensräume, ähnlich wie das.net Framework. Erweiterungen für JavaScript-Objekte und Kurzformen für den Zugriff auf Elemente finden Sie im Namensraum Global. Dort ist zum Beispiel der Zugriff auf Elemente per $get() enthalten. Die übrigen Namensräume enthalten zum einen die Funktionalität, auf der die Kurzformen wie $get() basieren, zum anderen auch verschiedenste Microsoft-Erweiterungen. 3.1 pageload() Zur clientseitigen API gehört auch die Funktion pageload(), die Sie im letzten Kapitel schon kennengelernt haben. Sie wird ausgeführt, wenn das Dokument und alle Skripte geladen sind. Gerade das Laden externer Skripte wird nämlich vom JavaScript- Ereignis window.onload nicht abgefangen. Damit bei einem externen Skript auch wirklich geladen wird, müssen Sie es immer mit einem Zusatz versehen: if (typeof(sys)!= "undefined") { Sys.Application.notifyScriptLoaded(); } 3.2 $get() Wenn Sie auf Elemente zugreifen, setzen Sie in modernen Java- Script-Anwendungen auf document.getelementbyid(). Microsoft ASP.NET Ajax bietet dafür eine Hilfsfunktion namens $get(id). Die folgende Zeile greift auf das Element mit der ID ausgabe zu und füllt es mit einem Text: $get("ausgabe").innerhtml = "Neuer Text"; 40

Event-Handler Alternativ können Sie natürlich auch CSS-Eigenschaften so einsetzen, wie Sie das in JavaScript schon lange gewohnt sind: $get("ausgabe").style.color = "red"; Wenn Sie Elemente nur unterhalb bestimmter anderer Elemente finden möchten, gibt es für $get(element, Elternelement) einen zweiten Parameter, die ID des Elternelements. In diesem Fall wird das Element nur gefunden, wenn es sich unterhalb des Elternelements befindet. Hinweis $get() besitzt in der JavaScript-API auch eine Langform: Sys.UI.DomElement.getElementById(ID). Geliefert wird also ein DOM-Element. In der Praxis verwendet man allerdings die kurze Variante. 3.3 Event-Handler Event-Handler sind Funktionen, die in JavaScript auf Ereignisse reagieren. Im einfachsten Fall können Sie über die entsprechenden HTML-Attribute onclick, onmouseover etc. aufgerufen werden. Im etwas komplexeren Fall werden sie Ereignissen zugewiesen, z.b. so: window.onload = function() { //Anweisungen }; Diese Möglichkeiten kapselt $addhandler(element, Ereignis, Funktion) in einer einfachen Hilfsfunktion. Damit wird auch die ursprüngliche Intention erreicht, den Zugriff auf Ereignisse Browser-übergreifend zu gewährleisten. Denn leider haben In- 41

3 JavaScript-API ternet Explorer und der Rest der Welt lange Zeit unterschiedliche Ansätze verfolgt. Sie geben in $addhandler() das Element an, auf das das Ereignis angewendet wird. Wichtig ist, dass es sich um das Element selbst handelt, nicht nur die ID. Anschließend folgt das betroffene Ereignis. Die Namen entsprechen den JavaScript- Ereignissen, nur ohne vorangestelltes on. Der dritte Parameter ist die Funktion, die aufgerufen wird. Ereignisse können Sie natürlich verschiedenen Elementen zuweisen. Für ein erstes Beispiel soll eine Schaltfläche zum Einsatz kommen: <input id="event" type="button" value="event" /><br /><br /> <div id="ausgabe"></div> Der Event-Handler wird in pageload() hinzugefügt: function pageload() { $addhandler($get("event"), "click", handler); } Die Handler-Funktion selbst gibt im <div>-block einen Text aus (Abbildung 3.1): function handler() { $get("ausgabe").innerhtml = "Schaltfläche geklickt"; } $addhandler() ist eine Kurzform von Sys.UI.DomEvent. Sie können dementsprechend im Event-Handler auch die Eigenschaften für ein DomEvent verwenden. Eine Eigenschaft davon sind die angeklickten Koordinaten auf dem Bildschirm screenx und screeny (Abbildung 3.2): 42

Event-Handler function handler(e) { $get("ausgabe").innerhtml = "Klickkoordinaten: " + e.screenx + " und " + e.screeny; } Abb. 3.1: Die einfachste Form eines Ereignisses Abb. 3.2: Die Koordinaten werden ausgelesen 43

3 JavaScript-API Hinweis Einen vollständigen Überblick über die Eigenschaften des Ereignisses liefert http://ajax.asp.net/docs/clientreference/ Sys.UI/DomEventClass/default.aspx. Bei den Kurzformen finden sich neben $addhandler() noch weitere Möglichkeiten für Event-Handler. $addhandlers(element, Ereignis-Handler-Paare) fügt einem Element mehrere Ereignisse hinzu. Die Ereignisse werden als Objekt angelegt. Das Ereignis ist der Name und die Handler-Funktion ist der Wert. Event-Handler lassen sich allerdings nicht nur hinzufügen. Mit $removehandler(element, Ereignis, Handler) löschen Sie einen Event-Handler. $clearhandlers(element) entfernt alle Event- Handler eines Elements. 3.4 Elemente Die JavaScript-API von Microsoft ASP.NET Ajax unterscheidet mehrere Arten von Elementen, die hauptsächlich im Namensraum Sys.UI zu finden sind. Die einfachste Form ist ein Dom- Element, sprich ein beliebiges HTML-Element, auf das Sie per DOM-Baum zugreifen. Dies entspricht beispielsweise dem Schnellzugriff mit $get(). Das DOM-Element erlaubt allerdings auch Zugriff auf Position und Maße eines Elements und dient dazu, CSS-Klassen hinzuzufügen und zu entfernen. Komponenten basieren dagegen auf der Basisklasse Sys.Component. Sie erweitern bestehende Objekte, sind selbst aber keine Elemente für die UI, sprich die Nutzeroberfläche. UI-Objekte, die auf Sys.Component basieren, sind Controls und Behavior. 44

Elemente DomElement Das DomElement bietet verschiedene spannende Methoden, die Sie sehr leicht einsetzen können. Sie schreiben einfach den kompletten Namensraum, gefolgt von der Klasse und der Methode das entspricht einem statischen Aufruf. Das betroffene Element ist immer der erste Parameter. Hier einige interessante Methoden im Überblick: getbounds(element) liefert ein Objekt mit vier Eigenschaften, x und y für die Koordinaten, außerdem width und height. Setzen lassen sich die Werte nur über die CSS-Befehle oder die Koordinaten über setlocation(). getlocation(element) liefert x- und y-koordinaten eines Elements. setlocation(element, x, y) setzt ein Element an die angegebenen Koordinaten. Die Positionierung erfolgt dabei automatisch absolut (CSS-Wert für position ist absolute). Sys.UI.DomElement.setLocation($get("ausgabe"), 100, 200); addcssclass(element, Klasse) fügt eine CSS-Klasse hinzu. Ein Beispiel finden Sie in Kapitel 4. Hinweis Intern setzt ASP.NET die class-eigenschaft aus JavaScript. Das heißt auch, dass Sie mehrere Klassennamen durch Leerzeichen separiert hintereinanderpacken können. Da diese Funktionalität aber nicht dokumentiert ist, ist eher davon abzuraten. removecssclass(element, Klasse) entfernt eine CSS-Klasse. Auch dazu ist ein Beispiel in Kapitel 5 zu finden. 45

3 JavaScript-API containscssclass(element, Klasse) prüft, ob eine Klasse für das Element vorhanden ist. togglecssclass(element, Klasse) schaltet eine Klasse je nach aktuellem Status ein oder aus. Komponenten, Controls und Behavior Komponenten bilden die Basis von Controls und Behavior. In den meisten Fällen werden Sie eigene Klassen schreiben, die bestehende Controls erweitern. Auf Controls können Sie aber auch direkt zugreifen. Ein Control lässt sich als neues Objekt anlegen: var control = new Sys.UI.Control(Element); Damit es dann in der gesamten Applikation zur Verfügung steht, müssen Sie es mit der Methode addcomponent(control) zur Application hinzufügen: Sys.Application.addComponent(control); Und schließlich gibt es noch eine Kurzform für den Zugriff auf registrierte Komponenten: $find() arbeitet ähnlich wie $get(). Der erste Parameter ist die ID des Elements, der zweite optionale Parameter die ID des Elternelements. Allerdings werden hier Komponenten gefunden und nicht DOM-Elemente. Das folgende Beispiel besteht aus einem Control und einer Schaltfläche: <div id="control" style="visiblity: hidden"> Control-Inhalt </div> <input id="controlbutton" type="button" value="control ausblenden" /> 46

Erweiterte JavaScript-Objekte Das Control ist standardmäßig ausgeblendet. In pageload() blenden Sie es wieder ein, denn bei Controls können Sie die Sichtbarkeit steuern (siehe auch ein Beispiel in Kapitel 4). Außerdem erhält die Schaltfläche einen Event-Handler und das Control wird als Komponente registriert: Wer viel mit JavaScript entwickelt, kennt natürlich die Grenzen von JavaScript und weiß, dass ein umfangreiches Paket an Hilfsfunktionen notwendig sein kann. Microsoft ASP.NET Ajax besitzt bereits direkt integrierte Hilfen. Zu finden sind diese Funkfunction pageload() { var control = new Sys.UI.Control($get("control")); Sys.Application.addComponent(control); control.set_visible(true); $addhandler($get("controlbutton"), "click", controlausblenden); } Zum Ausblenden wird schließlich die Methode set_visible() verwendet. Der Zugriff auf das Control erfolgt per $find(): function controlausblenden() { $find("control").set_visible(false); } Hinweis Eigene Komponenten, Controls und Behavior schreiben Sie, indem Sie Sys.Component bzw. Sys.UI.Control und Sys.UI. Behavior erweitern. Beispiele finden Sie unter http://ajax.asp. net/docs/tutorials/aspnetajaxextensibilitytutorials.aspx. 3.5 Erweiterte JavaScript-Objekte 47

3 JavaScript-API tionen als JavaScript Base Type Extensions in der Referenz (http:/ /ajax.asp.net/docs/clientreference/global/javascripttypeextensions/). Profitipp Sehr praktisch sind auch die Cheat Sheets von Milan Negovan. Hier erhält man einen tollen Überblick (http://aspnetresources.com/blog/ms_ajax_cheat_sheets_batch1.aspx). Mit den hier vorgestellten Methoden können Sie beispielsweise zu einem Array einfach Elemente hinzufügen und bestehende Elemente entfernen. Die Methode foreach() ruft für jedes Element eine JavaScript-Funktion auf: var a = new Array(1, 2, 3); Array.forEach(a, Methode, Kontext); Als dritter Parameter wird hier ein vom Nutzer wählbarer Kontext bzw. eine Zusatzinformation übermittelt, die dann per this in der Event-Handler-Methode ankommt. Hier ein einfaches Beispiel, das die Inhalte eines Arrays multipliziert: var ergebnis = 0; function pageload() { var a = new Array(1, 2, 3); Array.forEach(a, rechnen, "+"); $get("ausgabe").innerhtml = ergebnis; } function rechnen(wert, index, array) { if (this == "+") { ergebnis += wert; } } 48

Erweiterte JavaScript-Objekte In der Praxis müssten Sie natürlich noch prüfen, ob auch alle Inhalte des Arrays eine Zahl sind oder ob sich z.b. Strings darunter gemischt haben. Abb. 3.3: Richtig gezählt: Dank Array-Erweiterung lässt sich ein Array mittels Funktionsaufrufen durchgehen Das Datum lässt sich mit lokalem Format ausgeben und auch für Zahlen gibt es Formatierungsangaben. Die Formatierungen richten sich dabei nach den aus dem.net Framework bekannten Standards. Sie sollen es.net-entwicklern also erleichtern, mit JavaScript zurechtzukommen. Hier ein Beispiel für das Datum im lokalen Format: var datum = new Date(); $get("ausgabe").innerhtml = datum.localeformat("dd. MMMM yyyy HH:mm:ss"); Das lokale Format wird nur dann korrekt in Deutsch angezeigt, wenn die CulturInfo Deutsch ist. Sie können sie in der Page-Direktive setzen: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Date.aspx.cs" Inherits="Date" Culture="de-DE" UICulture="de" %> 49

3 JavaScript-API Alternativ ist auch das Setzen per Skript möglich. Damit die Angaben lokal übernommen werden, muss im ScriptManager die Eigenschaft EnableScriptGlobalization auf true gesetzt sein: <asp:scriptmanager EnableScriptGlobalization="true" ID="ScriptManager1" runat="server"> </asp:scriptmanager> Abb. 3.4: Ein deutscher Monatsname Für Strings besonders praktisch sind die trim-methoden. Damit entfernen Sie Leerzeichen und anderen Whitespace am Anfang und/oder am Ende eines Strings: var text = " Ein String "; text = text.trim(); liefert also Ein String. 3.6 StringBuilder Der StringBuilder aus dem Sys-Namensraum ist eine weitere Microsoft-Hilfsfunktion für JavaScript. Er dient dazu, Strings zu konkatenieren, sprich, miteinander zu verbinden. Sie instanziie- 50

StringBuilder ren ihn als Objekt und können dabei schon einen ersten String hinzufügen. Weitere Strings kommen dann mit append() hinzu. appendline() fügt ebenfalls Strings an, allerdings mit Zeilenumbruch (\n und nicht HTML-Zeilenumbruch). Mit der Methode tostring(trennzeichen) lässt sich der String wieder in einen Gesamtstring aufteilen. Dabei haben Sie auch die Möglichkeit, ein Trennzeichen anzugeben. Das folgende Beispiel nimmt Einzelstrings und fügt diese mit Leerzeichen getrennt hintereinander: function pageload() { var text1 = "Hallo"; var text2 = "StringBuilder"; var sb = new Sys.StringBuilder("Los geht es:"); sb.append(text1); sb.append(text2); $get("ausgabe").innerhtml = sb.tostring(" "); } Abb. 3.5: Der String wird zusammengebaut 51