Use Jquery Datatable in ASP.NET MVC 4 with Entity Framework

Here I will explain about Implement Jquery DataTable in ASP.Net MVC 4 with search, sort and pagination also. To implement jquery datatable in your project like asp.net or mvc 4 or mvc5 or mvc6 any one just you need to add one script and one css file for basic implementation.

Visual Studio > New Project > ASP.NET MVC 4 Web Application > Enter name of your project > Ok > Choose Internet Application > Razor View

Add Entity Data Model:

Solution Explorer > Right Click on Name of your project > Add New Item > Data > ADO.NET Entity Data Model > give model name > Choose New Connection > Enter your id and password Choose Right Connection > Choose you database > Choose tables > Enter model name space > Finish

After creating my model class as

using System;

    using System.Collections.Generic;

   

    public partial class BookDetail

    {

        public int BookId { get; set; }

        public string BookName { get; set; }

        public string Author { get; set; }

        public string Publisher { get; set; }

        public decimal Price { get; set; }

    }

Create a New Controller :

Solution Explorer > Right Click on Controllers > Add Controller > Give name to controller > Choose Empty MVC Controller > Add

Write the below code

public ActionResult Index()

        {

            return View();

        }

Add View right click on Index and Choose view > Give name > Choose view engine Razor > Add

@{

    ViewBag.Title = "Index";

}

<h2>1.Implement Jquery Datatable in ASP.NET MVC</h2>

<div style="width: 90%; margin: 0 auto">

    <table id="BookDetails">

        <thead>

            <tr>

                <th>Book Id</th>

                <th>Book Name</th>

                <th>Author</th>

                <th>Publisher</th>

                <th>Price</th>

            </tr>

        </thead>

    </table>

</div>

<style>

    tr.even {

        background-color: green !important;

    }

</style>

@* Load datatable css *@

<link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />

@* Load datatable js *@

@section Scripts{

    <script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>

    <script>

        $(document).ready(function () {

            $('#BookDetails').DataTable({

                "ajax": {

                    "url": "/Book/loadData",  //To get data /controllername/methodname

                    "type": "GET",

                    "datatype": "json"

                },

                "columns": [

                        { "data": "BookId", "autoWidth": true },

                        { "data": "BookName", "autoWidth": true },

                        { "data": "Author", "autoWidth": true },

                        { "data": "Publisher", "autoWidth": true },

                        { "data": "Price", "autoWidth": true }

                ]

            });

        });

    </script>

}

Open your newly created controller page add below code

public ActionResult loadData()

        {

            using (Book_DBEntities be = new Book_DBEntities())

            {

                var data = be.BookDetails.OrderBy(a => a.BookName).ToList(); //BookDetails model class name

                return Json(new { data = data }, JsonRequestBehavior.AllowGet);

            }

        }