AJAX.NET Inleiding
1. Inleiding
2. Installaties
3. Aan de slag
4. Een uitgebreider voorbeeld
5. Besluit
1. Inleiding
ASP.NET AJAX is een uitbreiding op het Microsoft .NET Framework 2.0. Voor zij die het (nog) niet
weten: AJAX staat voor Asynchronous JavaScript And XML. AJAX is een verzameling van reeds bestaande
technieken en is een manier om interactieve websites te maken. De bedoeling, of toch een van de, is
ervoor zorgen dat de interactiviteit vergroot mede door asynchroon opgevraagde gegevens weer te geven.
Dit wil zeggen dat het ophalen op de achtergrond gebeurt en dat een webpagina dus niet herladen
hoeft te worden bij een request van de client.
Hier is een lijst van technieken die in AJAX verwerkt zitten:
- XHTML en CSS
- DOM model (Document Object Model)
- XML en XSLT (Extensible Stylesheet Language Transformations) of JSON (JavaScript Object Notation)
- XMLHttpRequest object (voor het asynchroon ophalen van gegevens)
- JavaScript (om dit alles te combineren)
top
2. Installaties
Voor je kan beginnen zijn er enkele zaken nodig die je moet installeren:
- ASP.NET AJAX Extensions 1.0 (De uitbreiding op het .NET Framework)
- ASP.NET AJAX Control Toolkit (Pakket van componenten die je kan gebruiken)
- Visual Studio 2005 / Visual Web Developer (Je hebt VS of VWD nodig om AJAX-compatibele websites te maken
De Visual Web Developer kan je hier downloaden.
Het installeren wijst zichzelf uit.
De eerste twee downloads kan je hier vinden.
Je moet eerst de Extensions installeren. Dit is een installatie zoals je er al honderden hebt gedaan.
Als dit gedaan is unzip je de zipfile "AjaxControlToolkit" naar de C-schijf, zodat dit de locatie wordt:
C:AjaxControlToolkit.
Je kan deze map plaatsen waar je wil maar zo is ze eenvoudig en snel terug te vinden.
top
3. Aan de slag
Na de theorie is het tijd voor de praktijk. Je opent de Visual Web Developer en maakt een nieuwe website.
File -> New -> New Website. Er verschijnt een kader waarin je verschillende soorten websites kan kiezen.
Je kiest hier voor "ASP.NET AJAX-Enabled Web Site". Daarna geef je de locatie in waar de map voor het
project moet worden gecreëerd (File System), als taal kies je voor C#. Wanneer je klaar bent klik je op "OK".
Er wordt een directory aangemaakt op de geselecteerde locatie met een aantal standaard bestanden in:
- De map "App_Data" (standaard .NET map voor bijvoorbeeld een database)
- Default.aspx met de daarbijbehorende codefile Default.aspx.cs
- Web.config (een XML bestand met instellingen voor AJAX)
Open de Default.aspx en je ziet dat er reeds een klein stukje code staat:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
</div>
</form>
</body>
</html>
We gaan een scriptje maken waarbij er iets in een tekstvak ingevoerd wordt en dan in een label weergegeven wordt, zonder
de pagina te moeten herladen. Heel eenvoudig, maar in het begin hoort dit.
Terug naar het script.
Een belangrijk stukje dat er staat is de ScriptManager:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
Je hebt een ScriptManager nodig om ervoor te zorgen dat je AJAX kan gebruiken op je webpagina's. Deze component zorgt
ervoor dat het script "geregistreerd" staat om AJAX te gebruiken en het zorgt voor de client-side functionaliteit van
de AJAX - library, waardoor onder andere pagina's niet herladen hoeven te worden bij een request.
Verwijder de <div></div> en plaats onder de ScriptManager een TextBox:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:TextBox ID="tb_invoer" runat="server" />
</form>
Allemaal niet zo verbazend moeiljk, maar nu komt er een nieuw belangrijk stukje
bij. We moeten het label "updaten" als er op de
knop word geklikt. De resuest door het klikken op de knop en de waarde in het label
plaatsen moet gebeuren via AJAX.
Daarom plaatsen we een Button en een Label in een UpdatePanel. Alles wat in dit
panel zit wordt via AJAX geupdate.
Het volgende stukje code komt onder de TextBox:
<asp:UpdatePanel ID="panel_een" runat="server">
<ContentTemplate>
<asp:Button ID="knop_een" runat="server" Text="Klik" OnClick="knop_Click" />
<br />
<asp:Label ID="label_een" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
Bij de knop zie je OnClick="knop_Click" staan, dit is het event dat we aanroepen
wanneer er op de knop wordt geklikt.
Het formulier moet er in z'n geheel nu zo uit zien:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:TextBox ID="tb_invoer" runat="server" />
<asp:UpdatePanel ID="panel_een" runat="server">
<ContentTemplate>
<asp:Button ID="knop_een" runat="server" Text="Klik" OnClick="knop_Click" />
<br />
<asp:Label ID="label_een" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Nu het formulier klaar is, is het tijd voor de code, open hiervoor de Default.aspx.cs.
Zo moet het scriptje er uit zien:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
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 UpdatePanel : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void knop_Click(object sender, EventArgs e)
{
label_een.Text = tb_invoer.Text;
}
}
Veel uitleg is hier niet bij nodig. De "using ..." zijn standaard libraries die
worden gebruikt voor eenvoudige webpagina's.
Je hebt het Page_Load event, hier zetten we niets omdat er niets speciaals moet
gebeuren bij het laden van de pagina.
Wat we wel gebruiken is het event "knop_Click": In dit event zetten we simpelweg
de tekst van het label op hetgeen is ingevoerd in het tekstvak.
Je kan nu gaan debuggen door op F5 te klikken of via het menu: Debug -> Start
Debugging. Er wordt je dan gevraagd om een nieuwe Web.config
aan te maken of om het "programma" te runnen zonder debuggen. Je kiest best voor
het eerste, er wordt dan een Web.config gemaakt die
reeds alle instellingen voor AJAX en debuggen bevat. De pagina zal in de standaardwebbrowser
worden geopend en je zal je eerste
mini - ASP.NET AJAX - website kunnen testen.
top
4. Een uitgebreider voorbeeld
Hier ben ik momenteel nog mee bezig, het wordt een web-applicatie waar je door middel van
AJAX gegevens toevoegt/verwijdert/wijzigt/ophaalt vanuit een DataGrid. Dit komt er zeker en vast
binnenkort aan, maar hopelijk zijn jullie hier al iets mee.
top
5. Besluit
ASP.NET AJAX is een meer dan leuke uitbreiding op het .NET Framework en zorgt voor meer mogelijkheden.
Voordat dit er was kon je AJAX niet gebruiken in samenwerking met ASP.NET aangezien JavaScript en ASP.NET
niet de beste vrienden zijn.
Ik hoop in ieder geval dat het een interessante tutorial was en dat jullie er iets aan hebben gehad!
In geval van vragen/commentaar/opmerkingen: stuur me een PM of post een reactie.
top
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
(4.5) 