How To Retrieve Data From Database Using jQuery AJAX In MVC 5

using MvcJQueryDataTable_Demo.Models;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web.Mvc;  
  
namespace MvcJQueryDataTable_Demo.Controllers  
{  
    public class HomeController : Controller  
    {  
        public ActionResult Index()  
        {  
            return View();                
        }  
        public ActionResult GetData()  
        {  
            using (DBModel db=new DBModel())  
            {  
                List<Employee> employeeList = db.Employees.ToList<Employee>();  
                return Json(new { data = employeeList }, JsonRequestBehavior.AllowGet);  
            }  
        }  
    }  
} 

Step 6

Right click on Index action method in controller Add view window will appear with default Index name uncheck (use a Layout page) click on Add. As shown in below screenshot, the View will be added in views folder under Home folder with name Index.

Add the following styles and script file in head section of index view,

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />  
<script src="~/scripts/jquery-3.3.1.min.js"></script>  
<script src="~/scripts/bootstrap.min.js"></script>  
<link href="~/Content/dataTables.bootstrap4.min.css" rel="stylesheet" />     
<script src="~/scripts/jquery.dataTables.min.js"></script>  
<script src="~/scripts/dataTables.bootstrap4.min.js"></script>

Write following jquery script to retrieve data from database,

<script type="text/javascript">  
    $(document).ready(function () {  
        $('#dataTable').DataTable({  
            "ajax": {  
                "url": "/Home/GetData",  
                "type": "GET",  
                "datatype": "json"  
            },  
            "columns": [  
                { "data": "Name" },  
                { "data": "Position" },  
                { "data": "Office" },  
                { "data": "Age" },  
                { "data": "Salary" }  
            ]
        });
    });
</script>

Design the HTML table in index view to display data,

<body>  
    <div class="container py-4">  
        <h4 class="text-center text-uppercase">HOW TO RETRIEVE DATA FROM DATABASE USING JQUERY AJAX IN MVC5</h4>  
        <div id="dataTable_wrapper"></div>  
        <table id="dataTable" class="table table-bordered table-striped">  
            <thead>  
                <tr>  
                    <th>Name</th>  
                    <th>Position</th>  
                    <th>Office</th>  
                    <th>Age</th>  
                    <th>Salary</th>  
                </tr>  
            </thead>  
        </table>  
    </div>  
</body>

Complete index view code

@{  
    Layout = null;  
}  
  
<!DOCTYPE html>  
  
<html>  
<head>  
    <meta name="viewport" content="width=device-width" />  
    <title>Index</title>  
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />  
    <script src="~/scripts/jquery-3.3.1.min.js"></script>  
    <script src="~/scripts/bootstrap.min.js"></script>  
    <link href="~/Content/dataTables.bootstrap4.min.css" rel="stylesheet" />     
    <script src="~/scripts/jquery.dataTables.min.js"></script>  
    <script src="~/scripts/dataTables.bootstrap4.min.js"></script>  
    <script type="text/javascript">  
        $(document).ready(function () {  
            $('#dataTable').DataTable({  
                "ajax": {  
                    "url": "/Home/GetData",  
                    "type": "GET",  
                    "datatype": "json"  
                },  
                "columns": [  
                    { "data": "Name" },  
                    { "data": "Position" },  
                    { "data": "Office" },  
                    { "data": "Age" },  
                    { "data": "Salary" }  
                ]  
            });  
        });           
    </script>  
</head>  
<body>  
    <div class="container py-4">  
        <h4 class="text-center text-uppercase">HOW TO RETRIEVE DATA FROM DATABASE USING JQUERY AJAX IN MVC5</h4>  
        <div id="dataTable_wrapper"></div>  
        <table id="dataTable" class="table table-bordered table-striped">  
            <thead>  
                <tr>  
                    <th>Name</th>  
                    <th>Position</th>  
                    <th>Office</th>  
                    <th>Age</th>  
                    <th>Salary</th>  
                </tr>  
            </thead>  
        </table>  
    </div>  
</body>  
</html>

Step 7

Run the project by pressing Ctrl +F5.