Question

What would be the best way to bind C# List to jQuery template?
The only way I found so far is as follows:

JavaScriptSerializer serializer = new JavaScriptSerializer();
var jsonData  = serializer.Serialize(ListOfObjects);
Response.Write("<script type='text/javascript'>var jsonData = " + jsonData  + ";</script>");

on page:

$("div").html($("#myTemplate").tmpl(jsonData ));

<script id="myTemplate" type="text/x-jquery-tmpl">
  ${}
</script>

Any better way to do it?

Answer 1

Not sure what your server-side architecture looks like, but it would be cleaner to make an jQuery ajax call to a web service (WCF or otherwise) or HttpHandler, using a technique similar to one shown in this article:

http://www.diplo.co.uk/blog/2011/3/1/using-jquery-templates-to-bind-to-json-data.aspx

This example uses JSONP, which you wouldn’t need if there are no cross-domain calls.

<script id="flickrTemplate" type="text/x-jquery-tmpl">
    <li>${title}</li>
</script>

<script type="text/javascript">
    $(document).ready(function()
    {
        $.ajax({
            url: "http://api.flickr.com/services/feeds/photos_public.gne",
            data: "format=json",
            jsonp: "jsoncallback",
            dataType: "jsonp",
            success: function(data)
            {
                $("#flickrTemplate").tmpl(data.items).appendTo("#placeholder");
            }
        });
    });
</script>

<ul id="placeholder"></ul>