Getting Started with Mustache.js in MVC

In this post you will learn how to use Mustache.js JavaScript library in MVC for client side templating.  I will take you through few easy steps to setup it and working.

There are many JavaScript template libraries to choose from these days like Handlebars.js, Dust.js, Google's Closure Templates etc, these all are known as logic-less templates. I would recommend you to read this post.

So, every JavaScript template library has a slightly different style and syntax and you can pick the library that suits your tastes. All the libraries provide functionality similar to Razor, in the sense you have HTML markup and then placeholders with special delimiters where the data is to appear. These placeholders are called binding expressions.

In MVC Application, we frequently come to scenario where we have to create a view for just displaying small chunk of data and for this Mustache.js is good alternative. So, let’s create an application which will display name, address and mobile number. I will take you through step by step from here.

Step 1: Open or Create MVC project and pick empty template or any other template you prefer.

Step 2: Open ‘Manage NuGet Packages’ and search for ‘mustache.js’ and install it. This will add a ‘mustache.js’ file in the Script folder. Also install jQuery library if you don’t have.

Step 3: Add any controller and its associated view or open if you already have. In my case, I have ‘Home’ controller and ‘Index’ view.

Step 4: Add a model class with appropriate properties, here is what will be using.

public class Friend

{

    public int Id { get; set; }

    public string Name { get; set; }

    public string Address { get; set; }

    public string Mobile { get; set; }

}

Step 5: Implement a method returning JSON data, maybe in your controller. Here is my Index view method and a method ‘MyFriends’.

public ActionResult Index()

{

    return View();

}

public JsonResult MyFriends()

{

    List<Friend> friends = new List<Friend>();

    friends.Add(new Friend { Name = "Deepak", Address = "Bokaro", Mobile = "9966453241" });

    friends.Add(new Friend { Name = "Rohit", Address = "Dhanbad", Mobile = "5454544533" });

    friends.Add(new Friend { Name = "Ram", Address = "Dumka", Mobile = "4456576589" });

    friends.Add(new Friend { Name = "Shyam", Address = "Ranchi", Mobile = "9876543456" });

    friends.Add(new Friend { Name = "Mohan", Address = "Giridih", Mobile = "9876567439" });

    return Json(friends, JsonRequestBehavior.AllowGet);

}

Now we done with server side implementations, this is what you regularly doing. From here we are going to implement Mustache template.

Step 6: Add the reference of jQuery and Mustache reference on view page.

<script src="~/Scripts/jquery-2.0.3.min.js"></script>

<script src="~/Scripts/mustache.js"></script>

Step 7: Add a JavaScript method ‘showFriends’ which will call server side ‘MyFriends’ method returning JSON data.

<script type="text/javascript">

    function showFriends(e) {

        $.getJSON("MyFriends", function (data) {

            var templateWithData = Mustache.to_html($("#templateFriends").html(), { RootTag: data });

            $("#destinationElement").empty().html(templateWithData);

        });

    }

</script>

In above code, Mustache.to_html($("#templateFriends") is the magical code which maps to the template with data (which we will create in next step) and updating the DOM element by id ‘destinationElement’. Remember I have assigned the ‘data’ in ‘RootTag’ (this can be any name), so this will be used inside template as a Root tag. Now three things to do, i) create the template that can be of any format list, table or whatever you wish ii) create DOM element by id ‘destinationElement’ and iii) generate any event to call ‘showFriends’ method, in my case I will use button.

Step 8: Here is a button to generate function call, and a DOM element to update, and a template format (tabular), in the next step I will show you list template of the same.

<input type="button" value="Show Data" onclick="showFriends();" />

<div id="destinationElement">

</div>

<script id="templateFriends" type="text/html">

    <table>

        <thead>

            <th>Name</th>

            <th>Address</th>

            <th>Mobile</th>

        </thead>

        {{#RootTag}}

            <tr>

                <td>{{Name}}</td>

                <td>{{Address}}</td>

                <td>{{Mobile}}</td>

            </tr>

        {{/RootTag}}

    </table>

</script>

In above code, script tag has type as text/html and because of this JavaScript rendering system (in the user’s browser) will not interpret as script and execute. Also there is binding of properties between the double braces, the RootTag has all the data to be assigned in internal properties Name, Address and Mobile. Here is what you will see as output.

Step 9: If you want to list the data rather than showing in tabular format, you just do it by replacing the above code with following.

<input type="button" value="Show Data" onclick="showFriends();" />

<div id="destinationElement">

</div>

<script id="templateFriends" type="text/html">

    <ul>

        {{#RootTag}}

            <li>{{Name}} - {{Address}} - {{Mobile}}</li>

        {{/RootTag}}

    </ul>

</script>

And that’s it.

You can download the source code from here.

Hope this helps.