08.02.2010, 20:45 Uhr
Next Generation "ASP.NET Ajax" – Dynamische Webseiten ohne Postbacks
Das klassische ASP.NET-Webform-Modell erhält Konkurrenz aus eigenem Haus: Die ASP.NET Ajax-Bibliothek von Microsoft verhilft Webdevelopern das Umsetzen clientseitiger HTML-Anwendungen, die ohne Postbacks auskommen.
von Marc André Zhou
Typische ASP.NET Anwendungen verwenden serverseitige Steuerelemente, wie z. B. ein DataGrid, um Daten aus einer externen Datenquelle dynamisch in die entstehende HTML Seite einfließen zu lassen. Dieses Vorgehen ist seit der ersten ASP.NET Version typisch. Die ASP.NET Steuerelemente gehören zu dem bewährten Webform-Modell, das auf dem Postback-Mechanismus basiert. Doch gerade dieses Postback-Modell offenbart im Zeitalter von Web 2.0 und RIA-Anwendungen seine größte Schwäche: Bei jedem Ereignis, etwa ein Klick auf ein Steuerelement, wird die gesamte Seite zurück zum Webserver gesendet, serverseitig verarbeitet und für den erneuten Seitenaufbau zurück an den Browser geschickt. Die zu übertragende Datenmenge wird zusätzlich durch Viewstate Informationen aufgebläht. Die Intelligenz des Browsers wird nicht genutzt, da dieser lediglich das generierte HTML anzeigen kann.
Um dieses Problem zu lösen kommt heutzutage AJAX (Asynchrones JavaScript & XML) zum Einsatz. Auch Microsoft hat dies erkannt und selbst eine eigene ASP.NET Ajax-Bibliothek umgesetzt. Diese befindet sich derzeit im Beta Stadium und soll zum Erscheinen von Visual Studio 2010 in der finalen Version verfügbar sein. Die ASP.NET Ajax-Bibliothek beinhaltet alle wichtigen Methoden, um eine reine clientseitige HTML Anwendung zu erstellen. In diesem einleitenden Artikel werden einige der Möglichkeiten der Bibliothek anhand eines klassischen Master-Detail Beispiels gezeigt. Ziel der Anwendung soll es sein, die Kunden der Northwind Datenbank zu verwalten. Die Daten werden über einen Windows Communication Foundation (WCF) basierten Endpoint zur Verfügung gestellt und clientseitig konsumiert. Als Entwicklungsumgebung wird Visual Studio 2010 (Beta 2) verwendet.
Typische ASP.NET Anwendungen verwenden serverseitige Steuerelemente, wie z. B. ein DataGrid, um Daten aus einer externen Datenquelle dynamisch in die entstehende HTML Seite einfließen zu lassen. Dieses Vorgehen ist seit der ersten ASP.NET Version typisch. Die ASP.NET Steuerelemente gehören zu dem bewährten Webform-Modell, das auf dem Postback-Mechanismus basiert. Doch gerade dieses Postback-Modell offenbart im Zeitalter von Web 2.0 und RIA-Anwendungen seine größte Schwäche: Bei jedem Ereignis, etwa ein Klick auf ein Steuerelement, wird die gesamte Seite zurück zum Webserver gesendet, serverseitig verarbeitet und für den erneuten Seitenaufbau zurück an den Browser geschickt. Die zu übertragende Datenmenge wird zusätzlich durch Viewstate Informationen aufgebläht. Die Intelligenz des Browsers wird nicht genutzt, da dieser lediglich das generierte HTML anzeigen kann.
Um dieses Problem zu lösen kommt heutzutage AJAX (Asynchrones JavaScript & XML) zum Einsatz. Auch Microsoft hat dies erkannt und selbst eine eigene ASP.NET Ajax-Bibliothek umgesetzt. Diese befindet sich derzeit im Beta Stadium und soll zum Erscheinen von Visual Studio 2010 in der finalen Version verfügbar sein. Die ASP.NET Ajax-Bibliothek beinhaltet alle wichtigen Methoden, um eine reine clientseitige HTML Anwendung zu erstellen. In diesem einleitenden Artikel werden einige der Möglichkeiten der Bibliothek anhand eines klassischen Master-Detail Beispiels gezeigt. Ziel der Anwendung soll es sein, die Kunden der Northwind Datenbank zu verwalten. Die Daten werden über einen Windows Communication Foundation (WCF) basierten Endpoint zur Verfügung gestellt und clientseitig konsumiert. Als Entwicklungsumgebung wird Visual Studio 2010 (Beta 2) verwendet.
Zunächst wird der WCF-Endpoint in Form eines ADO.NET Data Services erstellt. Dies gelingt am einfachsten, indem zunächst die Northwind-Datenbank in ein ADO.NET Entity Framework-Modell gekapselt wird. Die daraus resultierende Kontextklasse wird als Typparameter der generischen Klasse DataService übergeben (Listing 1). Danach kann der Service bereits im Browser aufgerufen werden. Abbildung 1 zeigt das Ergebnis des Aufrufs im Browser. Somit ist der Datengeber für die Northwind Anwendung erstellt. Als nächstes erfolgt die Umsetzung der HTML-Oberfläche um die Daten anzuzeigen und zu bearbeiten.
Abbíldung 1: Auswhal eines Datensatzes
Im Mittelpunkt der ASP.NET Ajax Library steht, wenn es um die Anzeige und Bearbeitung von Daten geht, das DataView-Steuerelement. Dieses wird sowohl für die Anzeige von Datenlisten sowie für die Anzeige von einzelnen Datensätze zur Bearbeitung verwendet. Das DataView-Element erlaubt die Definition eines Layouts sowie die dynamische Einbettung von Daten mittels Platzhaltern. Vergleichbar ist dies mit dem klassischen ASP.NET-GridView Steuerelement. Die Definition des Layouts erfolgt direkt in HTML. Soll mithilfe des DataView eine Liste von Daten dargestellt werden, wird das Layout nur einmal definiert und später automatisch für jeden Datensatz kopiert und dem DOM (Document Object Model) dynamisch hinzugefügt. Listing 2 demonstriert die Verwendung und den Aufbau eines solchen Templates. Das Listing zeigt auch die Syntax der Datenbindung. Innerhalb der Liste wird die einfache Datenbindung verwendet.
Insgesamt existieren drei verschiedene Bindungsmodi:
One-time - die Daten werden einmal während des Anzeigeprozesses geladen und angezeigt. Ändern sich die Daten im späteren Verlauf, wird die Anzeige nicht aktualisiert.
One-way Live Binding - Änderungen an den Daten werden überwacht und sofort angezeigt. Direkte Datenänderungen sind nicht möglich.
Two-way Live Binding - Wie One-Way Live Binding. Zusätzlich können hierüber die Daten manipuliert werden. Daher verwendet man diesen Modus typischerweise bei HTML INPUT-Elementen.
Insgesamt existieren drei verschiedene Bindungsmodi:
One-time - die Daten werden einmal während des Anzeigeprozesses geladen und angezeigt. Ändern sich die Daten im späteren Verlauf, wird die Anzeige nicht aktualisiert.
One-way Live Binding - Änderungen an den Daten werden überwacht und sofort angezeigt. Direkte Datenänderungen sind nicht möglich.
Two-way Live Binding - Wie One-Way Live Binding. Zusätzlich können hierüber die Daten manipuliert werden. Daher verwendet man diesen Modus typischerweise bei HTML INPUT-Elementen.
Bei dem DataView-Steuerelement handelt es sich nicht um ein wirkliches Steuerelement. Vielmehr kann jedem HTML-Steuerelement die Funktionalität des DataView "angehängt" werden. Das Beispiel in Listing 2 verwendet als Container ein table-Element. Die HTML-Tabelle wird mittels sys:attach="dv" zu einem DataView erweitert. Damit dieser Aufruf funktioniert, ist es wichtig, die nötigen JavaScript-Namespaces einzubinden. Dies sollte - wie im Beispiel zu sehen ist - im body-Tag erfolgen. Die Erweiterung der HTML-Tabelle zu einem DataView-Steuerelement erfolgte deklarativ, das Laden und Binden der Daten erfolgt nun mittels JavaScript imperativ.
Die Daten werden über den eingerichteten ADO.NET Data Service-Endpoint angefordert und an das DataView gebunden. Listing 3 zeigt die dafür erforderlichen Methoden. Die Datenanforderung wird im Pageload-Ereignis abgesetzt. Dazu wird eine Instanz eines AdoNetDataContext erzeugt. Diese Klasse ist speziell für die Interaktion mit einem ADO.NET Data Service basierten Endpoint optimiert. Um die Daten anzufordern wird die Methode fetchData aufgerufen. Der erste Parameter der fetchData-Methode spezifiziert die Operation, die auf der Service Seite auszuführen ist, um die Daten abzurufen. Da es sich bei dem ADO.NET Data Service um einen REST-Dienst handelt, muss hier einfach der Pfad zu den Daten angegeben werden. In diesem Beispiel sollen die Kunden Entitäten (Customer Entities) der Northwind-Datenbank geladen werden. Aus der Angabe "Customer" ergibt sich daher folgende URI http://[local]//NorthwindData.svc/Customers.
Im zweiten Parameter können dem Aufruf zusätzliche Parameter übergeben werden. Hier soll die Anzahl der max. zurückzugebenden Datensätze auf 10 beschränkt werden. Dies geschieht durch den Parameter "$top:10". Die vollständige URI lautet somit http://[local]//NorthwindData.svc/Customers?$top=10. Der dritte Parameter legt das http-Verb fest. Da hier Daten geladen werden sollen, ist das Verb get zu verwenden.
Wie bei AJAX üblich findet eine asynchrone Verarbeitung statt. Daher müssen entsprechende Callback Funktionen angegeben werden, die im Erfolgs- bzw. Fehlerfall aufgerufen werden. Dies geschieht hier am Ende des fetchData-Aufrufs. Wurden die Daten erfolgreich empfangen, werden diese über die Methode customer_Callback an das Steuerelement übergeben.
Die Daten werden über den eingerichteten ADO.NET Data Service-Endpoint angefordert und an das DataView gebunden. Listing 3 zeigt die dafür erforderlichen Methoden. Die Datenanforderung wird im Pageload-Ereignis abgesetzt. Dazu wird eine Instanz eines AdoNetDataContext erzeugt. Diese Klasse ist speziell für die Interaktion mit einem ADO.NET Data Service basierten Endpoint optimiert. Um die Daten anzufordern wird die Methode fetchData aufgerufen. Der erste Parameter der fetchData-Methode spezifiziert die Operation, die auf der Service Seite auszuführen ist, um die Daten abzurufen. Da es sich bei dem ADO.NET Data Service um einen REST-Dienst handelt, muss hier einfach der Pfad zu den Daten angegeben werden. In diesem Beispiel sollen die Kunden Entitäten (Customer Entities) der Northwind-Datenbank geladen werden. Aus der Angabe "Customer" ergibt sich daher folgende URI http://[local]//NorthwindData.svc/Customers.
Im zweiten Parameter können dem Aufruf zusätzliche Parameter übergeben werden. Hier soll die Anzahl der max. zurückzugebenden Datensätze auf 10 beschränkt werden. Dies geschieht durch den Parameter "$top:10". Die vollständige URI lautet somit http://[local]//NorthwindData.svc/Customers?$top=10. Der dritte Parameter legt das http-Verb fest. Da hier Daten geladen werden sollen, ist das Verb get zu verwenden.
Wie bei AJAX üblich findet eine asynchrone Verarbeitung statt. Daher müssen entsprechende Callback Funktionen angegeben werden, die im Erfolgs- bzw. Fehlerfall aufgerufen werden. Dies geschieht hier am Ende des fetchData-Aufrufs. Wurden die Daten erfolgreich empfangen, werden diese über die Methode customer_Callback an das Steuerelement übergeben.
Um die Daten auch bearbeiten zu können, werden diese in eine Detailanzeige geladen. Dazu wird ein weiteres DataView Template - wie es in Listing 3 zu sehen ist - angelegt. Da die Daten bereits in der Übersicht geladen wurden, wird der aktuell selektierte Eintrag an das neue DataView gebunden. Dies erfolgt im Ausdruck:
dv:data="{binding selectedData, source=$dgNorthwind }"
Da die Daten innerhalb des Detail DataView editierbar sein sollen, erfolgt die Datenbindung im Two-Way Live Binding-Modus. Die Attribute, bei denen eine Datenbindung stattfinden soll, müssen auf den JavaScript Namensraum Sys verweisen. Im Beispiel ist dies anhand der Attribute value der HTML Input-Elemente erkennbar (Abbildung 2).
dv:data="{binding selectedData, source=$dgNorthwind }"
Da die Daten innerhalb des Detail DataView editierbar sein sollen, erfolgt die Datenbindung im Two-Way Live Binding-Modus. Die Attribute, bei denen eine Datenbindung stattfinden soll, müssen auf den JavaScript Namensraum Sys verweisen. Im Beispiel ist dies anhand der Attribute value der HTML Input-Elemente erkennbar (Abbildung 2).
Abbildung 2: Ajax ADO.NET Dataservices
Dieser Artikel hat nur einen kleinen Einblick in die Möglichkeiten von ASP.NET Ajax gegeben. Die Bibliothek beinhaltet noch weitaus mehr Funktionen, die es sich lohnt zu erkunden.
Das hier vorgestellt Beispiel kann unter der URL http://northwind-online548.aspnet4.de/Customers.html aufgerufen und getestet werden.
Links
[1] ASP.NET Ajax Library Beta: http://ajax.codeplex.com/
[2] Online Beispiel: http://northwind-online548.aspnet4.de/Customers.htm
public class NorthwindData : DataService
{
public static void InitializeService(DataServiceConfiguration config)
{
config.SetEntitySetAccessRule("*", EntitySetRights.AllRead);
config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;
}
}
Listing 1: Die generische Klasse DataService
Das hier vorgestellt Beispiel kann unter der URL http://northwind-online548.aspnet4.de/Customers.html aufgerufen und getestet werden.
Links
[1] ASP.NET Ajax Library Beta: http://ajax.codeplex.com/
[2] Online Beispiel: http://northwind-online548.aspnet4.de/Customers.htm
public class NorthwindData : DataService
{
public static void InitializeService(DataServiceConfiguration config)
{
config.SetEntitySetAccessRule("*", EntitySetRights.AllRead);
config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;
}
}
Listing 1: Die generische Klasse DataService
! TABELLE !
...
Listing 2: Template mit Datenbindung
function pageLoad(sender, e) {
Sys.Application.activateElement(document.documentElement);
northwindService = $create(
Sys.Data.AdoNetDataContext,
{
serviceUri: "/NorthwindData.svc"
});
northwindService.fetchData("Customers", { $top:10 }, Sys.Data.MergeOption.appendOnly, "GET",
customers_Callback, error_Callback);
}
Listing 3: Datenbindung im Pageload-Event
Peter Monadiemi
