Asp.Net MVC’s controller offer a way to return in Json format. You can take the JsonReult returned from controller and populate it into the view using Jtemplate, a template engine written in jQuery way. also a perfect “client solution” to display Json data into a Asp.Net MVC View.

With this template engin in jquery, it display list of json data via ajax call so that the page does not refresh. It not only makes the user experience much better without waiting page to refresh, but also save traffic(loads faster) by returning only Json data and let the javascript to perform the rendering.

The following javascript code block shows you how to use the jtemplate,

function loadList(size) {
            //1. display loading text while loading data via ajax call
            $('#listContainer').html(loadingHtml);

            //2. ajax post to the controller
            $.post("/Home/GetList/", { size: size },
            function (data) {
                //3. run Jtemplate
                $('#listContainer').setTemplateElement('listTemp');
                $('#listContainer').processTemplate(data);
            });
        }

Here is the code for controller, it returns the JsonResult

public JsonResult GetList(int size)
{
var list = new dynamic [] { 
                new { Name = "Asus Zenbook UX51V", Size = "15", Weight = "1.7 kg", OS = "Windows 8", Price = 1499, Review = 4.5 },
                new { Name = "HP Envy 17", Size = "17", Weight = "3.2 kg", OS = "Windows 8", Price = 999 , Review = 4}
            };

            return Json(list.Take(size), JsonRequestBehavior.AllowGet);
}

You can write the template file on the same page/view by putting it in a hidden textarea tag. I call this the inline method. In some cases, you may want to write it on a seperate tpl file

textarea id="listTemp" class="" style="display:none;">
    <![CDATA[
    <table class="tbl">
        <thead>
            <th>Name</th>
            <th>Size</th>
            <th>Weight</th>
            <th>OS</th>
            <th>Price</th>
        </thead>
        <tbody>
        {#foreach $T as Laptop}
            <tr>
                <td>{$T.Laptop.Name}</td>
                <td>{$T.Laptop.Size}</td>
                <td>{$T.Laptop.Weight}</td>
                <td>{$T.Laptop.OS}</td>
                <td>${$T.Laptop.Price}</td>
            </tr>
        {#/for}
        </tbody>
        <tfoot>
            <div class="rowSize">
                Size : 
                <ul>
                    <li onclick="changeRows(this);">5</li>
                    <li onclick="changeRows(this);">10</li>
                    <li onclick="changeRows(this);">25</li>
                </ul>
            </div>
        </tfoot>
    </table>
    ]]>
    </textarea>

Demo of Loading Json List Using Jtemplate & Asp.Net MVC
Download the project