Creating UI elements by fetching JSON data from server is one of the most common task we do in any web application we develop these days. With jQuery library, AJAX communication and manipulating JSON has become very easy. There are variety of open source ready to use plugins available for doing various task using jQuery. In this article, let’s use a one of the most commonly used jQuery template library to display Json data in a tabular format.
For demonstration, let’s create an Asp.Net MVC 5.0 project using Visual Studio 2015/2017 and use a simple Employee-Department model. We will use Entity Framework Code First for data access. Assuming, you have all the Nuget packages required for running Asp.Net MVC and Entity Framework, let’s build a simple an Asp.Net MVC view that display the list of employees in a HTML table on click of a “Get Employee Summary” link similar to below.
For doing this, we will first add the latest jQuery and mustache.js library into our project. You can use either Bower or Nuget package manager to do this. The below image shows mustache.js installed using Nuget package manager in Visual Studio 2015.
Similarly, add the latest jQuery library into the project if it is not already added by the visual studio project template.
Let’s now add a controlled method that can return employee list as json which can be called from jQuery Ajax methods from client side.
public JsonResult EmployeeSummaryAsJson()
{
IList<Employee> empSummary = db.Employees.ToList();
return Json(empSummary, JsonRequestBehavior.AllowGet);
}
Next, we will build an Asp.Net MVC view and use jQuery and mustache.js to display the Json in a HTML table. For this, we will define a moustache template in the view which will be used by the mustache.js template to render the Json data. The below code will help you do that.
EmployeeSummary.cshtml
<div>
<a href="#" id="GetSummary">Get Employee Summary</a>
</div>
<script id="employeeSummaryTemplate" type="text/html">
<table class="table table-bordered table-condensed">
<tr>
<th>Name</th>
<th>Department</th>
<th>Country</th>
</tr>
{{#empSummary}}
<tr id="tr{{EmployeeId}}">
<td>{{FirstName}} {{LastName}}</td>
<td>{{Department.DepartmentName}}</td>
<td>{{Country.Name}}</td>
</tr>
{{/empSummary}}
</table>
</script>
<div id="summary">
<!-- mustache.js output goes here -->
</div>
@section scripts {
<script src="~/Scripts/mustache.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#GetSummary').click(function () {
$.ajax({
url: '/employee/EmployeeSummaryAsJson', type: "GET", dataType: "json",
success: function (data) {
//alert(JSON.stringify(data));
var html = Mustache.to_html($("#employeeSummaryTemplate").html(), { empSummary: data });
$("#summary").html(html);
},
error: function (xhr, status, error) {
alert(xhr.responseText);
alert(status);
alert(error);
}
});
});
});
</script>
}
Note – I have included the jQuery library into the layout page.
In the above code, on click of the hyper link with id "GetSummary", the mustache.js will use the inline template defined under the <script> tag to display the fetched Json in a tabular. To enumerate the list of employee Json, the moustache template uses the {{#empSummary}} {{/empSummary}} syntax as seen below. The #empSummary object is where the fetched Json is assigned in the jQuery AJAX success event.
{{#empSummary}}
<tr id="tr{{EmployeeId}}">
<td>{{FirstName}} {{LastName}}</td>
<td>{{Department.DepartmentName}}</td>
<td>{{Country.Name}}</td>
</tr>
{{/empSummary}}
The mustache.js plugin will create the HTML table using the template (#employeeSummaryTemplate) when the Json data is passed into the Mustache.to_html() method as seen in the below line of code.
var html = Mustache.to_html($("#employeeSummaryTemplate").html(), { empSummary: data });
The generated HTML is finally loaded into the div with id="summary" as seen in the above code.
Happy Coding!!