Load Json List Using Jtemplate & Asp.Net MVC

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.

image

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s