ASP.Net MVC：具有动态列的 Jquery 数据表与 JSON 绑定
Posted
技术标签:
【中文标题】ASP.Net MVC：具有动态列的 Jquery 数据表与 JSON 绑定【英文标题】：ASP.Net MVC :Jquery Data table with dynamic column bind with JSON 【发布时间】：2020-04-04 00:44:59 【问题描述】：我试图将 jquery 数据表与动态列的 json 绑定。我在 mvc 操作级别为列和数据生成 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"
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 数据表中，但列名未出现。如果可能的话，把我推向正确的方向。谢谢
【问题讨论】：
【参考方案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"
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>
类
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;
【讨论】：
以上是关于ASP.Net MVC：具有动态列的 Jquery 数据表与 JSON 绑定的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jquery unobtrusive 和 Asp.Net Mvc 验证动态生成的单选按钮组？
如何使用jQuery unobtrusive和Asp.Net Mvc验证动态生成的单选按钮组？