Call function in jQuery Template Expression with ASPNET MVC 2

jQuery Template helps a lot when it comes to bringing data back from server and present it in some kind of DOM element. I have found jQuery Template very easy to work with and with ASP.NET MVC it does wonders.

Today, we will work on how to call function inside template expression.

Screenshot:

 

Before we start, we will need to download copy of jQuery(http://jquery.com/) and jQuery Template(https://github.com/jquery/jquery-tmpl).

Once downloaded, let's create a new ASP.NET MVC 2 Project and copy these files inside folder name "Scripts".

Add a class with name customer either in Model folder or your choice of location and add following code:

 

public class Customer

{

public int CustID { get; set; }

public string CustName { get; set; }

public List<string> CustAddress { get; set; }

}

 

As, we can see we have three properties here in this class: customer id, customer name, and customer address. Customer ID and Name are just regular properties but if you notice Customer Address is a List of string, reason it's like that because we want to store as many addresses as possible and not restricting our customer with just one address.

Now we will update our home controller with following code:

public ActionResult Index()

{

return View();

}

 

public ActionResult JSONCall()

{

List<Customer> customers = new List<Customer>() {

new Customer{CustID=1, CustName="Sample1", CustAddress=new List<string>{"Demo Address1","Demo City","ZZ", "99999"}},

new Customer{CustID=2, CustName="New Customer", CustAddress=new List<string>{"New Demo Address","City Center", "DD", "88888"}},

new Customer{CustID=3, CustName="Recently Joined Customer", CustAddress=new List<string>{"One More Customer's Address","Middle Earth", "AA", "77777"}}

};

 

return Json(customers, JsonRequestBehavior.AllowGet);

}

 

}

Code above will generate collection of customers with list of addresses in CustAddress property and then pass this object as JSON object in response stream.

 

JSON Response:

[{"CustID":1,"CustName":"Sample1","CustAddress":["Demo Address1","Demo City","ZZ","99999"]},{"CustID":2,"CustName":"New Customer","CustAddress":["New Demo Address","City Center","DD","88888"]},{"CustID":3,"CustName":"Recently Joined Customer","CustAddress":["One More Customer\u0027s Address","Middle Earth","AA","77777"]}]

Now, all we need to do is take this object and pass it in expressions of template.

But before that, make sure you have included reference of jQuery (version 1.4.2 or above) and jQuery template downloaded earlier.

<h2>Customer Details</h2>

 

<table id="result">

<thead>

<tr>

<th>Customer Name</th>

<th>Customer ID</th>

<th>Customer Address</th>

</tr>

</thead>

</table>

 

 

<script id="templatePlace" type="text/x-jquery-tmpl">

<tr>

<td>

<b>${CustName}</b>

</td>

<td>

<i>(${CustID})</i>

</td>

<td>

${$item.getAddress(", ")}

</td>

</tr>

</script>

 

<script type="text/javascript">

$(function () {

// AJAX call to MVC action method

$.ajax({

dataType: "json",

url: "/jQTemplate/JSONCall",

success: showData

});

});

// callback function on success

function showData(data) {

$('#templatePlace').tmpl(data, {

getAddress: function (delimiter) {

return this.data.CustAddress.join(delimiter);

}

}).appendTo("#result");

}

</script>

 

Tags:

AJAX | ASP.NET | jQuery