我有一个使用Datatables.net配置的数据表，我选择了不同的选项卡时使用引导选项卡加载不同的数据集。
我通过引用这两个例子来配置它： http://live.datatables.net/sozobucu/41/edit和http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=create-dynamic-tabs-via-data-attribute。
当我运行应用程序时，我看到两个Ajax帖子同时提交，并且当我调试时，MVC控制器在两个ActionResults PopulateObjectATables和PopulateObjectBTables之间逐行来回切换。我还注意到应用程序准备返回的JSON在返回方法时看起来是正确的。
问题是ObjectA的选项卡正确加载，并且从服务器返回JSON。但是，我收到ObjectB的错误，它引用了我http://datatables.net/tn/7，在firebug中我看到返回的是HTML而不是JSON，并且收到了502.3 Bad Gateway错误。
正如我看到正在准备的正确JSON并且两个MVC ActionResults都写得一样，我已经用尽了我想知道的东西。
脚本
<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>
查看
@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
});
}
答案 0 :(得分：0)
虽然错误本身并不是非常具有描述性或表明根本原因，但是当我意识到我的两个MVC ActionResult方法之间的唯一区别时，我能够最终获得表ajax调用工作。
对于ObjectB，我的存储库方法List<ObjectB> ObjectBList = new List<ObjectB>(_repository.GetAllObjectB().ToList());内部我急切地想要加载一个相关的实体和ObjectB。但是对于ObjectA，我只从数据库返回ObjectA。
一旦我删除了如下所示的include，错误就解决了。
return _context.ObjectB.ToList();
//return _context.ObjectB.Include(x => x.ObjectC).ToList();