Web Tutorials

HTML Tutorial
HTML5 Tutorial
Bootstrap3 Tutorial
Javascript Tutorial
TypeScript Tutorial
AngularJS Tutorial
CSharp Tutorial
.NET Tutorial
PHP Tutorial

Interview Q & A

ASP.NET Q & A
WEB API Q & A
WCF Q & A
JQuery Q & A
MVC Q & A
Bootstrap Q & A
LINQ Q & A
AJAX Q & A
SQL Server Q & A
C# Q & A
OOPS Q & A

Code Examples

AngularJS
Google MAP API V3
ASP.NET

Utility Tools

Html Encode
Html Decode
URL Decode
URL Encode
Base64 Encode
Base64 Decode
JSON Beautifier

JQuery DataTable Bind JSON Using ASP.NET MVC 5 and Entity Framework 6

Posted By: Ajay Saptaputre, 12 Oct,2015  |  Total View : 18000

In my previous article I discussed about JQuery DataTable Paging, Searching and Sorting In ASP.NET and FXCop Static Code Analysis For ASP.NET Preventive Action and Scheduled Tasks In ASP.NET With Quartz.Net

In my previous article JQuery DataTable Paging, Searching and Sorting in ASP.NET I have discussed how to bind static JSON data to JQuery DataTable including paging, searching, sorting etc. In this article I will discuss how to create dynamic JSON data from controller and bind server side data to JQuery DataTable. I will also cover paging, sorting, searching operation using JQuery DataTable.

To know more about JQuery DataTable please refer my previous article .

So let's open Visual Studio and start creating new empty ASP.NET MVC5 application. In this article I am using Visual Studio Express 2013 for Web but you can use Visual Studio 2013 as well.

Now start creating ASP.NET Web project in Visual Studio 2013.

Create Model using Entity Framework 6

In order to start our sample application we will need database table, entity and DBContect classes to fetch the data from database. In this article I am not covering steps those are already covered in my previous article. If you did not read, please refer database first approach using ASP.NET MVC 5 and Entity Framework 6 and follow Step 1 to Step 16 it will help you to understand this article.

Install Jquery.DataTables

Before going to start, we will need to add "DataTable" packages that will help us to display data in Grid format. All right, right click on project or go to "Tool" menu and select "Library Package Manager" and then select "Manage NuGet Package for Solution..." option. Now, search for "Jquery.DataTables" and select "Jquery.DataTables" from list and clicks on "Install" button. See below screen shot:


Add Empty Controller

I hope you already red my previous article. Now, right click on Controller folder and select Controller from menu as below screen shot. Now select MVC 5 empty controller, rename controller name as "EmployeeController". Click on "Add" button.



Add Code to the Controller

Now add below code to the controller class. The below code will send JSON array of "Employee" object to the view.

using JQueryDataTableMVC.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace JQueryDataTableMVC.Controllers
{
    public class EmployeeController : Controller
    {
        JQueryDataTableDBContext db = new JQueryDataTableDBContext();
	public ActionResult Index()
	{
		return View();
	}

	//Employee/getEmployees
	[HttpGet]
	public JsonResult getEmployees()
	{
		var jsonData = new
		{
			data = from emp in db.Employees.ToList() select emp
		};
		return Json(jsonData, JsonRequestBehavior.AllowGet);

	} 
	}
}

Add Empty View

Now right click on "Index" action method, select "Add View" and select "Empty" template from dropdown.


Add Script References

Now we need to include jquery-1.11.3.min.js, jquery.dataTables.js and jquery.dataTables.min.css file in our project. You can download all the files from here . All right, now include all files reference in "_Layout.cshtml" file under head section. As below code snippet:

    <script src="Scripts/jquery-1.11.3.min.js"></script>
    <script src="Scripts/jquery.dataTables.js"></script>
    <link href="css/jquery.dataTables.min.css" rel="stylesheet" />

Add DataTable with Columns in View

This is very simple JQuery Ajax call code that is loading server side JSON data from controller. Also, you can observer that I am setting some properties like "searching", "ordering", "pagingType" and "columns". Here "columns" array is used to assign property those mapping with our JSON object properties. You can see here I am using JQuery $(document).ready() function that will execute, once document is ready. As below code snippet:

<div style="width:300;">
<script type="text/javascript">
	$(document).ready(function () {
		$('#tblEmployee').DataTable({
			"searching": true,
			"ordering": true,
			"pagingType": "full_numbers",
			"ajax": "http://localhost:58793/Employee/getEmployees",
			"columns": [
				{ "data": "Name" },
				{ "data": "Designation" },
				{ "data": "Gender" },
				{ "data": "Salary" },
				{ "data": "City" },
				{ "data": "State" },
				{ "data": "Zip" }
			]
		});
	});
</script>
</div>

Add HTML Table in View

All right, notice that "DataTable" extension method is used to assign loaded JSON data to "tblEmployee" DOM element. This "tblEmployee" DOM element nothing but simple HTML table that will display all the records from JSON object. In order to change look and feel, you can add CSS style as per requirement. So let's add DOM element in HTML page as below:

<table id="tblEmployee" class="display" cellspacing="0" data-page-length='5'>
    <thead>
        <tr>
            <th>Name</th>
            <th>Designation</th>
            <th>Gender</th>
            <th>Salary</th>
            <th>City</th>
            <th>State</th>
            <th>Zip</th>
        </tr>
    </thead>
</table> 

Run ASP.NET MVC Application

Now our sample ASP.NET web application is ready to run. Press Ctrl + F5 and run the application, you can see below output in browser.


Appreciate your valuable feedback:

I hope this article is useful for you. I look forward for your comments and feedback. So please provide your valuable feedback so that I can make this blog better. You can also share this article by hitting below button.
Happy learning...

Download Code ⇩