Cursus Ajax : Ajax.Net

De technologie uit dit hoofdstuk werkt nog steeds, maar is ondertussen voorbijgestreefd door andere nieuwe ontwikkelingen.
Om nostalgische redenen, en voor de volledigheid van het cursusmateriaal kan dit hoofdstuk nog geraadpleegd worden.

Ajax is gebaseerd op open technologieën zoals HTML, XML en Javascript. Het kwam al een aantal keer ter sprake dat we voor een efficiënt gebruik van Ajax, deze technologie best combineren met een server-side technnologie zoals ASP, PHP, JSP of ASP.NET.

Door gebruik te maken van een server-side techniek kan je de response laten variëren naargelang de gestelde actie door de gebruiker.

Wij focussen ons op het gebruik van Ajax binnen het .Net gebeuren en bekijken hoe we deze krachtige techniek kunnen toepassen in ASP.Net pagina's.

Reeds vanaf .Net 1.1 was het mogelijk om asynchrone gegevenstransfer te combineren met .Net. Je kan hieromtrent veel opzoekingswerk verrichten en proberen om alles handmatig te programmeren. Anderen hebben je dit echter voorgedaan en boekten reeds fantastische resultaten.

Sinds .Net 2.0 heeft Microsoft zelf mogelijkheden toegevoegd om met asynchroon dataverkeer te werken via de zogenaamde Client Callback functionality en het Atlas-project: de Microsoft benaming voor een extra Framework binnen .Net 2.0 met mogelijkheden voor asynchrone datatransfer.

Het gebruik van Ajax binnen het .Net Framework zal ik voortaan Ajax.Net noemen.

Een voorbeeld om Ajax binnen .Net zonder extra hulpklassen uit te voeren vind je bij Codeproject.

Het gebruiken van Ajax.Net werd reeds grondig bestudeerd, zodat her en der op het internet klassenbibliotheken beschikbaar werden. Een veelgebruikte en door Microsoft zelf bewierookte bibliotheek komt van Michael Schwarz. We zullen deze bibliotheek dan ook leren gebruiken in onze eigen toepassingen.

Een eerste Ajax-enabled project aanmaken

Download de klassenbibliotheek voor Ajax.net.
Pak deze klassenbibliotheek uit in een map naar keuze vb. AjaxNet
Open Visual Studio.Net 2005 en maak een nieuwe Website: ajaxnettoep
Leg een referentie naar AjaxPro.2.dll in de map AjaxNet

Voeg volgende informatie toe aan Web.config (laat eventueel eerst het project starten om automatisch een Web.config-file te maken):

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.web>
    <httpHandlers>
      <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
    </httpHandlers>

  [...]

  </system.web>
</configuration>

Voeg een nieuwe Web Form toe: Bericht.aspx
Stel deze pagina in als startpagina
Registreer de klasse Bericht voor Ajax-gebruik:

protected void Page_Load(object sender, EventArgs e)
{
    AjaxPro.Utility.RegisterTypeForAjax(typeof(Bericht));
}

Maak in de klasse Bericht een methode aan voor Ajax-gebruik:

[AjaxPro.AjaxMethod]
public string ToonBericht()
{
    return "Bericht van de server";
}

Voeg een HTML-button toe aan de pagina:

<body>
    <form id="form1" runat="server">
    <div>
    <input id="Button1" type="button" value="button" onclick="toonServerBericht()"/>
    </div>
    </form>
</body>

Voorzie een script-blok op de pagina:

<script type="text/javascript">
function toonServerBericht()
{
    Bericht.ToonBericht(maakAlert);
}

function maakAlert(bericht){
    alert(bericht.value);
}
</script>

Voer het project uit en klik op de knop!

Het eerste project uitgelegd

Registreren van de klasse

protected void Page_Load(object sender, EventArgs e)
{
    AjaxPro.Utility.RegisterTypeForAjax(typeof(Bericht));
}

Deze code geeft Ajax.Net de opdracht om de huidige klasse te onderzoeken op Ajax-vriendelijke methoden. Deze methoden dragen een AjaxMethod-attribuut.

Markeren van een methode

[AjaxPro.AjaxMethod]
public string ToonBericht()
{
    return "Bericht van de server";
}

Elke methode die we voor Ajaxgebruik wensen in te stellen moet het AjaxMethod-attribuut dragen.

Wanneer dit gedaan is moeten we enkel nog de opgegeven klassen en methoden client-side gebruiken in Javascript. Met andere woorden: het Ajax.Net raamwerk zorgt ervoor dat op de client automatisch een objectvariabele ter beschikking is met dezelfde naam als de geregistreerde .Net-klasse! De methoden en eigenschappen uit deze klasse kan je nu zonder meer gebruiken in Javascript.

In ons geval kunnen we dus een Bericht-object aanspreken en hiervan de methode ToonBericht toepassen.

Object binnenhalen

function toonServerBericht()
{
    Bericht.ToonBericht(maakAlert);
}

Concreet roepen we hier voor een Bericht-object de parameterloze functie ToonBericht aan en geven het ontvangen resultaat door aan de functie maakAlert.

Hier zien we het asynchrone karakter van Ajax.Net: pas als het resultaat binnen is zal de functie maakAlert worden uitgevoerd! Ondertussen kan de gebruiker gewoon blijven doorwerken.

Het resultaat gebruiken

function maakAlert(bericht){
    alert(bericht.value);
}

We vangen het resultaat op in de variabele bericht.

Intro

De volgende toepassing is een stuk geavanceerder, maar geeft je een idee hoe Ajax in echte projecten kan worden gebruikt. De echte kracht en efficiëntie van Ajax zal nu pas ten tonele komen.

Voor deze toepassing maken we gebruik van de spionshop-database

We zullen twee DropDownLists op het scherm brengen. De eerst DropDownList bevat de namen van de categorieën uit de tabel categorie van de database.
Maak je een keuze in deze DropDownList, dan verschijnen de artikels uit deze categorie in de tweede lijst. Deze lijst wordt asynchroon gevuld: de items worden opgevraagd uit de database op het ogenblik dat de gebruiker een keuze maakt.

We zullen zorgen voor een gescheiden presentatielaag (Presentation Layer) en datalaag (Data Access Layer).

De Website aanmaken - database installeren - Ajax

Start Visual Studio 2005
Maak een nieuwe Web Site: DropDownLists
Download spionshop.mdf (zip-archief) en plaats deze in de App_Data-map wanneer je werkt met SQL Server 2005 Express
Anders Attach je de database aan SQL Server
Via Server Explorer maak je een connectie met je database
Leg een referentie naar de AjaxPro.2.dll (zie hierboven voor meer info)

Web.config

Voer eventueel eerst je project uit en laat een Web.config file aanmaken
Doe volgende wijzigingen:

<?xml version="1.0"?>
<configuration>
	<appSettings/>
  <connectionStrings>
    <add name="SpionshopData" 
         providerName="System.Data.SqlClient" 
         connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|Spionshop.mdf;Integrated Security=True;Connect Timeout=30;User Instance=True"/>
  </connectionStrings>
	<system.web>
    <httpHandlers>
      <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
    </httpHandlers>

    ...

	</system.web>
</configuration>

De Connectiestring voor de databasetoegang wordt dus vermeld in de Web.config-file in de sectie ConnectionStrings. De aanduiding |DataDirectory| : de datamap van het huidige project. Je zal deze connectiestring moeten aanpassen wanneer je met een andere databaseserver werkt dan SQL 2005 Server Express.

We voegen de Ajax-lijn toe aan Web.config zodat Ajax-request correct worden opgevangen.

De Stored Procedures

Voorzie volgende Stored Procedures in de database.

CREATE PROCEDURE Categorieen
AS
SELECT cat_id, categorie
FROM categorie
ORDER BY categorie

GO
CREATE PROCEDURE ArtikelUitCategorie @CatID smallint
AS
SELECT artikel_id, artikel, omschrijving, verkoopprijs
FROM artikel
WHERE cat_id = @CatID
ORDER BY artikel

DAL: De Data Access Layer

Voeg een nieuwe klasse DAL toe
Laat deze klasse in de App_Code-map plaatsen
Voorzie deze klasse van twee methoden:

...
using System.Data.SqlClient;


public static class DAL
{
    public static DataTable GetCategorie()
    {
        SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["SpionshopData"].ConnectionString);
        SqlCommand myCommand = new SqlCommand("Categorieen", myConnection);
        myCommand.CommandType = CommandType.StoredProcedure;
        myConnection.Open();
        SqlDataReader rdr = myCommand.ExecuteReader(CommandBehavior.CloseConnection);
        DataTable cat = new DataTable();
        cat.Load(rdr);
        return cat;
    }



	public static DataTable GetArtikel(int categoryID) 
    {
        SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["SpionshopData"].ConnectionString);
        SqlCommand myCommand = new SqlCommand("ArtikelUitCategorie", myConnection);
        myCommand.CommandType = CommandType.StoredProcedure;
        SqlParameter parameterCategoryID = new SqlParameter("@CatID", SqlDbType.Int, 4);
        parameterCategoryID.Value = categoryID;
        myCommand.Parameters.Add(parameterCategoryID);
        myConnection.Open();
        SqlDataReader rdr = myCommand.ExecuteReader(CommandBehavior.CloseConnection);
        DataTable dt = new DataTable();
        dt.Load(rdr);
        return dt;
    }

}

De pagina DropDownLists.aspx

Voeg een Web Form DropDownLists.aspx toe aan de Web Site
Plaats hierop twee DropDownLists: DDLcat en DDLart
Pas de CodeBehind DropDownLists.aspx.cs aan:

protected void Page_Load(object sender, EventArgs e)
    {
        AjaxPro.Utility.RegisterTypeForAjax(typeof(DropDownLists));
      
        if (!Page.IsPostBack)
        {
            DDLcat.DataSource = DAL.GetCategorie();
            DDLcat.DataTextField = "categorie";
            DDLcat.DataValueField = "cat_Id";
            DDLcat.DataBind();
            DDLcat.Items.Insert(0, new ListItem("Maak uw keuze...", "0"));
        }
        
    }

    [AjaxPro.AjaxMethod]
    public DataTable GetArtikels(int catid){
        return DAL.GetArtikel(catid);
    }

De lijst met de categorieën DDLcat wordt gevuld wanneer de pagina voor het eerst wordt geladen.

De methode GetArtikels is gemarkeerd als Ajax-methode en haalt de artikels voor een bepaald categorieid op.

Voorzie DDLcat van het attribuut onchange:

<asp:DropDownList ID="DDLcat" runat="server" onchange="LaadArtikels(this)" BackColor="#FFFFC0" Width="200px">
</asp:DropDownList>

Hier zorgen we voor een client-side actie wanneer de selectie in de categorielijst verandert.

Voorzie een koppeling naar een Javascript-bestand shopartikels.js in de HEAD-sectie:

<script type="text/javascript" src="shopartikels.js"></script>

De javascript-functie LaadArtikels plaatsen we in een apart bestand.

Het bestand shopartikels.js

Voeg een nieuw JScript bestand in:

function LaadArtikels(DDLcat)
{
   //kijken welke categorie gekozen is
   var cat_id = DDLcat.options[DDLcat.selectedIndex].value;
   //ajax-request doen
   //wachten op response en resultaat doorgeven aan LaadArtikels_CallBack
   DropDownLists.GetArtikels(cat_id, LaadArtikels_CallBack);
}

//resultaat ajax-request afhandelen
function LaadArtikels_CallBack(response)
{

   //kijken of er een fout is opgetreden
   if (response.error != null)
   {
      //fout tonen
      alert(response.error); 
      return;
   }

   var artikels = response.value;
 
   //kijken of de response iets is wat we verwachten (leeg of een object)  
   if (artikels == null || typeof(artikels) != "object")
   {
      return;
   }
 
   //referentie naar artikellijst
   var DDLart = document.getElementById("DDLart");
   //maak artikellijst leeg
   DDLart.options.length = 0;
   //artikellijst doorlopen
   for (var i = 0; i < artikels.Rows.length; ++i)
   {
      //de kolommen kunnen geadresseerd worden als eigenschappen!
      DDLart.options[DDLart.options.length] = 
         new Option(artikels.Rows[i].artikel, artikels.Rows[i].artikel_id);
   }
}

De functie LaadArtikels detecteerd welke categorie er is gekozen
De Ajax-methode GetArtikels wordt aangeroepen: asynchrone request aan de server voor de artikelsgegevens.
De server-response wordt doorgegeven aan de functie LaadArtikels_CallBack
In de CallBackfunctie wordt eerst gekeken of de transfer gelukt is
De eigenschap value van de response bevat de eigenlijke teruggekeerde informatie: een DataTable
Zoals je merkt doorlopen we daarna in javascript de DataTable alsof het een .Net DataTable is (echter wel length gebruiken om het aantal rijen te tellen!)

DataTable

EventValidation

Voeg in VS.net 2005 nog een knop toe aan de pagina DropDownLists.aspx Als je de toepassing:

<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />

Voer het project uit, kies een categorie en een artikel en druk op de knop
Je krijgt een foutmelding: "Invalid PostBack or Callback argument".
Doordat wij de ASP.net component DDLart client side hebben gewijzigd vertelt .Net je dat de info in de DropDownList niet meer consistent is. Dit kunen we vermijden door geen eventvalidation te vragen:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DropDownLists.aspx.cs" Inherits="DropDownLists" EnableEventValidation="false"%>

ViewState

Wanneer je een artikel kiest, dan zal je merken dat de categoriekeuze bewaard blijft na een PostBack, maar niet de artikelkeuze.

Dit fenomeen heeft natuurlijk zijn oorzaak in het feit dat de artikellijst client-side wordt gevuld, de inhoud is niet bewaard in de ViewState.

Wil je na een PostBack de artikelinfo terugvinden in de lijst, en het juist artikel geslecteerd zien, dan zal je daar wat extra code moeten voor schrijven:

if (!Page.IsPostBack)
{
    DDLcat.DataSource = DAL.GetCategorie();
    DDLcat.DataTextField = "categorie";
    DDLcat.DataValueField = "cat_Id";
    DDLcat.DataBind();
    DDLcat.Items.Insert(0, new ListItem("Maak uw keuze...", "0"));
}

else //er is een PostBack
{
	//Daar DDLart client-side werd aangemaakt, beschikken we server side enkel over de
	//meegestuurde Form-info van het geslecteerde artikel, niet meer over de volledige
	//lijst van artikels
	//Het artikel_id van het geselecteerde artikel kunnen we uit de Form-info halen
    string artid = Request.Form[DDLart.UniqueID];
	
	//We halen de geslecteerde categorie op en zoeken de artikels op uit de DB
    DDLart.DataSource = DAL.GetArtikel((Convert.ToInt32(DDLcat.SelectedValue)));
    DDLart.DataTextField = "Artikel";
    DDLart.DataValueField = "Artikel_id";
    DDLart.DataBind();
	
	//we zoeken het artikel met het artikel_id zoals door de gerbuiker geselecteerd
    DDLart.SelectedIndex =
        DDLart.Items.IndexOf(DDLart.Items.FindByValue(artid));
}

Site	Beschrijving
Ajax.Net	Home van Ajax.Net, het Framewerk van Michael Schwarz
Code-magazine	Uitgebreid artikel, waarin stap voor stap een 3-tier toepassing gebouwd wordt
Codersource.net	Artikel bij codersource.net: basis, dataset, custom object

MSDN	MSDN artikel over Ajax.Net, gebruikt hier en daar achterhaalde technieken
Developerfusion	Artikel basisgebruik bij developerfusion

Ajax: Ajax.Net

Opmerking vooraf

Inleiding

Ajax.Net

Starten met Ajax.Net