ASP.NET onder de motorkap: Ben jij al AJAX supporter?

Door Michiel van Otegem
30 juni 2009

Ik woon in de buurt van Amsterdam en dat betekent wel haast automatisch dat Ajax mijn club is. Helaas heb ik de laatste jaren weinig reden om daar trots op te zijn. Toch ben ik een echte AJAX supporter, hoewel ik eerlijk moet zijn dat ik het dan niet echt meer over voetbal heb, maar over Asynchronous JavaScript And XML.

Als je als ASP.NET ontwikkelaar nog niet naar AJAX hebt gekeken, dan wordt het hoog tijd dat je dat gaat doen. AJAX maakt de gebruikerservaring rijker en maakt het programmeren (vaak) makkelijker. Vooral als je gebruik maakt van alles wat er al op het web te vinden is om met AJAX te werken en dan met name van de ASP.NET AJAX Control Toolkit, waarvan in mei versie 3 uitgekomen is. De Control Toolkit is een open source project dat vanuit Microsoft gedreven wordt, maar waar in principe iedereen aan kan bijdragen of zelf aanpassingen kan doen. Je kunt de Control Toolkit in actie zien op ASP.NET AJAX Control Toolkit tutorials en video’s vinden. Omdat de Control Toolkit open source is, kun je inspiratie opdoen voor je eigen controls en zien hoe je volgens best practices AJAX kunt gebruiken. En die best practices zijn nodig, want je kunt AJAX op allerlei manieren misbruiken.

Hoe het niet moet

ASP.NET AJAX bestaat eigenlijk uit een aantal onderdelen. Het belangrijkste onderdeel is een JavaScript bibliotheek die het veel eenvoudiger maakt om bepaalde functionaliteit te verzorgen in de browser en waarmee je web services kunt aanroepen op de server. Daarnaast is er een server deel voor het aanbieden van web services als onderdeel van een pagina en de UpdatePanel control. Die laatste lijkt heel handig. Je kunt namelijk op een pagina regionen aanmaken die zich los van de rest van de pagina kunnen verversen. Voor eenvoudige scenario’s waarbij bandbreedte en responstijd allemaal niet zo belangrijk zijn, is dit nog best handig, want je kunt er snel resultaat mee bereiken. Ook is het erg handig voor prototypes en demo’s, want man wat loopt dat lekker op een lokale machine! De koude douche komt als je complexe pagina’s met de UpdatePanel control hebt gemaakt en deze “in het wild” gaat gebruiken. Dan blijkt het toch allemaal niet zo lekker te lopen, want de UpdatePanel control is eigenlijk een heel dom ding. Wanneer een UpdatePanel ververst moet worden, wordt een volledige PostBack gedaan. Op de server wordt dan ook de volledige pagina uitgevoerd alsof er sprake is van een PostBack. Daarna kijkt ASP.NET AJAX welke stukken van de pagina daadwerkelijk veranderd zijn en stuurt dat terug naar de browser, die daar de UpdatePanel control(s) bijwerkt. Heel vernuftig, maar een totaal verkeerde benadering, want dit betekent enorm veel overhead in het netwerkverkeer en onnodige belasting van de server.

Hoe het wel moet

Het grote voordeel van AJAX is dat je web services aan kunt roepen die op de server draaien en dat je het resultaat daarvan in de browser kunt verwerken. Wil je bijvoorbeeld een DropDownList vullen met gegevens aan de hand van de keuze uit een andere DropDownList, dan kun je de betreffende gegevens ophalen met een webservice en dan met wat JavaScript de DropDownList vullen. Dit werkt sneller en efficiënter dan een UpdatePanel waarin je de DropDownList zet die je wilt aanpassen. Ten eerste doe je geen volledige postback, maar gaan alleen die gegevens over de lijn die daadwerkelijk nodig zijn. Ten tweede is de code om de DropDownList te vullen waarschijnlijk efficiënter. En ten derde kun je voor de verwerking van de data gebruik maken van de kracht van de client computer. Het is natuurlijk wel wat meer werk om het zelf te doen, maar de voordelen maken het de moeite waard. Overigens hoef je voor dit voorbeeld niets zelf te doen, want de CascadingDropDown uit de Control Toolkit is specifiek gemaakt voor dit scenario.

Quick wins

Zonder dat je al erg diep in de technologie hoeft te duiken biedt de Control Toolkit een aantal controls die je heel snel kunt gebruiken en die al enorme voordelen bieden. De eerder genoemde CascadingDropDown is daar een voorbeeld van, maar nog makkelijker en sneller zijn de verschillende “control extenders” waarmee je bestaande controls uit kunt breiden om bepaalde dingen te doen. De PasswordStrength control extender bijvoorbeeld kun je een TextBox uitbreiden om de sterkte van een wachtwoord te controleren. Dit kan visueel op verschillende manieren. De FilteredTextBox en MaskedEdit kun je aan een TextBox koppelen zodat gebruikers alleen bepaalde karakters of een bepaald patroon (bijvoorbeeld een telefoon) in kunnen voeren. In tegenstelling tot de ASP.NET validator controls, gaat dit pro-actief aangezien de gebruiker geen ongeldige invoer kan geven. Met een validator control kan dat wel, maar blokkeert de validator de PostBack. Vanaf versie 3.0 die in mei verschenen is bevat de Control Toolkit ook een HTMLEditor control die je zou kunnen gebruiken als standaard in plaats van een van de commerciële controls die hiervoor beschikbaar zijn in de markt. Kortom, je doet er goed aan om snel eens te kijken naar de Control Toolkit en er je voordeel mee te doen. Op naar snellere en intuïtieve webinterfaces!

Dit artikel is eerder verschenen op de website van SDN