Basics of jQuery Templates

Basics of jQuery Templates

jQuery templates are used to display, manipulate and format data in the browser that we retrieve via jQuery Ajax calls, Page Methods and so on. jQuery templates are sometimes referred to as a client-side repeater and it is somewhat equivalent to an ASP.NET repeater control. jQuery templates were developed by Microsoft in collaboration with the jQuery team.

To demonstrate jQuery templates, I have created a small web application. In this web app, I am simply creating some custom Employees data at the server side and on button click fetching that data and binding it to a HTML table using a jQuery template. The following is the procedure involved.

Step 1

We need to add the base jQuery library file and jQuery template files.



Step 2

Add a class file Employee.cs to the project that will act as the custom data type.

Step 3

Add a webpage Default.aspx and add a simple method that returns a list of employees:

[WebMethod]
        public static List<Employee> GetEmployees()
        {
            List<Employee> employees = new List<Employee>
            {
                new Employee { EmployeeId = 1, EmployeeName = "Pam"},
                new Employee { EmployeeId = 2, EmployeeName = "Tod"},
                new Employee { EmployeeId = 3, EmployeeName = "Alex"},
                new Employee { EmployeeId = 4, EmployeeName = "Richard"},
            };

            return employees;
        }

Please note this method is decorated with the “WebMethod” attribute because we will invoke this method using jQuery Ajax. Also, I have hard-coded some employees but in reality we can fetch this data from a database, XML files and so on.

Step 4

Create Mark-Ups:

<table id="Container" border="1px solid black;">
            <tr>
                <th>
                    Employee ID
                </th>
                <th>
                    Employee Name
                </th>
            </tr>
</table>

<script id="EmployeeScript" type="text/x-jquery-tmpl">
            <tr>
                {{if EmployeeId == 4 }}
                <td colspan="2">
                    Invalid Employee!
                </td>
                {{else}}
                <td>
                    <label>${EmployeeId}</label>
                </td>
                <td>
                    <label>${EmployeeName}</label>
                </td>
                {{/if}}
            </tr>
</script>

Here, the first mark-up is a straight-forward static HTML table, the second script component will act as the repeater where we will bind our data retrieved from the server. We can add normal HTML contents in this script tag and the values should exactly match that of the property name returned by the server, this is enclosed within special ${ } symbols. Apart from this we can put some conditions based on the output received (here for demo I am showing the employee as invalid if his employee id is 4).

Continued…

Step 5

Finally bind the data by calling WebMethod using jQuery Ajax:

$(document).ready(function () {
            $('#btnFetchData').click(function () {
                BindEmployeesData();
            });
});

        function BindEmployeesData() {
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetEmployees",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    if (response.d && response.d.length > 0) {
                        $("#EmployeeScript").tmpl(response.d).appendTo("#Container");
                    }
                },
                error: function (ex) {
                    alert("error");
                }
            });
            return false;
        }

Please note the highlighted line here, when we receive the response from the server, we are simply appending the response (that is present in response.d) to the Container table using the “tmpl” method of the jQuery template.

Output



A jQuery template Item has the following properties and methods: 

• data: The data associated with the Template Instance. For example, a product.
• tmpl: The template associated with the Template Instance.
• parent: The parent template item if the template is nested.
• nodes: The HTML content of the template.
• calls: Used by {{wrap}} template tag.
• nest: Used by {{tmpl}} template tag.
• wrap: Used to imperatively enable wrapped templates.
• html: Used to filter content from a wrapped template. See the preceding section on wrapped templates.
• update: Used to re-render a template item.

Advantages

1. Easy to use.
2. We can write the content more declaratively than programmatically.
3. We can reuse the templates in various scenarios.

Disadvantages

1. If a template is large then it its execution can become excessive, resulting in slow response.