Programmeren in ASP.NET/AJAX

Inleiding

De verwerking van een ASP.NET-pagina gebeurt met behulp van postback. Vroeger vereiste elke postback het herladen van de hele pagina. Dit betekent dat het formulier op de pagina naar de server gestuurd moet worden om serverside-events te kunnen verwerken. Dit model is zeker krachtig, maar heeft ook nadelen. Tegenwoordig ondersteunen de meeste browsers clientside-JavaScript en DHTML. Met het AJAX-model wordt op een slimme manier gebruik gemaakt van de mogelijkheden van de browser om een betere ervaring te geven aan de gebruiker. AJAX gebruikt het Document Object Model van JavaScript, het XMLHttpRequest-object, XML en CSS om alleen de inhoud die moet gewijzigd worden te downloaden en te tonen.

Wat is AJAX?

AJAX staat voor Asynchronous JavaScript and XML. AJAX is zeker geen nieuwe technologie. De onderdelen van AJAX (HTML, XML, DOM, XMLHTTP en JavaScript) worden al vele jaren gebruikt. AJAX verwijst naar het gelijktijdig gebruik van deze onderdelen. AJAX-technieken verminderen de round trips naar de server (alleszins voor volledige pagina’s) en maken het mogelijk slechts een deel van een pagina bij te werken. Dit betekent dat volledige verversing van de pagina vermeden wordt. AJAX kan gebruikt worden in scenario’s zoals datanavigatie, gegevensaanpassing, validering van formulieren, automatisch verversen, etc.

Het XMLHttpRequest-object

Dit object is toegevoegd in recente versies van de meeste browsers. Het kan asynchrone communicatie met de server uitvoeren, door XML-gegevens te versturen en te ontvangen zonder een volledige round trip te vereisen.

Wat is ASP.NET AJAX?

ASP.NET AJAX is een nieuwe ASP.NET-technologie die clientscript-library’s toevoegt aan het ASP.NET 2.0-framework. ASP.NET AJAX biedt hetzelfde ontwikkelplatform voor clientside-gebaseerde webpagina’s zoals ASP.NET dat biedt voor serverside-gebaseerde pagina’s. Omdat "ASP.NET Ajax" een extensie is van ASP.NET is het volledig geïntegreerd in server-gebaseerde diensten. Met ASP.NET AJAX kan je grote delen van de verwerking naar de client verplaatsen, en toch de mogelijkheid behouden om op de achtergrond met de server te communiceren. Het resultaat is dat je ASP.NET-pagina’s kan maken met een rijke, snel reagerende gebruikersinterface.

Hoe gebruik je AJAX in ASP.NET 2.0?

Installatie

Download en installeer ASP.NET AJAX: (http://ajax.asp.net). Standaard wordt het geïnstalleerd in de folder c:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.xxxx

Let op: controleer of jouw website-host het Ajax-pakket geïnstalleerd heeft, vooraleer je websites met Ajax begint te ontwikkelen! Anders zullen de applicaties alleen lokaal werken, maar niet online.

Nieuwe website aanmaken

Bij het maken van een nieuwe website kan je in Visual Studio of Visual Web Developer een nieuw sjabloon gebruiken, specifiek voor ASP.NET AJAX.

Klik “New Web Site”, “ASP.NET Ajax Enabled Web Site”, en kies een folder voor de website. Door deze keuze wordt een ganse reeks instellingen opgenomen in web.config. Deze instellingen zorgen ervoor dat de juiste bibliotheken geladen worden voor de website, en dat een aantal instellingen correct werken.

Web.config

<?xml version="1.0"?>
<configuration>
  <configSections>
    <sectionGroup name="microsoft.web" type="Microsoft.Web.Configuration.MicrosoftWebSectionGroup, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
      <sectionGroup name="scripting" type="Microsoft.Web.Configuration.ScriptingSectionGroup, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
        <sectionGroup name="webServices" type="Microsoft.Web.Configuration.ScriptingWebServicesSectionGroup, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
          <section name="jsonSerialization" type="Microsoft.Web.Configuration.ScriptingJsonSerializationSection, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" />
          <section name="profileService" type="Microsoft.Web.Configuration.ScriptingProfileServiceSection, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" />
          <section name="authenticationService" type="Microsoft.Web.Configuration.ScriptingAuthenticationServiceSection, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" />
        </sectionGroup>
      </sectionGroup>
    </sectionGroup>
  </configSections>

  <system.web>
    <pages>
      <controls>
        <add tagPrefix="asp" namespace="Microsoft.Web.UI" assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
        <add tagPrefix="asp" namespace="Microsoft.Web.UI.Controls" assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      </controls>
      <tagMapping>
        <add tagType="System.Web.UI.WebControls.CompareValidator" mappedTagType="Microsoft.Web.UI.Compatibility.CompareValidator, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
        <add tagType="System.Web.UI.WebControls.CustomValidator" mappedTagType="Microsoft.Web.UI.Compatibility.CustomValidator, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
        <add tagType="System.Web.UI.WebControls.RangeValidator" mappedTagType="Microsoft.Web.UI.Compatibility.RangeValidator, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
        <add tagType="System.Web.UI.WebControls.RegularExpressionValidator" mappedTagType="Microsoft.Web.UI.Compatibility.RegularExpressionValidator, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
        <add tagType="System.Web.UI.WebControls.RequiredFieldValidator" mappedTagType="Microsoft.Web.UI.Compatibility.RequiredFieldValidator, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
        <add tagType="System.Web.UI.WebControls.ValidationSummary" mappedTagType="Microsoft.Web.UI.Compatibility.ValidationSummary, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      </tagMapping>
    </pages>
    <compilation debug="false">
      <assemblies>
        <add assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      </assemblies>
    </compilation>

    <httpHandlers>
      <remove verb="*" path="*.asmx"/>
      <add verb="*" path="*.asmx" validate="false" type="Microsoft.Web.Script.Services.ScriptHandlerFactory, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add verb="GET" path="ScriptResource.axd" type="Microsoft.Web.Handlers.ScriptResourceHandler" validate="false"/>
    </httpHandlers>

    <httpModules>
      <add name="WebResourceCompression" type="Microsoft.Web.Handlers.WebResourceCompressionModule, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add name="ScriptModule" type="Microsoft.Web.UI.ScriptModule, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
    </httpModules>
  </system.web>

  <system.webServer>
    <validation validateIntegratedModeConfiguration="false"/>
    <modules>
      <add name="ScriptModule" preCondition="integratedMode" type="Microsoft.Web.UI.ScriptModule, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
    </modules>
    <handlers>
      <remove name="WebServiceHandlerFactory-ISAPI-2.0"/>
      <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode"
           type="Microsoft.Web.Script.Services.ScriptHandlerFactory, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add name="ScriptResource" verb="GET" path="ScriptResource.axd" type="Microsoft.Web.Handlers.ScriptResourceHandler" />
    </handlers>
  </system.webServer>
</configuration>

ScriptManager toevoegen

Maak nu een nieuwe pagina ajax.aspx.

Voeg een ScriptManager-servercontrol toe bovenaan de pagina en stel gedeeltelijke rendering van de pagina in (Partial Page Rendering).

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>

Met gedeeltelijke rendering kan je instellen dat alleen de formuliergegevens van een deel van een pagina terug naar de server gestuurd worden en ververst op de client als er in dat deel gegevens gewijzigd worden (normaal wordt de ganse pagina ververst). Dit is de essentie van AJAX. Hierdoor krijgt de gebruiker een schijnbaar snellere respons en minder flikkering van het scherm. Noteer dat de ScriptManager-control zelf geen zichtbare HTML produceert. Hij zal wel alle nodige scripts aanmaken die nodig zijn voor de andere controls.

UpdatePanel toevoegen

Voeg een UpdatePanel-servercontrol toe en sleep daarin alle controls die afzonderlijk ververst mogen worden. Hiervoor beschikt het UpdatePanel over een ContentTemplate. In het voorbeeld hieronder staan er in het UpdatePanel een knop en een label. Als je op de knop drukt, toont het label na enige tijd de datum en het uur. Merk op dat de pagina als geheel niet ververst wordt!

ajax.aspx

<%@ Page Language="VB" %>

<script runat="server">
    Protected Sub btnActie_Click(sender As Object, e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)  ' wacht even
        lblInfo.Text = DateTime.Now()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>AJAX</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <%= Now() %>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />    
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Button ID="btnActie" runat="server" 
                      OnClick="btnActie_Click" Text="Actie" />
                <asp:Label ID="lblInfo" runat="server" Text=""></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

UpdateProgress

Voeg ook een UpdateProgress-control toe buiten het panel. Stel de property AssociatedUpdatePanelID in op “UpdatePanel1”. Voeg een boodschap toe aan het ProgressTemplate (je kan er ook een image of eender wat in zetten). De inhoud van dit template wordt getoond terwijl het UpdatePanel wacht op postback van de server.

       <asp:UpdateProgress ID="UpdateProgress1" runat="server"
                AssociatedUpdatePanelID="UpdatePanel1">
           <ProgressTemplate>
               Even geduld...
           </ProgressTemplate>
       </asp:UpdateProgress>

De Timer-control

Met de Timer-control kan je ervoor zorgen dat een pagina na een bepaald interval telkens opnieuw ververst wordt.

Maak een nieuwe pagina, voeg een ScriptManager en een UpdatePanel toe. Sleep een Timer-control en een Label in het UpdatePanel. Zet de property Interval van de Timer op 10000. Hierdoor gaat de timer af telkens na 10 seconden.

Voeg nu een eventhandler toe voor het Tick-event van de timer. Toon de tijd in het label.

Bij het bekijken van de pagina merk je dat de tijd om de 10 seconden ververst wordt.

In een productie-site zet je best het interval van de timer niet te laag, omdat hierdoor de server meer belast wordt. Gebruik dit bijvoorbeeld niet om een klok te maken die elke seconde tikt! Zoiets kan je veel beter met JavaScript doen.

UpdatePanel met voorwaardelijke trigger

Soms wil je een deel van de pagina verversen, maar staat de knop (of andere control) waarmee je dit wil doen buiten het UpdatePanel. In dit geval moet je voor die knop een voorwaardelijke trigger aanmaken.

Maak een nieuwe pagina voorwaarde.aspx en voeg opnieuw een ScriptManager en een UpdatePanel toe. Zet er een label in. Voeg buiten het UpdatePanel twee knoppen (btnGewoon en btnAjax) en een tekstvak toe. Maak OnClick-events aan voor de knoppen, en een TextChanged-event voor het tekstvak. Zet bij het tekstvak AutoPostback op True.

    Protected Sub btnGewoon_Click(sender As Object, e As System.EventArgs)
        lblInfo.Text = "Gewoon: " & DateTime.Now()
    End Sub

    Protected Sub btnAjax_Click(sender As Object, e As System.EventArgs)
        lblInfo.Text = "Ajax: " & DateTime.Now()
    End Sub

    Protected Sub TextBox1_TextChanged(sender As Object, e As System.EventArgs)
        lblInfo.Text = "Tekst gewijzigd: " & DateTime.Now()
    End Sub

Selecteer het UpdatePanel, ga naar de property Triggers, en voeg twee (AsyncPostback)triggers toe:

1 voor de knop btnAjax op het event Click
1 voor het tekstvak op het event TextChanged

Start de pagina op. Je merkt dat de Ajax-knop en het tekstvak de inhoud van het UpdatePanel kunnen verversen zonder dat de ganse pagina ververst wordt. De knop “Gewoon” ververst wel de ganse pagina.

voorwaarde.aspx

<%@ Page Language="VB" %>

<script runat="server">
    Protected Sub btnGewoon_Click(sender As Object, e As System.EventArgs)
        lblInfo.Text = "Gewoon: " & DateTime.Now()
    End Sub

    Protected Sub btnAjax_Click(sender As Object, e As System.EventArgs)
        lblInfo.Text = "Ajax: " & DateTime.Now()
    End Sub

    Protected Sub TextBox1_TextChanged(sender As Object, e As System.EventArgs)
        lblInfo.Text = "Tekst gewijzigd: " & DateTime.Now()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>AJAX Voorwaardelijk</title>
</head>
<body>
    <form id="form1" runat="server">
        <%= Now() %><br />
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:Button ID="btnGewoon" runat="server" Text="Gewone postback" 
            OnClick="btnGewoon_Click" />&nbsp;
        <asp:Button ID="btnAjax" runat="server" Text="Ajax-postback" 
            OnClick="btnAjax_Click" />&nbsp;
        <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True" Text="ENTER" 
            OnTextChanged="TextBox1_TextChanged" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="lblInfo" runat="server"></asp:Label>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnAjax" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="TextBox1" EventName="TextChanged" />
            </Triggers>
        </asp:UpdatePanel>
    </form>
</body>
</html>

Control Toolkit

Microsoft stelt ook een Ajax Control Toolkit ter beschikking. Deze bevat een groot aantal nuttige controls die Ajax gebruiken, en die je kan installeren op je toolbox.

In dit boek worden ze niet behandeld, maar je vindt een aantal video’s met uitleg op www.asp.net/learn/ajax-videos.

Besluit

In dit hoofdstuk zag je hoe AJAX je helpt om een snellere respons te krijgen in je pagina’s en hoe je zo mooier werkende pagina’s krijgt. Door AJAX en ASP.NET 2.0 zal de perceptie van de gebruikersinterface veranderen.

← Custom controls

Programmeren in ASP.NET

Viewstate →