Jeg har tidligere vist hvordan man kan skrue et simpelt klientside databindings framework sammen med JavaScript og jQuery. Her vil jeg vise hvordan jeg bruger det til løsningen af simple som i komplekse opgaver.

Scenarie: Visning af data i en tabel

Jeg starter med at hente de data jeg skal bruge. Her foretrækker jeg at modtage data der er serialiceret som JSON, men Xml kunne lige så godt have været brugt. Oftest bruger jeg en Controller, der sættes til at returnerer et ActionResult af typen: JsonResult. Det har vist sig at være den nemmeste måde, og den understøttes direkte i MVC frameworket. En typisk implementering:

public ActionResult GetAppointments(int userid, DateTime date)
{
     var result = new JsonResult();
     result.Data = model.GetAppointments(userid, date);
     return result;
}

Andet skal der ikke til for at returnerer data i et kompakt og hurtigt format. Ovenstående kontroler vil give et resultat af formen:

[
{uid: "12-aa-234", time: "9:00", subject: "Morgenmad", description: "Fælles spisning i kantinen" },
{uid: "12-aa-235", time: "12:30", subject: "Frokost", description: "Fælles spisning i kantinen" },
{uid: "12-aa-236", time: "13:45", subject: "Sprint planning I", description: "Vi skal have planlagt næste måneds sprint\nProductowner: Henning" }
];

Vi kan altså i vores JavaScript kode, kalde kontrolleren, og få data retur. Det gøres nemt med jQuery:

$.getJSON(
    "/Schedule/GetAppointments", 
    {userid: "JJ", date: new Date()},
    onDataRecieved
);

Læg mærke til at man i metodekaldet kan angive en callback funktion, der skal udføres, når data kommer retur. Metoden kan have to parametre;  data og status. Data er det Json objekt der returneres fra servicen, og status er en streng der blandt andet kan have værdien “success” og “failed”, alt efter hvordan kaldet forløb, men går alt godt, har man nu det dataobjekt, der blev genereret på serveren, som parameter i callbackmetoden. Vi kan nu tage skridt til at vise data.

Her er det min databind extension kommer ind i billedet. Jeg starter med at lave Html til visningen:

<table id="myGrid">
    <tr>
        <td><a href="/Schedule/Detail/{uid}" title="{description}">{time}</a></td>
        <td>{subject}</td>
    </tr>
</table>

Læg mærke til “tuborg”-klamme syntaksen. Det er databindingssyntaksen for mit lille framework, og vi kan nu kalde extensionen via jQuery:

function onDataRecieved(data) {
    $("#myGrid tr").databind(data);
}

Voilla – vi viser data i tabel-html’en. Læg mærke til at metoden tager udgangspunkt i det element som jQuery selectoren rammer. Havde jeg brugt: $("#myGrid"), var det hele tabellen der var blevet gentaget for hver record. I det jeg rammer TR, fungerer den dynamiske tabel.

Code on…