In the first part I have showed you how to use jTemplates plugin to build client side repeater. In this part I will show you how to make that work with data from ASP.NET WebService. That can be done in 3 steps:

Step 1 – Call WebService to Get Data

GetForthcomingEvents = function (successFunction) {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "/Services/EventsService.asmx/GetTheForthcomingEvents",
        dataType: "json",
        success: successFunction,
        error: function (result) {
            alert("Due to unexpected errors we were unable to load data");
        }
    });
}

This is standard example of $.ajax() function usage. URL of the WebService is /Services/EventsService.asmx and function’s name is GetForthcomingEvents().

GetForthcomingEvents() function expects another function as a parameter. That function will be invoked, assuming that call to WebService went fine (success: successFunction). In the next step you will see an exemplary implementation. It won’t be a surprise to you – it is the same function which was already presented in the first part.

Step 2 – Bind Data From WebService to jTemplates template

BindDataToEventsTemplate = function (result) {
    // check if jTemplates is loaded
    if (!jQuery.fn.processTemplate) {
        alert("jTemplates is not loaded");
        return;
    }

    // attach and process the template
    $("#Events").setTemplateElement("EventsTemplate");
    $("#Events").processTemplate(result);
}

Data returned from the WebService will be passed here. Next, data will be used to “process template” and this way data will be passed to client side repeater.

Step 3 – Get to all working on document ready

$(document).ready(function () {
    $("#Events").html("Loading events ....");
    GetForthcomingEvents(function (result) {
        if (result.d.length > 0) BindDataToEventsTemplate(result);
    });
});

This is of course not the simplest possible option. I have added one if statement (if (result.d.length > 0)) to check if there are actually some events returned. I didn’t want to “execute” repeater when there are no events to display. But it’s optional step and can be omitted.

jTemplates in action

Here I want just to remind you essential part of the template which will be used to process the data

{#foreach $T.d as record}
<tr>
  <td><a href="{$T.record.WebSite}">{$T.record.Name}</a></td>
  <td><a href="mailto:{$T.record.Organizer.Email}">{$T.record.Organizer.Name}</a></td>
        <td>{$T.record.Venue.Name}</td>
</tr>
{#/for}

For each record a row like that will be created. For more details please check first part of this post.

Bonus – The WebService

Here you can see my dummy code of the WebService

[System.Web.Script.Services.ScriptService]
public class EventsService : System.Web.Services.WebService
{

    [WebMethod]
    public Event[] GetTheForthcomingEvents()
    {
        return new Event[] { GetFirstEvent(), GetSecondEvent() };
    }

    private Event GetFirstEvent()
    {
        return new Event
        {
            StartDate = DateTime.Now,
            EndDate = DateTime.Now,
            Name = "MTS Conference",
            WebSite = "http://microsoft.com",
            Organizer = new Contact
            {
                Email = "john@ms.com",
                JobTitle = "CEO",
                Name = "John White"
            },
            Venue = new Venue
            {
                Address = "Alabama St. 45",
                City = "Washington DC",
                Name = "Medison Square Garden",
                PostCode = "45-233"
            }
        };
    }

    private Event GetSecondEvent()
    {
        return new Event
        {
            StartDate = DateTime.Now,
            EndDate = DateTime.Now,
            Name = "Microsoft TechEd North America",
            WebSite = http://www.microsoft.com/events/techednorthamerica/",
            Organizer = new Contact
            {
                Email = "john@ms.com",
                JobTitle = "CEO",
                Name = "Barry Green"
            },
            Venue = new Venue
            {
                Address = "Alabama St. 45",
                City = "Atlanta",
                Name = "Georgia World Congress Center",
                PostCode = "30303"
            }
        };
    }
}

public class Event
{
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public string Name { get; set; }
    public string WebSite { get; set; }
    public Contact Organizer { get; set; }
    public Venue Venue { get; set; }
}

public class Venue
{
    public string Name { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public string PostCode { get; set; }
}

public class Contact
{
    public string Name {get; set; }
    public string JobTitle { get; set; }
    public string Phone { get; set; }
    public string Email { get; set; }
}

Now you have all the pieces. Take it, use it, experiment with it and have fun!

I hope that it all makes sense to you … if not then please leave a comment and I will do my best to help you.

In this post I would like to show you how easy you can implement client side repeater. There are a few jQuery plugins which you can use for it. However I recommend using jTemplates. With jTemplates you can easily define a client side templates, here is an example:

<p style="display:none"><textarea id="EventsTemplate" rows="0" cols="0"><!--
    <table>
        <thead>
            <tr>
                <th>Event</th>
                <th>Contact</th>
                <th>Venue</th>
            </tr>
        </thead>
        <tbody>
        {#foreach $T.d as record}
         <tr>
           <td><a href="{$T.record.WebSite}">{$T.record.Name}</a></td>
           <td>
                    <a href="mailto:{$T.record.Organizer.Email}">
                        {$T.record.Organizer.Name}
                    </a>
           </td>
           <td>{$T.record.Venue.Name}</td>
         </tr>
         {#/for}
        </tbody>
    </table>
--></textarea></p>

In the above example you can see that template itself is hidden for end users (display:none). Everything within HTML comments will be used. You can easily recognize elements corresponding to well known ASP.NET Repeater elements:

• everything from the very top (<table>) to {#foreach … } represents HeaderTemplate
• everything between {#foreach…} and {/#for} represents ItemTemplate
• and everything under {/#for} is a FooterTemplate

How to Bind Data to Client Side Repeater?

JS code binding data to the jTemplates repeater looks like this:

BindDataToEventsTemplate = function (result) {
    // attach and process the template
    $("#Events").setTemplateElement("EventsTemplate");
    $("#Events").processTemplate(result);
}

Where $(“Events”) selects tag with id “Events” – this is where output will be placed. “EventsTemplate” is the name of our template – check the definition of template (first piece of code). So it’s that easy – firstly you need to set template which you want to use and secondly bind the data and ”process template”. End of story!

Just to make everything perfectly clear – here is an example of my “Events” tag where new events will be added using client side repeater:

<div id="Events"></div>

One additional tip – you can also check, just in case, if jTemplates has been correctly loaded by adding this piece of code:

// check if jTemplates is loaded
if (!jQuery.fn.processTemplate) {
    alert("jTemplates is not loaded");
    return;
}

In my case I have loaded data to the repeater from ASP.NET WebService. In the next post I will show you how to get it all working together – jTemplates with ASP.NET WebServices.