Using jTemplate with ASP.NET MVC

Question

In this article, Dave Ward describes how to use the jQuery plugin jTemplate to create what he calls a "client side repeater", that parses JSON data into a template on the client side.

Toward the end of the article, he suggests that the template is placed in a separate file with the extension ".tpl", and that the data is loaded into the document with the following syntax:

function ApplyTemplate(jsonData) {
  // This method loads the HTML template and
  //  prepares the container div to accept data.
  $('#Container').setTemplateURL('myTemplate.tpl');

  // This method applies the JSON array to the 
  //  container's template and renders it.
  $('#Container').processTemplate(jsonData);
}

However, when using ASP.NET MVC I can't just place the template file next to my view and call it with "/Guestbook/myTemplate.tpl". But I would like to place the template file next to the view, to keep things together.

How should I arrange this? A Controller Action that returns the text file contents? Some configuration in Global.asax.cs to make the Framework just return these files as is, without the Controller/Action url parsing? Any other ideas?

Answer 1

I think, you could just ignore the route, and link to your template file like you've suggested:

Check out this previous answer: http://stackoverflow.com/questions/273447/how-to-ignore-route-in-asp-net-forms-url-routing

Answer 2

I'd suggest using .htm instead. That comes through okay in a default MVC app.

It turns out that using .tpl is a bad idea anyway, due to some versions of IIS blocking it as an unknown file type unless you explicitly add it. I need to update my post.

Answer 3

Hey Tomas can you explain a bit more into what you have done to get this to work ?

I am having the same issue, where the div or the element thats having the template inside of it is coming up as null

here is whats in my JS file

function buildHTMLTable(){ $j("#divListResults").setTemplate($("#templateHolder").html()); $j("#divListResults").processTemplate(jSon.data); }

This is my template.. which is on the code front of the.aspx file.

List Code Value {#foreach $T.d as ListValues} {$T.ListValues.code} {$T.ListValues.engVal} {#/for}

I get the error

$("#templateHolder") is null