Empty Jquery Datatable - asp.net

Question

I have created a controller with ActionResult Index and created a list of Student class as:
public ActionResult Index()
{
var list = new List<Student>()
{
new Student{Id=1,RegNo="Bcs153048",Name="Ali",Age=21,},
new Student{Id=2,RegNo="Bcs153044",Name="Talha",Age=22,},
new Student{Id=3,RegNo="Bcs153064",Name="Luqman",Age=20,},
new Student{Id=4,RegNo="Bcs153054",Name="Saad",Age=19,},
new Student{Id=5,RegNo="Bcs153036",Name="Hashir",Age=20,},
};
//var jsonString = JsonConvert.SerializeObject(list);
//return View(list);
return Json(list , JsonRequestBehavior.AllowGet);
}
I the view i want to view the list of students in JQuery datatable and i did something like this:
<table id="students" class="table table-bordered table-hover">
<thead>
<tr>
<th>Id</th>
<th>Registeration No</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody></tbody>
and then below this i have written script as
#section scripts
{
<script>
$(document).ready( function () {
var dataTable = $("#students").DataTable({
ajax: {
url: "/student/index",
dataSrc: "",
},
columns: [
{
data: "Id"
},
{
data: "RegNo",
},
{
data: "Name"
},
{
data: "Age",
}
]
});
});
</script>
}
But i got the Json result when i run the application and navigate to /Student/index wile i want to display list in Jquery datatable :
[{"Id":1,"Name":"Ali","Age":21,"RegNo":"Bcs153048"},{"Id":2,"Name":"Talha","Age":22,"RegNo":"Bcs153044"},{"Id":3,"Name":"Luqman","Age":20,"RegNo":"Bcs153064"},{"Id":4,"Name":"Saad","Age":19,"RegNo":"Bcs153054"},{"Id":5,"Name":"Hashir","Age":20,"RegNo":"Bcs153036"}]
I have added libraries in Bundle.config as:
Libraries in BundleConfig

Answer 1

Add a partial view and add the below script and html table. call that partial view in your main view.
<script>
$(document).ready(function () {
//Call student Details jsonResult Method
$.getJSON("/student/index",
function (json) {
var tr;
//Append each row to html table
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + json[i].Id + "</td>");
tr.append("<td>" + json[i].Name + "</td>");
$('table').append(tr);
}
});
});
<table class="table table-bordered table-condensed table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>City</th>
<th>Address</th>
</tr>
</thead>
<tbody></tbody>
call the partialview
<div style="margin-top:20px">#Html.Partial("studentDetails");</div>

Answer 2

You said
"i get the Json result when i run the application and navigate to
/Student/index "
...yes, that's correct, because that's what "student/index" returns in your code. But why are you navigating there in your browser directly? It doesn't lead to a view which you can display to the user. It's the ajax call (defined in the DataTables setup) which should request that data. I think maybe you have become confused between the two things.
In your browser you should be navigating to the View which renders the datatable. This will have a separate action method which returns a whole HTML view, not JSON, and thus also has a separate URL from the method which fetches the JSON.
So when you make a HTTP request to the main view in your browser, it loads the view HTML into the browser. Then the JS code on that page runs, loads the DataTable, which triggers the separate HTTP request via ajax to fetch the JSON data.
For example:
"Student" controller:
//load the view
[HttpGet]
public ActionResult Index()
{
return View();
}
//load the JSON
[HttpGet]
public JsonResult GetStudentList()
{
var list = new List<Student>()
{
new Student{Id=1,RegNo="Bcs153048",Name="Ali",Age=21,},
new Student{Id=2,RegNo="Bcs153044",Name="Talha",Age=22,},
new Student{Id=3,RegNo="Bcs153064",Name="Luqman",Age=20,},
new Student{Id=4,RegNo="Bcs153054",Name="Saad",Age=19,},
new Student{Id=5,RegNo="Bcs153036",Name="Hashir",Age=20,},
};
return Json(list , JsonRequestBehavior.AllowGet);
}
"Student/Index" View:
<table id="students" class="table table-bordered table-hover">
<thead>
<tr>
<th>Id</th>
<th>Registration No</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody></tbody>
</table>
#section scripts
{
<script>
$(document).ready( function () {
var dataTable = $("#students").DataTable({
ajax: {
url: '#Url.Action("GetStudentList", "student")', //note the use of a HTML helper to generate the correctly routed URL, and also the change of action name to "GetStudentList"
dataSrc: "",
},
columns: [
{
data: "Id"
},
{
data: "RegNo",
},
{
data: "Name"
},
{
data: "Age",
}
]
});
});
</script>
}