Browse DevX
Sign up for e-mail newsletters from DevX


Creating Reusable jQuery Templates in Visual Studio : Page 2

If you're already using jQuery in your ASP.NET and Ajax development, building reusable jQuery templates can make you even more productive.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Creating and Using jQuery Templates

The jQuery.template(name,template) method is used to create a reusable template. The first parameter is a string that indicates the compiled template. The second parameter is the HTML markup and/or the text to be used as a template. The jQuery official site states: "This method compiles the markup in the template parameter as a named template, which can be referenced using the string specified in the name parameter."

To implement the jQuery templating plugin, you need to include the jQuery scripts as shown below:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="jquery.tmpl.js"></script>

Note that both jQuery 1.4.4 and jQuery Templates can be downloaded from Microsoft Ajax Content Delivery Network. Also, notice the usage of the script tag with a special MIME type.

The next step is creating a template using jQuery. Here is an example:

<script id="employeeTemplate" type="text/x-jQuery-tmpl"> <div> <img src="EmployeePictures/${picture}" alt="" /> <h2>${Name}</h2> </div> </script>

Next, create some data to render. Here is an example:

var employees = [ { Name: "Peter Sanders", "E001" }, { Name: "Joydip Kanjilal", "E002" }, { Name: "Steve Mitch", "E003" }, { Name: "Peter Dan", "E004" }, { Name: "Jim Kanjilal", "E005" }, ];

The Complete jQuery Template Source Code

The following plugin script illustrates how you can display a list of employees stored in a JavaScript array:

<body> <div id="pageContent"> <h1>Employee Records</h1> <div id="employeeContainer"></div> </div> <script id="employeeTemplate" type="text/x-jQuery-tmpl"> <div> <img src="EmployeePictures/${picture}" alt="" /> <h2>${Name}</h2> </div> </script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script> <script type="text/javascript"> var employees = [ { Name: "Peter Sanders", "E001" }, { Name: "Joydip Kanjilal", "E002" }, { Name: "Steve Mitch", "E003" }, { Name: "Peter Dan", "E004" }, ]; $("#employeeTemplate").tmpl(books).appendTo("#employeeContainer"); </script> </body>

Defining a jQuery Template Externally

You can also define a template externally and use it in your markup code. To do this, you should define a template in a data file. For example, you could create the following data file and name it EmployeeTemplate.htm:

<p>Hello, ${empname}.</p> Then you can define the employee object as shown below: var employees = { empname: 'Joydip' };

You could then load the external template stored in the external file (EmployeeTemplate.htm) using the $.get() method and then render the external template using jQuery templates. Here is how to do that:

$.get('EmployeeTemplate.htm', function(template) { $.tmpl(template, employee).appendTo('body'); });


JQuery is a simple, light-weight and fast JavaScript library that has simplified the way you write your scripts. In this article we discussed the features of jQuery and how we can work with the jQuery templates. We also discussed how we can create and use jQuery templates in your application.


  • jQuery Templates intro by Stephen Walther
  • jQuery Templates Plugin Documentation
  • jQuery Templates and Data Linking blog by Scott Guthrie

  • Joydip Kanjilal has over 10 years of industry experience with C, C++, Java, C#, VB, VC++, ASP.Net, XML, Design Patterns, UML, etc. He currently works as a senior project leader in a reputable multinational company in Hyderabad, India, and has contributed articles on .NET and related technologies to www.aspalliance.com.
    Thanks for your registration, follow us on our social networks to keep up-to-date