Auf CodePlex ist jetzt die erste Preview Version von ASP.NET AJAX 4.0 verfügbar. Ziel ist es einen ersten Eindruck über die kommende Funktionalität zu geben. Die Community hat so die Möglichkeit zu einem frühen Zeitpunkt Feedback an die Produktgruppe zu liefern bevor alles in Stein gemeißelt ist.
Was ist nun drinnen in der Preview?
Client-side template rendering
Es kommt nun eine eigene Template Engine in Form von JavaScript auf den Client. Damit hat man recht einfach die Möglichkeit Layout zu definieren und dynamisch mit Daten zu bestücken. Ähnrlich wie man es aus der Server-basierten ASP.NET Definition her kennt oder auch aus WPF mit den XAML Dokumenten. Natürlich ist es Ziel das ganze XHTML Compliant zu machen und auch möglichst Performant. Nichts ist störender als die Beeinträchtigung von Webseiten weil die CPU zu arg belastet wird. Ich selbst hatte das Problem einmal bei einem Email Provider.Ich konnte mich nicht mehr anmelden, weil die Eingabe der Zeichen durch das Intensive Flash-Geblubber verschluckt wurde.
Ein Template könnte Beispielsweise so aussehen:
1: <div id="myTemplate" class="sys-template">
2: <h3>{{ Title }}</h3>
3: Name: <input type="text" value="{{ FirstName + ' ' + LastName}}" />
4: Date: <input type="text" value="{{ HireDate.format('MM/dd/yyyy') }}"/>
5: <!--* if (BirthDate) { *-->
6: BirthDate: <input type="text" value="{{ BirthDate.format('MM/dd/yyyy') }}"/>
7: <!--* } *-->
8: </div>
Das schöne ist das man diese Templates auch zur Laufzeit erstellen und in das DOM einfügen kann.
Declarative instantiation of behaviors and controls
Um Behaviors und Controls möglichst einfach an HTML Elemente zu binden gibt es nun eine vereinfachte Syntax die durch den Namensbereich sys ermöglicht wird. Um zum Beispiel ein bestimmtes Control an ein Element zu binden deklariert man erst dieses Control.
1: <body xmlns:sys="javascript:Sys" xmlns:myctrl="javascript:Namespace.MeinControl">
Ist es deklariert kann es nun an ein Element gebunden werden und dabei können auch gleich die Eigenschaften mittels des eigens definierten Prefixes angesprochen werden:
1: <div id=”div1” class=”sys-template”>
2: <table sys:attach="myctrl" myctrl:songs="{{ songsData }}">
3: <thead>
4: <tr><td>{{Song}}</td><td>{{Artist}}</td></tr>
5: </thead>
6: </table>
7: </div>
DataView Control
Dank der Templates ist es nun einfach dynamisch generierte HTML Fragmente zu erstellen und auszugeben. Aber um sich noch mehr Arbeit zu sparen, gibt es jetzt auch ein DataView Control das einen Großteil der Arbeit übernimmt. Man kann dem DataView Control auch eigene Templates unterschieben um entsprechend die Daten zu visualisieren.
1: <body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.Preview.UI.DataView">
2: ...
3: <div sys:attach="dataview" dataview:data="{{ someArray }}">
4: <h1>{{ name }}</h1>
5: <p>{{ description }}</p>
6: </div>
Markup Extensions und Bindings
Hand in Hand gehen die nächsten beiden Features. Bindings basiert auf Markup Extensions. Mit Markup Extensions hat man die Möglichkeit eigene Erweiterungen in das System einzufügen. Beispiele solcher Erweiterungen sind Expression und Binding.
Hier ein Beispiel für Binding
1: <input id="name" value="{binding name, mode=twoWay}"/>
Die Syntax {binding name, mode=twoway} ist eine Markup Extension. Eine Markup Extension definiert sich also aus {expression defaultparameter, parameterName1=parameterValue1, parameterName2=parameterValue2 [, …] }
Die Erweiterung Expression kann nur für One-Way Bindings benutzt werden, also lediglich zur Ausgabe von Daten, während Binding Two-Way unterstützt. Das ganze erinnert stark an die WPF Syntax und ist somit einigen Entwicklern bereits geläufig.
Es ist wirklich nur ein früher Wurf um einen Einblick in die Entwicklungsrichtung zu geben. Das nächste Preview ist für den September angekündigt und dürfte auch entsprechend mehr Elemente der ASP.NET AJAX Roadmap enthalten
