ASP.Net MVC：带有动态列的jQuery数据表与JSON绑定

Question

我正在尝试将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"
               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。

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

我无法理解我在哪里犯了错误。数据显示在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>

课程

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; }
     }