ASP.Net MVC :Jquery 数据表，动态列与 JSON 绑定

Question

我试图将jquery数据表与json绑定为动态列。 我在 MVC 操作级别为 Column 和数据生成 JSON。 我可以将数据与 JSON 绑定并且数据显示，但列名称未显示。 我还用 JSON 绑定列。

请参阅 MVC 操作代码

从那里我生成两组 JSON。 一组用于列，一组用于数据。

var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
TestData t = new TestData();
List<columnsinfo> _col = new List<columnsinfo>();
DataTable dt = new DataTable();
dt.Columns.Add("ID", typeof(Int32));
dt.Columns.Add("Name", typeof(string));
DataRow dr = dt.NewRow();
dr[0] = 1;
dr[1] = "Ajay";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = 2;
dr[1] = "Sanu";
dt.Rows.Add(dr);
for (int i = 0; i <= dt.Columns.Count - 1;i++ )
{
_col.Add(new columnsinfo { data = dt.Columns[i].ColumnName });
}
string col =  (string)serializer.Serialize(_col);
t.columns = col;

var lst = dt.AsEnumerable()
.Select(r => r.Table.Columns.Cast<DataColumn>()
.Select(c => new KeyValuePair<string, object>(c.ColumnName, r[c.Ordinal])
).ToDictionary(z => z.Key, z => z.Value)
).ToList();
string data= serializer.Serialize(lst);
t.data = data;
return View(t);

我的视图代码

@model JQDataTable.Controllers.TestData
@{
Layout = "";
ViewBag.Title = "Home Page";
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js "></script>
<div style="display:none;" class="row">
<div class="form-group">
@Html.HiddenFor(m => m.columns, new { @id = "dataObjCol", placeholder = Html.DisplayNameFor(m => m.columns), @class = "form-control" })
@Html.HiddenFor(m => m.data, new { @id = "dataObjData", placeholder = Html.DisplayNameFor(m => m.data), @class = "form-control" })
</div>
</div>
<hr />
<div class="row">
<div>
<table class="table table-striped table-bordered table-hover"
id="TableId"
cellspacing="0"
align="center"
width="30%" border="1"></table>
</div>
</div>
<hr />
<script type="text/javascript">
$(document).ready(function () {
//debugger;
alert($('#dataObjCol').val());
var dataObjCol = JSON.parse($('#dataObjCol').val());
var dataObjData = JSON.parse($('#dataObjData').val());
// Datatable settings.
$('#TableId').DataTable(
{
"data": dataObjData,
"columns": dataObjCol,
"bPaginate": false,
"bFilter": false,
"bInfo": false,
"autoWidth": false,
"bSort": false,
"columnDefs": [
{
"width": "28px",
"targets": "0",
"className": "text-right"
},
{
"width": "2px",
"targets": "1",
"className": "text-right"
}
]
});
});
</script>

这是我的两组 json。

Json 表示列[{"data":"ID"},{"data":"Name"}]Json 表示数据[{"ID":1,"Name":"Ajay"},{"ID":2,"Name":"Sanu"}]

我无法理解我在哪里犯了错误。 数据显示在 jQuery 数据表中，但列名没有出现。 如果可能的话，把我推向正确的方向。 谢谢

Answer 1

对不起，我只是可以解决它。 当我在列中添加标题和数据时，问题就消失了。

查看我的工作代码

var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
TestData t = new TestData();
List<columnsinfo> _col = new List<columnsinfo>();
DataTable dt = new DataTable();
dt.Columns.Add("ID", typeof(Int32));
dt.Columns.Add("Name", typeof(string));
DataRow dr = dt.NewRow();
dr[0] = 1;
dr[1] = "Ajay";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = 2;
dr[1] = "Sanu";
dt.Rows.Add(dr);
for (int i = 0; i <= dt.Columns.Count - 1;i++ )
{
_col.Add(new columnsinfo { title = dt.Columns[i].ColumnName, data = dt.Columns[i].ColumnName });
}
string col =  (string)serializer.Serialize(_col);
t.columns = col;

var lst = dt.AsEnumerable()
.Select(r => r.Table.Columns.Cast<DataColumn>()
.Select(c => new KeyValuePair<string, object>(c.ColumnName, r[c.Ordinal])
).ToDictionary(z => z.Key, z => z.Value)
).ToList();
string data= serializer.Serialize(lst);
t.data = data;
return View(t);

剃须刀代码

@model JQDataTable.Controllers.TestData
@{
Layout = "";
ViewBag.Title = "Home Page";
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js "></script>
<div style="display:none;" class="row">
<div class="form-group">
@Html.HiddenFor(m => m.columns, new { @id = "dataObjCol", placeholder = Html.DisplayNameFor(m => m.columns), @class = "form-control" })
@Html.HiddenFor(m => m.data, new { @id = "dataObjData", placeholder = Html.DisplayNameFor(m => m.data), @class = "form-control" })
</div>
</div>
<hr />
<div class="row">
<div>
<table class="table table-striped table-bordered table-hover"
id="TableId"
cellspacing="0"
align="center"
width="30%" border="1"></table>
</div>
</div>
<hr />
<script type="text/javascript">
$(document).ready(function () {
//debugger;
alert($('#dataObjCol').val());
var dataObjCol = JSON.parse($('#dataObjCol').val());
var dataObjData = JSON.parse($('#dataObjData').val());
// Datatable settings.
$('#TableId').DataTable(
{
"data": dataObjData,
"columns": dataObjCol,
"bPaginate": false,
"bFilter": false,
"bInfo": false,
"autoWidth": false,
"bSort": false,
"columnDefs": [
{
"width": "28px",
"targets": "0",
"className": "text-right"
},
{
"width": "2px",
"targets": "1",
"className": "text-right"
}
]
});
});
</script>

.class

public class TestData
{
public string jsondata { get; set; }
public string columns { get; set; }
public string data { get; set; }
}
public class columnsinfo
{
public string title { get; set; }
public string data { get; set; }
}