ASP.NET 4.0 Ajax - Templates

ASP.NET 4.0 Ajax har en ny funktion som kallas templates. Med templates kan du på ett enkelt sätt hämta data och visa på sidan, utan att behöva skapa upp alla element i javascriptet. Först skapar man själva mallen och sedan har man ett element som skall populeras med data och rendera den efter mallens utseende.

Jag kommer att hämta data från en PageMethod och sedan rendera den på sidan i en lista. Datan kommer att vara en List<Customer> där Customer är en klass med tre egenskaper, Name (string), Company (string) samt Age (int?).

Det första som måste göras är att skapa en referens till dels MicrosoftAjaxTemplates.js (jag kommer att använda mig utav den som kom med Preview 2, den som finns för Preview 1 har en annorlunda struktur) samt även till Customer.js där jag har funktionaliteten för att hämta data samt fylla den.

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

   2:      <Scripts>

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

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

   5:      </Scripts>

   6:  </asp:ScriptManager>

Vår page method:

   1:  [WebMethod]

   2:  public static List<Customer> GetCustomers()

   3:  {        

   4:      List<Customer> coll = new List<Customer>();

   5:      coll.Add(new Customer() { Name = "Mikael Söderström", Company = "Strand Interconnect", Age = 23 });

   6:      coll.Add(new Customer() { Name = "Bill Gates", Company = "Microsoft", Age = null });

   7:      return coll;

   8:  }

Koden för Customer-klassen:

   1:  public class Customer

   2:  {

   3:      public string Name { get; set; }

   4:      public string Company { get; set; }

   5:      public int? Age { get; set; }

   6:  }

Koden ovan är ganska självförklarande, så den kommer jag inte att gå igenom utförligt, men det vi gör är iaf att vi i GetCustomers returnerar en List<Customer> med två personer, jag själv och Bill Gates. Jag är 23 år, och Bill Gates har ingen ålder (läs: odödlig).

Det vi ska göra med den här datan är att visa upp den i en enkel ul-lista. För att göra det så skapar vi först upp koden för vår template, vilken kommer att fyllas med data.

   1:  <div id="CustomerTemplate" class="sys-template">

   2:      <ul>

   3:          <li>Namn: {{ Name }}</li>

   4:          <li>Företag: {{ Company }}</li>

   5:          <li>

   6:              Ålder: 

   7:              <!--* if (Age) { *-->

   8:              {{ Age }}

   9:              <!--* } *-->

  10:              <!--* if (!Age) { *-->

  11:              Odödlig

  12:              <!--* } *-->

  13:          </li>

  14:      </ul>

  15:  </div>

Det vi har här är ett div-element som är en container för vår template. Den behöver ett id för att vi skall kunna hämta den från javascriptet, och den bör ha ett klassnamn för att vi skall kunna dölja den. När vi hämtar datan så är det inte det här div-elementet som fylls med datan, utan den är enbart en mall för hur det skall se ut.

När vi hämtar datan så har vi tre fält, Name, Company samt Age och genom att lägga in dessa inom {{ och }} så kan vi specifiera vart vi vill ha dem. Det går även att använda till exempel fältet.format(formatering) för att formatera texten, vilket kan vara bra om det är ett datum som skall visas. I koden ovan har vi även med if-satser för att kunna rendera olika texter baserat på vilket värde som kommer. Då vi har en nullable int för åldern, så skriver vi ut åldern om den har ett värde, annars skriver vi ut “Odödlig”.

När vi har hämtat datan så kommer den som jag har nämnt tidigare, att fyllas på i ett annat element, men med vår template för utséendet. Vi kommer att ha ett tomt div-element för det:

   1:  <div id="CustomerData"></div>

Även detta element behöver ett id för att vi enkelt skall kunna veta vilket element som skall fyllas.

Nästa steg är att skapa javascriptet som skall användas för att hämta datan och skriva ut den på sidan. Här använder vi Sys.UI.Template(element) samt dess metod createInstance(element, data) för att hämta vår template samt skriva ut en Json-sträng till elementet som skall innehålla datan.

   1:  function pageLoad() {

   2:      PageMethods.GetCustomers(LoadCustomers);

   3:  }

   4:   

   5:  function LoadCustomers(args)

   6:  {

   7:      var template = new Sys.UI.Template($get("CustomerTemplate"));

   8:      for (var i = 0; i < args.length; i++)

   9:      {

  10:          template.createInstance($get("CustomerData"),

  11:                  {

  12:                      Name: args[i].Name,

  13:                      Company: args[i].Company,

  14:                      Age: args[i].Age

  15:                  });

  16:      }

  17:  }

I metoden pageLoad() som körs när sidan har laddats så anropar vi vår page method kallad GetCustomers, och när datan är hämtad så körs LoadCustomers som i args-attributet har datan om personerna.

I LoadCustomers så skapar vi först en ny template med parametern satt till CustomerTemplate då det är vår template. Sedan loopar vi igenom alla värden i args då det är en array med alla värden då vi returnerade en List<Customer>. I varje iterering så körs template.createInstance för att fylla på med ny data i data-elementet. För enkelhetens skull så använder jag samma namn i Json-strängen som våra properties heter i datan som hämtas.

När vi nu kör koden så kommer den att vid sidladdningen asynkront hämta datan från vår page method och fylla på i data-elementet. Först skapas en ul-lista med mig, och sedan en med Bill Gates. Då Bill Gates ålder var satt som null så kommer det att stå “Ålder: Odödlig” på honom.

Är det några oklarheter så lämna en kommentar. :-)