Observer Pattern i ASP.NET 4.0 Ajax

Microsoft släppte nyligen Preview 2 av ASP.NET 4.0 Ajax på CodePlex. Denna innehåller en ny funktionalitet kallad “Observer Pattern” och gör det möjligt att på ett enkelt sätt bli notifierad när ett objekt förändras. Jag ska visa ett enkelt exempel där vi genom att skriva i en Textbox vill fånga upp alla ändringar och slänga upp i en alert-ruta.

Det första som behövs är MicrosoftAjaxTemplates.js som följer med i senaste versionen av ASP.NET 4.0 Ajax. Sedan skall vi använda de befintliga javascript-biblioteken som redan finns för den senaste fulla versionen av ASP.NET Ajax, för att få tillgång till de metoder som finns där.

För att skapa en ny observer så skall vi använda Sys.Observer.observe(object), som låter oss lägga till olika typer av observers. V skall sedan lägga till add_propertyChanged(function) på en JSON-sträng som vi skall ha för att lagra värdet som skickas in.

Vi börjar med att lägga in en ScriptManager-kontroll på sidan som först lägger in js-filen med de nya funktionerna, och sedan en js-fil med vår egna javascript-kod, för att vara säker på att allt körs som det ska.

   1:  <asp:ScriptManager runat="server" EnablePageMethods="true">

   2:      <Scripts>

   3:          <asp:ScriptReference Path="~/scripts/MicrosoftAjaxTemplates.js" />

   4:          <asp:ScriptReference Path="~/scripts/AjaxDemo.js" />

   5:      </Scripts>

   6:  </asp:ScriptManager>

   7:   

   8:  <input type="text" id="Textbox" />

I vår egna js-fil så bör det se ut i stil med detta:

   1:  var enteredValue = { value: '' };

   2:   

   3:  function pageLoad() {

   4:      Sys.Observer.observe(enteredValue);

   5:      enteredValue.add_propertyChanged(enteredValueChanged);

   6:      $addHandlers($get('Textbox'), { keyup: textBoxValueChanged });

   7:  }

   8:   

   9:  function enteredValueChanged(sender, args)

  10:  {

  11:      alert(enteredValue.value);

  12:  }

  13:   

  14:  function textBoxValueChanged(e) {

  15:      enteredValue.setValue('value', this.value);

  16:  }

Det vi gör här är att vi först skapar en enkel Json-sträng med ett fält som vi kallar “value”. Sedan har vi en metod kallad pageLoad() (den körs automatiskt genom ASP.NET Ajax när sidan laddas). Nästa funktion, kallad changeHandler(e), är den som körs när vi skriver in något i textrutan som vi har på sidan.

I pageLoad skapas en ny observer där vi pekar den mot enteredValue. Vi lägger sedan till en händelse för enteredValue och som triggas när den ändras. När den gör det så slänger vi upp en alert-ruta med det nya värdet.

För att det öht skall ändras så måste vi fånga alla ändringar av vår textruta. Det kollar vi genom att lägga till en handler för den och som skall köras vid “keyup”. Även denna använder Json för att vi på ett snyggt och smidigt sätt skall kunna lägga till olika typer av händelser på denna.

När vi nu ändrar värde i vår textbox så körs först changeHandler(e) och byter värde på enteredValue till det nya. Sedan körs funktionen i enteredValue.add_propertyChanged(…) och som visar rutan.

Genom att använda observer patterns så kan man på ett väldigt enkelt sätt spåra ändringar i objekt och sedan använda dessa för olika ändamål. Exempel kan vara validering, asynkrona slagningar mot en extern datakälla eller liknande.