Geneste weergave | Lineaire weergave

Elco · 25-08-2007 10:46:26

Een inleiding in ASP.Net AJAX
Iedereen weet nu wellicht wel al wat AJAX is. Vaak houdt dit een gegoochel in met termen als xmlhttprequest, document.getElementByID, ... en nog vele meer. Of men maakt gebruik van een library die een abstractie geeft van dit alles. Het kan ook anders!
In deze tutorial laat ik de geÃƒÂ¯nteresseerden zien hoe je eenvoudig je in je ASP.Net website gebruik kan maken van de AJAX technologie zonder dat je al te veel zelf moet gaan bricoleren.
(Let wel: persoonlijk vind ik dat bricoleren juist ook ÃƒÂ©ÃƒÂ©n van de charmes van programmeren en ik blijf dat ook nog altijd doen

) Het is niet een technisch diepgaande bespreking van wat er op de achtergrond allemaal gebeurd maar meer een introductie zodat jullie weten wat mogelijk is om AJAX te gebruiken in ASP.Net. (Of om eventueel zelf gebruik te maken van hoe het gebeurd, de code voor de AJAX extentie is namelijk opensource!)

Om te beginnen
Je moet natuurlijk ÃƒÂ©ÃƒÂ©n en ander geÃƒÂ¯nstalleerd hebben op je pc om een ASP.Net site te kunnen bouwen:
- .Net framework: liefst versie 2.0 of hoger.
- Visual Studio 2005 of Visual Studio Web Developer 2005 Express Edition. Dit is de ontwikkelomgeving waarin de site wordt gebouwd. Dit is volledig gratis en legaal te downloaden vanaf deze site:
http://msdn2.microsoft.com/en-us/express/aa700797.aspx
- De AJAX-extentie. Ook deze is volledig gratis (zelfs met sourcecode) terug te vinden op deze site:
http://www.asp.net/ajax/downloads/
Kies hier voor Ã¢â‚¬Å“Download ASP.NET Extensions v1.0Ã¢â‚¬? en installeer deze nadat je de ontwikkelomgeving hebt geÃƒÂ¯nstalleerd

Een ASP.Net AJAX project aanmaken
Nu we alles in gereedheid gebracht hebben om AJAX-websites te maken kunnen we eindelijk aan de slag!

Gooi nu die Visual Studio Web Developer Express Edition open en kies voor het maken van een nieuw project. Nu krijg je het volgende scherm te zien:

Daar zie je staan Ã¢â‚¬Å“AJAX Enabled Web SiteÃ¢â‚¬?: die moet je hebben. Kies de locatie waar je het project wil opslaan en klik OK.
Nu heb je een eerste ASP.Net AJAX project aangemaakt!

De AJAX pagina
Allemaal mooi en wel zul je zeggen, maar ik zie weinig verschil met een gewone ASP.Net pagina. Inderdaad! Dat is ook het mooie aan ASP.Net AJAX

Je krijgt heel wat functionaliteit waarvoor je zelf zo goed als niets moet doen.
Als je goed kijkt zie je in de toolbar volgende nieuwe controls staan:

Wat je wel ziet in je lege pagina is dit:

Dat is de scriptmanager. Deze is nodig voor elke pagina waar je AJAX wil gebruiken. Hier heb je weinig last mee: je moet die gewoon op je pagina staan hebben, meer niet. Op de achtergrond houdt die bij welke scripts er allemaal bestaan om je AJAX-pagina te besturen, maar voor de meest standaard gevallen moet je hier zelf geen contact mee opnemen.

Nu kunnen we beginnen met het opvullen van de site. Stel dat we een rekenmachine willen bouwen, die het resultaat van de som van 2 textveld-waarden in een derde plaatst. Normaal gezien doen we dit in ASP.Net:

Met in de code-behind de volgende code:

Code:

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page 

{

    protected void Page_Load(object sender, EventArgs e)

    {

    }

    protected void Button1_Click(object sender, EventArgs e)

    {

        int getal1=0, getal2=0;

        bool valid = true;

        try

        {

            getal1 = int.Parse(TextBox1.Text);

            getal2=int.Parse(TextBox2.Text);

        }

        catch (Exception) { valid = false;  }

        TextBox3.Text = valid ? (getal1 + getal2).ToString() : "Ongeldige input";

    }

}

Je kan nu al eens proberen om de pagina uit te voeren.
Je ziet nu de pagina als volgt:

Maar de oplettende tutoriallezer en uitvoerder merkt onmiddellijk dat er wel een page reload plaatsvond! Inderdaad, het is niet genoeg een ASP.Net AJAX project te hebben en een ScriptManager. Je moet ook nog zelf iets doen natuurlijk!

Om aan te duiden welke gebieden op de pagina moeten herladen worden zonder een page reload moet je gebruik maken van een UpdatePanel. Dit kan je gewoon slepen vanuit je toolbar (zie ook de screenshot van de AJAX controls in de toolbar) Alles wat in een updatePanel staat zal gebruik maken van AJAX om z'n events af te handelen.
Nu we dit op de pagina staan hebben rest ons nog 1 ding: knip de controls van het kleine rekenmachine en plak deze in het updatePanel! Dat ziet er dan ongeveer zo uit:

En voila, run de pagina nogmaals en aanschouw het wonder.

Tips
Je kan nog veel meer doen met AJAX controls in ASP.Net. Meer nog: er is een hele opensource-community die een toolkit heeft uitgebracht met heel mooie AJAX controls. Voor een demonstratie van deze controls kan je hier terecht: http://www.asp.net/ajax/control-toolkit/live/ Deze is zeker de moeite waard om eens te bekijken!!
De download van die controltoolkit vind je hier: http://www.codeplex.com/AtlasControlTool...aseId=4923
Eventueel kan ik over enkele van deze controls ook nog een tutorial maken bij genoeg interesse.

Wat je nu bijvoorbeeld zou kunnen beslissen is om je hele pagina in de updatePanel te plaatsen. Doe dit niet! Op die manier herlaad je nog steeds de hele pagina! Je ziet wel geen page reload, maar als je alle inhoud van de pagina opnieuw laadt komt dat op hetzelfde neer. Kies nauwkeurig welke gebieden/controls van de pagina met AJAX moeten gaan werken. Je kan ook gewoon gebruik maken van meerdere updatepanels op je pagina. ASP.Net bepaald dan zelf welke content werd aangepast en welke gegevens opnieuw over de draad moeten gestuurd worden van de server naar de client.

Opmerkingen, aanvullingen en aanpassing zijn uiteraard steeds welkom!
Hopelijk heb je er iets aan gehad en zul je er in de toekomst ook iets mee zijn

Geneste weergave \| Lineaire weergave [ASP.Net TUTORIAL]Inleiding in ASP.Net AJAX
Auteur	Bericht