MVC and Ajax datatable with JSON

Question

Hi Sir,

 

I have a controller which sends json data to a view and the view supposed to grab that json data and display in the datatable Ajax. but instead view is displaying just RAW json data.

 

my Controller code is -

public ActionResult Index2()
{

using (Model_Test dbObj = new Model_Test())
{
List<Test_Table> testList = dbObj.Test_Table.ToList<Test_Table>();
var obj = new { data = testList };
return Json(obj, JsonRequestBehavior.AllowGet);
}
}

my View code is -

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<br />
<br />
<table id="abc" class="display">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
</table>
<br />
<br />
<link href="~/Content/jquery.dataTables.min.css" rel="stylesheet" />
@section Scripts{
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#abc').DataTable({
"ajax": {
"url": "/Test_Table/Index2",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "Id", "autoWidth": true },
{ "data": "Name", "autoWidth": true },
{ "data": "Address", "autoWidth": true }
]
});
});
</script>
}

I tested the datatable with static data and it works fine. so it should be something to do with controller json output. Please help me I am so stuck.

 

Thanks