Ajax Aspekte: Verwenden von ASP.NET

Mit der Verwendung von ASP.NET auf dem Server wird Einiges einfacher da damit ein Framework für das mehrfache verwenden von HTML Code-Fragmenten, für die Erstellung von Controls und Komponenten sowie einige weitere nützliche Dinge zur Verfügung steht. Einige der Möglichkeiten des Seitenmodells, der User Controls und der Web Controls werden benutzt um AJAX Controls einfach bauen zu können.

Zusammen mit den JavaScript Behaviors über die ich bereits schrieb und mit denen der clientseitige Teil realisiert ist bieten die ASP.NET Controls auf dem Server eine solide Grundlage für AJAX Controls.

Es gibt einige gute Artikel und Beispiele auf dem Web die erklären wie man solche Controls realisiert aber es gibt auch einige trickreiche Dinge zu beachten um diese Controls als AJAX Controls zu verwenden.

User Controls

Eine sehr brauchbare Funktionalität der ASP.NET User Controls besteht darin den mehrfach benötigten HTML Code nur einmal in einer *.ascx Datei zu schreiben und dann so oft wie nötig wieder zu verwenden indem referenzierende Tags in die ASP.NET Seiten aufgenommen werden.

Web Controls

Einige Dinge können mit User Controls nur schwer realisiert werden. Insbesondere wenn das Control nur einen Rahmen für weitere innere HTML Objekte bildet können User Controls nicht verwendet werden. In diesen Fällen sind WebControls, die als spezielle Klassen realisiert werden müssen, leichter zu implementieren und so findet man beide Technologien in den Beispielen.

Kein Form Element

AJAX Controls werden realisiert damit KEIN Rückübertragen (postback) der Änderungen des Benutzers auf den Server und ein neues Laden der Seite mehr stattfinden. Deswegen wollen wir AJAX in unseren Web Applikationen. Im Gegensatz dazu wurden ASP.NET Controls genau für diese Art der Interaktion gemacht und werden deshalb meistens innerhalb eines HTML Form Elementes platziert. Da wir aber weder "autopostback" Funktionalitäten noch direkt ein direktes "form.submit()" verwenden werden haben wir keine Probleme damit die AJAX Controls innerhalb eines HTML form Element zu platzieren.

Wenn Sie planen existierende ASP.NET Web Forms mit AJAX Controls zu erweitern –eine Situation die ich unterstützen will – wird das HTML Form Element benötigt. Wenn neue Web Seiten ohne die serverseitige ASP.NET Web Form Funktionalität aufgebaut werden kann auf dieses HTML form Element komplett verzichtet werden.

Die Eingabe Taste

Etwas wird Benutzer stören, wenn ein Form Element vorhanden ist: Wenn man in einem Eingabefeld die Eingabe oder Enter Taste drückt wird (wie auch bei F5) die komplette Seite neu geladen. Alle Informationen die seit dem die Seite geladen wurde und durch asynchrone Aufrufe oder durch Eingaben des Benutzer auf die Seite kamen gehen dadurch verloren.

Die Eingabe oder Enter Taste hat im Gegensatz dazu keinen sichtbaren Effekt bei Input Feldern außerhalb eines Form Elementes da der Zeilenumbruch nicht dem Wert des Feldes hinzugefügt wird.

In der jcl.js Datei ist ein einfacher Trick implementiert, der dabei hilft um diese Situation herum zu kommen. Indem alle keypress Ereignisse abgefangen und überprüft werden ist es möglich das Ereignis frühzeitig abzubrechen und das automatische Abschicken des Formulars zu verhindern.

Um diesen Trick für HTML input Elemente zu aktivieren müssen dieses das Attribut "nosubmit" mit dem Wert "true" haben. Man kann dieses Attribut dem HTML Code oder dem JavaScript behaviour des AJAX Controls mitgeben.

Gemeinsames JavaScript

Die AJAX Controls verwenden die JavaScript behaviours und benötigen deshalb alle die gemeinsame Include Datei "~/controls/jcl.js ". Die moisten Controls benötigen auch jeweils eine weitere Inlcude Datei um den spezifischen Teil des JavaScript behaviours in der Form des Prototyp Objektes einzubinden.

Registrieren von Script-Includes

Eine sehr nützliche serverseitige Funktionalität von ASP.NET Web Forms ist die Art wie Controls kontrollieren können welche JavaScript Include Dateien notwendig sind damit ein Control richtig arbeiten kann. Die Funktion " RegisterClientScriptBlock" die im Page Objekt verfügbar ist als auch das neue Page.ClientScriptManager Objekt von ASP.NET 2.0 können verwendet werden um HTML Code anzugeben der vor dem weiteren Code einer HTML Form an den Client geschickt wird.

Mit "IsClientScriptBlockRegistered" ist es möglich zu prüfen, ob bereits ein entsprechender Script Block an den Client unterwegs ist.

Dieser Mechanismus ist perfekt geeignet um AJAX Controls zu bauen, da der Programmierer nichts darüber wissen muss, welches spezifisches JavaScript include file auf den Client gesendet werden muss, damit ein bestimmtes Control auch funktionieren kann. Er muss nur das Control an der richtigen Stelle in den HTML Code einbringen und alles andere funktioniert wie es soll.

Page.RegisterClientScriptBlock("CommonBehaviour",
  "<script type='text/javascript' src='"
  + Page.ResolveUrl("~/controls/jcl.js ")
  + "'><" + "/script>\n"));

Wenn ein HTML Form Element auf der Seite gibt existiert wird der registrierte HTML Code vor dem weiteren Code der Form eingebunden.

Wenn man ASP.NET 1.1 verwenden will muss man ein HTML Form Element vor al dem anderen HTML Code in der Seite includieren, Das bedeutet nicht, dass man die AJAX Controls in dieses Element hineinsetzen muss. Sie können auch nach einem leeren Form Element positioniert werden.

Registrieren von Script-Includes

Wenn man ASP.NET 2.0 verwendet kann man mit einem klenen Trick dafür sorgen, dass die notwendigen Include Dateien innerhalb des HTML head Elementes das mit "runat=server" deklariert ist aufgenommen werden.

// register the JavaScripts includes without need for a HTML form.
if (!Page.ClientScript.IsClientScriptBlockRegistered(Page.GetType(), "CommonBehaviour")) {
  Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "CommonBehaviour", String.Empty);
  Page.Header.Controls.Add(new LiteralControl("<script type='text/javascript' src='"
    + Page.ResolveUrl("~/controls/jcl.js ")
    + "'><" + "/script>\n"));
} // if

Mit diesem Trick macht es keinen Unterschied ob ein HTML form Element vorhanden ist oder nicht.

Beispiele und Downloads

Es sind bereits einige Beispiele von AJAX Controls auf der Beispiel Web Site veröffentlicht. Ich habe eine Portal-Seite hinzugefügt und sie sind dort im Bereich [Samples] über den 3. Verweis zu finden.

Man kann auch das ganze Projekt – so wie es ist downloaden. Es ist für ASP.NET 2.0 Beta 2 gemacht aber es sollte auch mit den August Versionen funktionieren.

posted by MatHertel @ 9/13/2005,