Creating Reusable jQuery Templates in Visual Studio

Creating Reusable jQuery Templates in Visual Studio

JQuery, the open source, cross-browser JavaScript library, simplifies event handling, animations and general development of responsive Web applications. The official jQuery Web site states: “JQuery is designed to change the way that you write JavaScript.” Released in 2006 by John Resig, jQuery has since become very popular for its versatility, ease of use and numerous plugins, which extend the jQuery library.

The key features of jQuery include:

  • Browser independence: jQuery is supported by most browsers.
  • Simplified event handling model: The excellent, easy-to-use jQuery event handling model minimizes code and is consistent across all browsers. The event object is cross-browser and normalized, and one event object is always passed as a parameter to an event handler.
  • Seamless extensibility: JQuery supports extensibility through an easy to use plugin API.

Getting Started with jQuery

To get started with jQuery, you should have the following installed in your system:

  • Visual Studio 2008
  • Visual Studio 2008 SP1
  • jQuery Library
  • Visual Studio 2008 jQuery Plug-in

Alternatively, you can acquire Visual Studio 2010, which comes with the jQuery library by default. To use jQuery, you can simply drag and drop the script onto your web form in the markup mode. Here’s the markup code that is generated:


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:


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:

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:


Employee Records

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:

Hello, ${empname}.

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
  • Share the Post:
    Heading photo, Metadata.

    What is Metadata?

    What is metadata? Well, It’s an odd concept to wrap your head around. Metadata is essentially the secondary layer of data that tracks details about the “regular” data. The regular

    XDR solutions

    The Benefits of Using XDR Solutions

    Cybercriminals constantly adapt their strategies, developing newer, more powerful, and intelligent ways to attack your network. Since security professionals must innovate as well, more conventional endpoint detection solutions have evolved

    AI is revolutionizing fraud detection

    How AI is Revolutionizing Fraud Detection

    Artificial intelligence – commonly known as AI – means a form of technology with multiple uses. As a result, it has become extremely valuable to a number of businesses across

    AI innovation

    Companies Leading AI Innovation in 2023

    Artificial intelligence (AI) has been transforming industries and revolutionizing business operations. AI’s potential to enhance efficiency and productivity has become crucial to many businesses. As we move into 2023, several

    data fivetran pricing

    Fivetran Pricing Explained

    One of the biggest trends of the 21st century is the massive surge in analytics. Analytics is the process of utilizing data to drive future decision-making. With so much of

    kubernetes logging

    Kubernetes Logging: What You Need to Know

    Kubernetes from Google is one of the most popular open-source and free container management solutions made to make managing and deploying applications easier. It has a solid architecture that makes