Het is je vast niet ontgaan dat Microsoft druk bezig is met de volgende versie van .NET en Visual Studio. Op het moment dat dit SDN-Magazine op de mat ligt zou het best kunnen zijn dat Beta 2 al beschikbaar is. Op 25 september is de Nederlandse community getrakteerd op een voorproefje van Beta 2 door niemand minder dan Scott Guthrie, de bedenker van ASP.NET, die te gast was bij dotNED.
Scott Guthrie is tegenwoordig Corporate Vice President is bij Microsoft en dan ben je als ontwikkelaar snel geneigd om te denken ”Oh, weer zo’n manager die mooie praatjes houdt over hoe geweldig product X nu weer is.” Hoewel Scott Guthrie zeker enthousiast vertelt over de nieuwe features van .NET 4.0 en Visual Studio, is hij zeker niet iemand die mooie praatjes houdt. Hij laat het zelf zien, met demo’s die hij zelf gemaakt heeft. Scott is daarmee niet een of andere bobo die de demo’s overlaat aan een “code monkey”. Om het maar in goed Nederlands te zeggen: “He talks the talk AND walks the walk”.
Als je er zelf niet bij was, vraag je je inmiddels wellicht af wat “God” Guthrie dan zoal heeft laten zien de 25e september. Teveel om hier allemaal de revue te laten passeren, want hij was een uur of 4 aan het woord en daarvan was hij alleen al 5 minuten bezig met de slides van dingen die hij niet ging behandelen (waaronder C#- en VB-taaluitbreidingen, Parallel Extensions, Silverlight, WPF en nog een aantal hele interessante dingen).
Als je de verbeteringen aan Visual Studio buiten beschouwing laat, ging het grootste gedeelte van zijn sessie over ASP.NET en dan vooral over dat wat zich in de browser afspeelt, terwijl ASP.NET toch bij uitstek een server gebaseerde technologie is. Microsoft heeft echter begrepen dat de de slag om het internet zich niet meer afspeelt rond de mogelijkheden van de servertechnologie, maar verplaatst is naar dat wat je in de browser kunt doen en hoe goed je standaarden kunt ondersteunen. Het beste voorbeeld hiervan is een nieuwe feature van ASP.NET AJAX die Client Template Rendering (CTR) genoemd wordt. Met CTR kun je een HTML-sjabloon definiëren dat in de browser voorzien wordt van data. Eigenlijk is dit net als een ListView-control die je aan een gegevensbron koppelt, maar dan gebeurt de DataBinding in de browser. Aanpassingen op bijvoorbeeld de sortering zijn daardoor vrijwel onmiddellijk, omdat er geen request naar de server hoeft te gaan voor andere data. Wanneer je CTR toepast op lijstdata, dan doe je dit met de zogenaamde DataView-control.
Fig. 1: Master-Detail met Client Template Rendering
Het vreemde voor “old school” ASP.NET ontwikkelaars is dat dit geen server control is, maar een client control. Je kunt deze simpelweg koppelen aan ieder JavaScript array, ongeacht of je die statisch definieert, programmatisch opbouwt of ophaalt met een webservice-aanroep.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
.sys-template { display:none; }
.selecteditem { color: Red }
</style>
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/beta/0909/
MicrosoftAjax.debug.js">
</script>
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/beta/0909/
MicrosoftAjaxTemplates.debug.js">
</script>
<script type="text/javascript"
src="ContactsService.svc/jsdebug">
</script>
</head>
<body xmlns:sys="javascript:Sys"
xmlns:dataview="javascript:Sys.UI.DataView"
sys:activate="*">
<div>
<ul id="nameListView" sys:attach="dataview"
class="sys-template"
dataview:dataprovider="ContactsService.svc"
dataview:fetchoperation="GetContacts"
dataview:autofetch="true"
dataview:selecteditemclass="selecteditem"
dataview:initialselectedindex="0"
dataview:sys-key="master">
<li sys:command="select">{{ Firstname }}</li>
</ul>
<div id="detailView" class="sys-template"
sys:attach="dataview"
dataview:data="{binding selectedData, source=master}">
<div>Voornaam:
<strong>{binding Firstname}</strong>
</div>
<div>Achternaam:
<strong>{binding Lastname}</strong>
</div>
</div>
</div>
</body>
</html>
Als je wilt kun je de DataView control ook direct, declaratief koppelen aan een webservice en kun je zonder een regel code Master-Detail schermen maken zoals in figuur 1. De HTML die nodig is voor figuur 1 vind je hierboven. Merk op dat hier geen ASP.NET code in zit … het is dan ook een gewone HTML-pagina, maar wel met het een en ander aan referenties naar ASP.NET AJAX-scripts en naar een webservice!
Vind je dit zo cool dat je er nu al mee aan de slag wilt? Op http://ajax.codeplex.com/ kun je de meest recente release en voorbeelden downloaden. Veel plezier!