Easy Client Side Repeater with jTemplates Part 2
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.