Datatables.net 2 Tabbed Table Ajax Get ASP.NET - asp.net

Question

I have a single Datatable configured using Datatables.net where I'm using bootstrap tabs to load a different dataset when a different tab is selected.
Ive configured it by referencing these two examples:
http://live.datatables.net/sozobucu/41/edit and http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=create-dynamic-tabs-via-data-attribute.
When I run the application, I see that both Ajax Posts are submitted simultaneously and that the MVC controller switches back and forth line by line between the two ActionResults PopulateObjectATables and PopulateObjectBTables when I debug. I also notice that the JSON the app prepares to return looks correct at the time of the method return.
The issue is that the tab for ObjectA loads correctly and the JSON is returned from the server. However, I receive an error for ObjectB that refers me to http://datatables.net/tn/7 and in firebug I see that HTML is returned instead of JSON and a 502.3 Bad Gateway error is received.
As I see the correct JSON being prepared and both MVC ActionResults are written the same Ive ran out of things that I know to look for.
Scripts
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/lib/respond/dest/respond.min.js"></script>
<script src="~/lib/datatables/media/js/jquery.dataTables.js"></script>
<script src="http://cdn.datatables.net/responsive/1.0.6/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css" />
<link href="//cdn.datatables.net/responsive/1.0.6/css/dataTables.responsive.css" rel="stylesheet" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
#*<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css"/>*#
<link rel="stylesheet" href="~/css/site.css"/>
#*<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>*#
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="~/lib/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js"></script>
<script src="~/lib/angular/angular.js"></script>
<script src="~/lib/angular-datatables/dist/angular-datatables.js"></script>
View
#model NewInventory.ViewModels.ExampleAllViewModel
<p>
#Html.ActionLink("Create New", "Create")
</p>
<div class="container">
<div class="row">
<div class="well well-lg">
<ul class="nav nav-tabs">
<li class="active objectA-tab"><a data-toggle="tab" role="tab" data-target="#ObjectAData">Object A</a></li>
<li class="objectB-tab"><a data-toggle="tab" role="tab" data-target="#ObjectBData">Object B</a></li>
</ul>
<div class="tab-content">
<div id="ObjectAData" class="tab-pane fade in active" role="tabpanel">
<table id="ObjectATable1" class="table dt-responsive" cellspacing="0" style="width:100%">
<thead>
<tr>
<th>Example1</th>
<th>Example2</th>
<th>Example3</th>
<th>Example4</th>
<th>Example5</th>
<th>Example6</th>
<th>Example7</th>
<th>Example8</th>
<th>Example9</th>
</tr>
</thead>
</table>
</div>
<div id="ObjectBData" class="tab-pane fade in" role="tabpanel">
<table id="ObjectBTable1" class="table dt-responsive" cellspacing="0" style="width:100%">
<thead>
<tr>
<th>Example1</th>
<th>Example2</th>
<th>Example3</th>
<th>Example4</th>
<th>Example5</th>
<th>Example6</th>
<th>Example7</th>
<th>Example12</th>
<th>Example13</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('[data-toggle="popover"]').popover();
});
</script>
<script>
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
</script>
<script>
$(document).ready(function () {
$("a[data-toggle=\"tab\"]").on("shown.bs.tab", function (e) {
console.log('show tab');
$($.fn.dataTable.tables(true)).DataTable()
.columns.adjust()
.responsive.recalc();
});
$("#ObjectATable1").dataTable({
"bServerSide": true,
"sAjaxSource": "PopulateObjectATables",
"bProcessing": true,
"ordering": false,
"paging": false,
"scrollY": "150px",
"searching": false,
"info": false,
"columns": [
{ "data": "Example1" },
{ "data": "Example2" },
{ "data": "Example3" },
{ "data": "Example4" },
{ "data": "Example5" },
{ "data": "Example6" },
{ "data": "Example7" },
{ "data": "Example8" },
{ "data": "Example9" }]
//"deferRender": true,
});
$("#ObjectBTable1").dataTable({
"bServerSide": true,
"sAjaxSource": "PopulateObjectBTables",
"bProcessing": true,
"ordering": false,
"paging": false,
"scrollY": "150px",
"searching": false,
"info": false,
//"deferRender": true,
"columns": [
{ "data": "Example1" },
{ "data": "Example2" },
{ "data": "Example3" },
{ "data": "Example4" },
{ "data": "Example5" },
{ "data": "Example6" },
{ "data": "Example7" },
{ "data": "Example12" },
{ "data": "Example13" }
]
});
});
</script>
MVC Controller ActionResults
public ActionResult PopulateObjectATables(jQueryDataTableParamModel param)
{
ExampleAllViewModel myVM = new ExampleAllViewModel();
List<ObjectA> ObjectAList = new List<ObjectA>(_repository.GetAllObjectA().ToList());
myVM.ListObjectA = ObjectAList;
return Json(new
{
sEcho = param.sEcho,
iTotalRecords = myVM.ListObjectA.Count(),
iTotalDisplayRecords = myVM.ListObjectA.Count(),
aaData = myVM.ListObjectA
});
}
public ActionResult PopulateObjectBTables(jQueryDataTableParamModel param)
{
ExampleAllViewModel myVM = new ExampleAllViewModel();
List<ObjectB> ObjectBList = new List<ObjectB>(_repository.GetAllObjectB().ToList());
myVM.ListObjectB = ObjectBList;
return Json(new
{
sEcho = param.sEcho,
iTotalRecords = myVM.ListObjectB.Count(),
iTotalDisplayRecords = myVM.ListObjectB.Count(),
aaData = myVM.ListObjectB
});
}

Answer 1

Although the errors themselves were not very descriptive or indicative of the root cause I was able to finally get the table ajax calls working once I realized the only difference between my two MVC ActionResult methods.
For ObjectB, inside of my repository method List<ObjectB> ObjectBList = new List<ObjectB>(_repository.GetAllObjectB().ToList()); I was eager loading a related entity along with ObjectB. However for ObjectA I was only returning ObjectA from the database.
Once I removed the include as shown below, the errors resolved.
return _context.ObjectB.ToList();
//return _context.ObjectB.Include(x => x.ObjectC).ToList();