ASP.Net Ajax biedt een aantal controls om server-side met Partial PostBacks om te gaan.

Soms is het echter beter om bepaalde acties te laten afhandelen door de browser: als geen connectie met de webserver moet gemaakt worden kunnen we enorme performantiewinst boeken.

ASP.Net Ajax biedt je heel wat mogelijkheden om client-side met controls te interageren.

Aan de kant van de server is het voor de ASP.Net-programmeur evident dat je de verschillende controls op de pagina, zelfs gelegen in een UpdatePanel, kan beïnvloeden.
Door een ScriptManager-control op een ASP.Net pagina te plaatsen, zorg je er voor dat de browser de nodige javascript-code ontvangt om met partiële postbacks te kunnen werken.
Dit betekent dat het ook client-side mogelijk is om de Ajax-controls aan te spreken.

De Microsoft Ajax Client side reference vindt je hier: http://msdn.microsoft.com/en-us/library/bb397536.aspx

Een belangrijke klasse die client-side ter beschikking is, is de klasse Application. Deze klasse kan je vergelijken met de server-side Page-klasse. Client-side wordt deze in de namespace Sys ondergebracht.
We maken een kleine toepassing die enkele functionaliteiten van de klasse Application illustreert.

events

Event	Omschrijving
Sys.Application.init	Uitgevoerd wanneer alle scripts geladen zijn, maar voor een object werd aangemaakt. Dit event wordt één keer uitgevoerd wanneer de pagina opgemaakt wordt, opeenvolgende pagina-updates voeren dit event niet meer uit.
Sys.Application.load	Uitgevoerd wanneer alle scripts geladen zijn, en de objecten gemaakt met $create zijn aangemaakt. Het load-event wordt uitgevoerd voor alle (asynchrone) postbacks naar de server. De functie pageLoad voorziet automatisch in een handler voor dit event. Het load-event ontvangt een eventargs parameter, een Sys.ApplicationLoadEventArgs object. Je kan deze parameter gebruiken om te onderzoeken of de pagina werd vernieuwd door een partiële postback, en welke componenten sindsdien werden aangemaakt.
Sys.Application.unload	Uitgevoerd vooraleer de pagina-objecten vernietigd worden en het window.unload event van de browser plaatheeft. Als ontwikkelaar kan je een functie pageUnload voorzien die dit event afhandelt.
Meer info en events bij MSDN:	http://msdn.microsoft.com/en-us/library/bb386417.aspx

voorbeeld

• Maak een nieuwe Web Form ClientScript.aspx
• Voeg een nieuw JScript item toe: ClientScript.js
• Plaats een ScriptManager op de Web Form
• Voorzie in de ScriptManager een ScriptReference naar ClientScript.js via de eigenschap Scripts, of via code:

  <asp:ScriptManager ID="ScriptManager1" runat="server">
  <Scripts>
     <asp:ScriptReference Path="ClientScript.js" />
  </Scripts>
  </asp:ScriptManager>
  

• Voorzie volgende Javascript-code in ClientScript.js:

  // voor intellisense in deze js-file
  /// <reference name="MicrosoftAjax.js"/>
  // meer info: http://blogs.msdn.com/b/webdevtools/archive/2007/11/06/jscript-intellisense-a-reference-for-the-reference-tag.aspx
  
  var app = Sys.Application;
  app.add_init(appInit);
  
  //Init-event van Application via eigen event-handler methode
  function appInit(sender) {
      alert('Application Init');
  }
  
  //Load-event van Application met gereserveerde methode pageLoad opvangen
  //Kan ook op dezelfde manier als Init, dit is een kortere werkwijze
  function pageLoad(sender, args) {
      alert('Application Load');
  }
  

• Bekijk ClientScript.aspx uit in je browser, beide event-handlers worden uitgevoerd.
• Voorzie in ClientScript.aspx een UpdatePanel met hierin een Label LblTijd en een Button BtnPartialPostBack
• Voorzie buiten het UpdatePanel een Button BtnPostBack
• Voeg volgende code toe in ClientScript.aspx.cs (server-side!):

  protected void Page_Load(object sender, EventArgs e)
  {
      LblTijd.Text = System.DateTime.Now.ToString();
  }
  

• Wanneer je de toepassing uitvoert merk je dat bij een asynchrone postback enkel het load-event wordt uitgevoerd.
• Een volledige postback zorgt voor uitvoering van init- en load-event.

Het client-side PageRequestManager-object geeft je de mogelijkheid gedetaileerd te interageren tijdens partiële postbacks.
Meer info op MSDN

Voorbeeld

• Pas ClientScript.js aan:

  // voor intellisense in deze js-file
  /// <reference name="MicrosoftAjax.js"/>
  // meer info: http://blogs.msdn.com/b/webdevtools/archive/2007/11/06/jscript-intellisense-a-reference-for-the-reference-tag.aspx
  /// <reference name="MicrosoftAjaxWebForms.js" />
  
  var app = Sys.Application;
  app.add_init(appInit);
  
  var pageManager = Sys.WebForms.PageRequestManager.getInstance();
  pageManager.add_beginRequest(beginRequest);
  
  //Load-event van Application met gereserveerde methode pageLoad opvangen
  function pageLoad(sender, args) {
      alert('Application Load');
  }
  
  function appInit(sender) {
      alert('Application Init');
  }
  
  function beginRequest() {
      alert('begin request');
  }
  

• Voer uit in je browser: bij het uitvoeren van een partial postback wordt de handler uitgevoerd.

De ASP.Net Ajax Client bibliotheek bevat een aantal handige hulpfuncties die je met een korte schrijfwijze kan aanspreken. Een ervan is $get. Is een shortcut voor standaard Javascript document.getElementById, en geeft een referentie naar een DOM-element op basis van het ID.

• Voorzie in ClientScript.aspx een divisie met id divBericht:

  <div id="divBericht"></div>
  

• Voorzie in ClientScript.js:

  var berichten = new Array("een eerste melding", "een tweede melding", "een derde melding");
  var berichtnr = 0;
  

• Pas ook de functie pageLoad aan:

  function pageLoad(sender, args) {
      //alert('Application Load');
      $get("divBericht").innerHTML = berichten[berichtnr];
      if (++berichtnr == berichten.length) berichtnr = 0;
  }
  

• Voer de toepassing uit en doe een partial-postback (pageLoad wordt steeds uitgevoerd).

  Let op: soms is het id dat voor een control wordt gegenereerd voor de browser niet hetzelfde als het Id dat je voor de control server-side hebt ingesteld (controls in Masterpages, user-controls, templates...). Dit kan je oplossen door server-side code te voorzien die gebruikt maakt van de property ClientId van de control, dit werkt wat minder gemakkelijk met externe .js-files... (just keep in mind voor het geval dat).

  Meer info: blog van Matt Berseth