HowTo: Microsoft AJAX Client API nutzen

Bereits einmal in einer Wöchentlichen Rundablage erwähnt, möchte ich mich heute mal der AJAX Client API widmen. Die Client API wird oft kaum genutzt, obwohl manche kleinen Helferlein praktisch sind. Infos zu den ASP.NET AJAX Extensions (also der serverseitigen API gibt es z.B. hier in einem HowTo).

Was ist die ASP.NET AJAX Client API?

Die AJAX Client API ist entweder für ASP.NET Entwickler direkt in dem Download der ASP.NET AJAX Extensions (oder ASP.NET 3.5) enthalten oder auch als seperater Download zu bekommen. Die Client API kann auch in PHP, JSP, Ruby usw. eingesetzt werden, da es nur eine Javascript Bibliothek ist.

Ich werde mit den ASP.NET AJAX Extensions arbeiten, allerdings sind die clientseitigen Sachen später auch bei PHP und co. gültig.

Wie wird diese eingebunden?

Sobald man in ASP.NET den Scriptmanager mit einfügt, ist die Client API sofort mit eingebunden und wird mitgeladen:

image

(in PHP und co. muss die Installationsanleitung bei dem seperaten Download angesehen werden)

Ein Blick in die DOM verrät uns, was alles mit geladen wurde (und das ist nur ein Ausschnitt):

image

Was hat man nun davon?

Die Microsoft AJAX API bietet einige kleine Helferlein, welche einem das Javascript-Leben erleichtern können – das dabei aber natürlich immer ein gewisser “Respekt” dabei sein sollte, sollte für alle klar sein: Nur weil eine Bibliothek “verrückte” Sachen erlaubt, heisst das noch lange nicht, dass man diese nutzen muss.

Die kleinen Helferlein zeige ich mal kurz an 5 Beispielen:

1. Zugriff auf ein DOM Element

Der Zugriff erfolgt immer über “document.getElementById(…)” oder ähnlichem – die Microsoft AJAX API stellt dafür ein kleine Abkürzung bereit – den “$get Shortcut“. Das erleichtert immerhin die Tipparbeit ;)

2. Eventhandler dynamisch anhängen

Ein Element dynamisch per Javascript mit einem Event versehen ist etwas haarig, da der ID nicht alles mit macht und mir spontan allein 3 Wege einfallen wie man das “klassisch” lösen kann:

  • über innerHTML die Events “reinschreiben” (das versteht wenigstens auch der IE)
  • über setAttribute (geht beim IE manchmal nicht)
  • über die jeweiligen Eventeigenschaften direkt (wenn man den Syntax nicht direkt im Kopf hat, ist es etwas nervig)

Die Microsoft AJAX API erlaubt über den “$addHandler Shortcut” genau das. Leider kann man wohl leider keinen Parameter oder weiteren Kontext mitgeben.

Für dieses Thema empfehle ich diesen Blogbeitrag, da er auch einige andere Features zeigt, z.B. kann man über den “event” Parameter rausbekommen, welcher Knopf gedrückt wurde (Enter z.B.) oder wo die Mausposition etc. ist (Wie sowas mit normalen JS geht, wird hier erklärt.)

3. Strings verknüpfen

Einen String mit JS über das “+” zu erzeugen, wird dann schwierig, sobald Zahlen dirn vorkommen. Zahlen werden dann sofort addiert und erst danach an die nachfolgende Zeichenfolge drangeklebt. Das ist nicht immer den Effekt, den man sich wünscht.

Microsoft stellt hier eine “StringBuilder” Klasse zur Verfügung.

4. Umgang mit Arrays

In Zeiten von JSON etc. arbeitet man wieder viel auf der Clientseite und möchte angenommen jedes Element eines Arrays an eine spezielle Methode übergeben, damit dieser weiter verarbeitet werden kann. Im normalen JS muss man nun hier erst eine Schleife durchlaufen lassen etc.

Microsoft stellt hier eine “Array.forEach” Methode bereit, die genau dies macht. Die Methode gehört zu den Array Type Extensions, welcher noch andere Extensions angehören.
Dazu ist wahrscheinlich auch dieser Blogeintrag sehr interessant und empfehlenswert.

5. Datumsanzeige

Wie gerade erwähnt, hat Microsoft einige “Extensions” für normale JS “Typen” bereitgestellt, darunter auch einer für den “Date” Typ. Dieser hilft, Datumsformatierungen wesentlich einfacher vor zu nehmen, als in der klassischen Variante. Die “Microsoft” Variante ist aus den bekannten Java oder .NET entnommen und daher eigentlich nichts unbekanntes. Siehe dazu am besten den unteren Abschnitt von diesem Blogeintrag.

Mein Demoprojekt und den Source Code:

Die 5 Beispiele können live auch hier angesehen werden und habe ich im IE7 und Firefox 2 getestet. Da dies alles nur Javascript Code ist, findet ihr auch dort den Source Code.

Fazit:

Die Client API ist sehr interessant wenn man sich einmal eingearbeitet hat und stellt einige Erleichterungen bereit. Einen Blick ist sie auf alle Fälle wert und wenn man ohnehin die ASP.NET AJAX Server Funktionalitäten nutzt, kann man die vom Client doch auch mal mit einbauen.

Die komplette Client Reference findet ihr hier.

[ Demoanwendung + Sourcecode ]

Read more

Microsoft Press verschenkt LINQ, ASP.NET AJAX und Silverlight 1.0 e-Books

Zur Weihnachtszeit gibts was sehr interessantes von Microsoft Press: 3 EBooks gratis (Voraussetzung ist nur eine Windows Live ID) Introducing Microsoft® LINQ Introducing Microsoft® ASP.NET AJAX Introducing Microsoft® Silverlightâ„¢ 1.0 Downloaden könnt ihr das ganze auf der Microsoft Learning Website (dort ist ein Link “Download Free e-book offer…” – da drauf klicken und Windows Live […]

Read more

Erster Eindruck von ASP.NET MVC mit dem Visual Web Developer Express

Die ASP.NET Extension CTP ist schon eine kleine Weile verfügbar, jedoch bin ich erst heute dazu gekommen, mir dies mal anzuschauen. Da ich auf meinem privat Notebook kein Visual Studio 2008 Standard (oder höher) hab, benutze ich den Visual Web Developer 2008 (was wahrscheinlich bei vielen Leuten zutrifft). Vorbereitung:  Scotts Einführung Teil 1 (ASP.NET MVC […]

Read more

Microsoft Surface – Big A#? Table

Vom Surface Blog bin ich auf diesen “Trailer” gestoßen – der original Blogeintrag auf Sarcasticgamer.com befindet sich hier :)

Read more

Buchempfehlung: Programming WCF

Amazon.de Widgets WCF kam mit .NET 3.0 und ist in der Öffentlichkeit nur sehr wenig vertreten – WPF hat über Silverlight an Aufmerksamkeit gewonnen, was man jedoch mit WCF alles machen kann, wissen viele nicht. WCF ist mächtig und ermöglicht es, Server-Client Anwendungen sehr gut abzubilden. Dabei spielt auch der SOA Gedanke eine große Rolle. […]

Read more

HowTo: Silverlight mit dem "object" Tag als embedded HTML anbieten

Erstmal eine Warnung zum Anfang: Ich bin mir nicht sicher, ob diese Variante welche ich gleich vorstelle überhaupt von Microsoft so vorgesehen war und ob dies in der Praxis so umsetzbar ist – in meinem Test ging es mehr oder weniger gut – im IE7 (mit Einschränkungen) und FF2. Folgende Situation: YouTube und co. welche auf Flash […]

Read more

HowTo: Erstellen eines Silverlight 1.0 Videoplayers mal auf einfache Weise

Silverlight ist Microsofts Antwort auf Flash und wurde direkt für den Einsatz als Videoplayer entwickelt, doch wie genau funktioniert das? Wie bindet man ein Video ein und ist das kompliziert? Die Antwort: Nein, es ist sehr leicht einen simplen Videoplayer zu erstellen – genau das will ich heute zeigen. Alternativen zu meiner Lösung: Mein Beispiel […]

Read more

Windows Vista Gadgets und einige Sicherheitsbedenken

Windows Vista Gadgets sind zwar teilweise nützlich und schön anzuschauen, trotzdem wundere ich mich, wie Microsoft mit dem Thema Sicherheit umgeht. Die Vista Gadgets (.gadgets) sind eigentlich nur gezippte Datein: HTML Javascript CSS Als ich am Anfang davon hörte, war ich nicht gerade angetan, zwar konnte man auf bestimmte Systemeigenschaften zugreifen (Prozessorauslastung etc.), aber das […]

Read more

ASP.NET 3.5 Extensions – December CTP verfügbar

Die ASP.NET 3.5 Extensions bringen neben den neuen MVC Modell einige neue Features auch in andere ASP.NET Bereiche (nur immer ein paar Stichpunkte vom Besten ) : Für ASP.NET AJAX: Browser History Support Verbesserte Javascript Permalink Funktion ASP.NET MVC: Ich selber hab schon lange darüber berichtet (siehe hier) und freue mich schon darauf, es mal […]

Read more

Silverlight 1.1 Demo: Movieshow von der T-Systems MMS

Silverlight 1.0 wurde vor wenigen Monaten veröffentlicht und zeitgleich wurde eine Alphaversion von Silverlight 1.1 ausgeliefert. Im nächsten Release von Silverlight wird die Version 2.0 angestrebt. Um die Möglichkeiten mit Silverlight 1.1 auszutesten hat die T-Systems Multimedia Solutions GmbH  einen kleinen Showcase mit der aktuellen Silverlight Version 1.1 entwickelt: Die Silverlight MovieShow: Die Anwendung erlaubt […]

Read more

Letzte Posts

  • image.png
    Azure AppInsights: Ein mini Google Analytics für Websites

    Seit der Build Konferenz ist das neue Azure Portal für alle freigeschaltet. Durch das neue Portal ist mir ein “Dienst” aufgefallen, den ich bisher nicht gesehen hatte: Azure Application Insights Viel weiss ich nicht über den Dienst, aber wer eine Azure Website hat der sollte mal die “Analytics” Box öffnen. Im Grunde handelt es sich […]

  • image.png
    Source Code veröffentlichen – aber bitte mit Lizenz

    Seit es den Blog gibt wird auch meist der gesamte Demo Source Code mit veröffentlicht. Das Ganze hatte ich am Anfang noch als .zip verteilt, später lag es mal auf Google Code und nun liegen alle Samples und sonstige Sachen auf GitHub. Beim letzten User Group Treffen in Zürich mit dem Titel “Open Source: Get […]

  • Fix: Cannot convert from ‘CConnectProxy::_ComMapClass *’ to ‘AddInDesignerObjects::IDTExtensibility2 *’

    Mal einen etwas esoterischer Blogpost, welcher auftaucht wenn man zu viel mit Office Addins rumspielt. Der Fehler passiert beim Bauen von C++ Projekten, welchen diesen Typ benötigen. Lösung (auf 64bit Systemen): C:\Program Files (x86)\Common Files\DESIGNER>regsvr32 MSADDNDR.DLL And Rebuild. Meine lieben Kollegen hatte mir dies schon mehrfach gesagt, allerdings hatte ich es immer wieder vergessen Das […]

  • Gegen das Gesetz verstoßen: X Jahre Haft. Gegen die Terms of Use verstoßen: Bann auf Lebenszeit. Danke Google & co.

    Bei fast allen Diensten die man im Internet nutzen kann muss man den “Terms of use” zustimmen. Völlig logisch dass da natürlich drin steht was erlaubt und was nicht. Wenn man gegen diese Regelungen verstößt hat das Unternehmen natürlich das Recht etwas dagegen zu unternehmen. In der heutigen Welt beherrschen einige wenige Unternehmen die digitale […]

  • image.png
    RSS Feed samt Kommentaranzahl und andere nicht Standard Elemente mit dem SyndicationFeed auslesen

    Jetzt mal ein Blogpost ohne ein fancy NuGet Package: Seit .NET 3.5 gibt es die SyndicationFeed Klasse. Eine schon etwas ältere API, reicht aber aus um Atom bzw. RSS Feeds zu lesen. In diversen RSS Feeds gibt es aber Erweiterungen, welche man natürlich auch auslesen möchte. So gibt WordPress z.B. auch die Anzahl der geposteten […]

Amazon Shop

Facebook