To see templates in action let's start by first including the jquery template library in our HTML Page. I'm using the one hosted on Microsoft's CDN site:
<head> <title>Person</title> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script> </head>
Next we add a template that will display Person details:
<script id="title-details-template" type="text/x-jquery-tmpl">
<fieldset>
<legend>Fields</legend>
<div class="display-label">First Name:</div>
<div class="display-field">${FirstName}</div>
<div class="display-label">Last Name:</div>
<div class="display-field">${LastName}</div>
<div class="display-label">Gender:</div>
<div class="display-field">${Gender}</div>
<div class="display-label">IsActive:</div>
<div class="display-field">${IsActive}</div>
</fieldset>
</script>
First note that the template is defined in a <script> tag with a id attribute of "title-details-template". The highlighted lines represent the template expressions defined for this template.
Next we'll add a Controller that will return a Json Person object that we will push to our template (note that the Person properties exactly match the template expression names):
namespace Controllers
{
public class Person
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Gender { get; set; }
public bool IsActive { get; set; }
}
public class PeopleController : Controller
{
private PersonRepository _personRepository = new PersonRepository();
[HttpGet]
public ActionResult JsonDetails(int id)
{
Person person = _personRepository.FindById(id);
return Json(person, JsonRequestBehavior.AllowGet);
}
}
} A couple of things to note is I'm using the Json method to serialize my person object into a json object and return it to the caller. Due to a recent security update in MVC2 we need to specify that our JsonResult can be retrieved via a HttpGet call thus the need for JsonRequestBehavior.AllGet.
Now back to our Html page, we grab the Json Person object from our controller (via a ajax call) then push the data into the named template that is rendered into a Div tag named "personDetail". We do this all via jQuery and ajax magic:
var personId = $("input:text[id='PersonId']").val();
$.get("People/JsonDetails", { id: personId }, function (data) {
//this call passes the json object from the controller
//directly into the template and sends result of the
//rendered template to the personDetail Div tag
$("#title-details-template").tmpl(data).appendTo("#personDetail);
});Note that since the template expression names exactly match the properties on the Person object, the Person instance values are automatically bound to the expressions defined in the template.
jQuery Templates has the potential to enable web developers to quickly build robust Web 2.0 applications. By limiting the payload to just Json (instead of partial views and other stuff) it allows for quick response times from your server in times where requirements demand high interactivity and performance. The most surprising aspect of jQuery Templates is that it was Microsoft that contributed this plugin to the jQuery ecosystem. To learn more about Microsoft's involvement, check Scott Gu's website.
No comments:
Post a Comment