【问题标题】:Table not populated from json data in variable表未从变量中的 json 数据填充
【发布时间】:2017-11-15 15:33:34
【问题描述】:

我在 MVC 应用程序中使用 BoostrapTable。控制器正在返回一些数据,如下所示:

model.DataAsJson = JsonConvert.SerializeObject(model.Entities.Select(x => x.DataProperties));

我的客户端看起来像这样(sn-p):

<table id="table"></table>

<script type="text/javascript">
$('#table').bootstrapTable({
    data: '@Model.DataAsJson',
    //url: 'ms.json', 
    columns: [{
        field: 'ClientFileNo',
        title: 'Case No'
    }, {
        field: 'ClientName',
        title: 'Customer Name'
    }]
});

生成的 Json 如下所示:

[{
    "RowNum": "2",
    "ID": "XXX",
    "ClientFileNo": "XXX",
    "Description": "XXX",
    "ClientName": "XXX",
    "TypeDescription": "XXX",
    "PrincipleName": "XXX",
    "Created": "2017-11-08T10:31:23.673Z"
  },
  {
    "RowNum": "3",
    "ID": "XXX",
    "ClientFileNo": "XXX",
    "Description": "XXX",
    "ClientName": "XXX",
    "TypeDescription": "XXX",
    "PrincipleName": "XXX",
    "Created": "2017-11-01T12:29:08.763Z"
  }
]

如果我将 SerializeObject() 调用的结果粘贴到 json 文件中并传递给 url 属性,则表格会按预期填充。但是,如果我使用 data 属性和 @Model.DataAsJson,那么我的表中有数千个空行,每列中都有一个“-”

我看到了对 responseHandler 属性的引用,我尝试为我的 JSON 数组提供一个名称,如下所示,但它并没有解决我的问题:

model.DataAsJson = JsonConvert.SerializeObject(new
        {
            jsonData = model.Entities.Select(x => x.DataProperties)
        });

<script type="text/javascript">
$('#table').bootstrapTable({
    data: '@Model.DataAsJson',
    responseHandler: function (res) {
        res.jsonData
    },

谁能明白为什么会发生这种情况?

【问题讨论】:

    标签: json bootstrap-table


    【解决方案1】:

    好吧,万一其他人被它抓住了。

    我修改了js来读取模型数据如下:

    $('#table').bootstrapTable({
    data: @Html.Raw(Model.DataAsJson)
    

    所以我删除了撇号并添加了 Html.Raw。我通过在 Chrome 调试器中查看数据来实现这一点,并且可以看到它已被编码。此外,我遇到了一些进一步的问题,因为我正在使用的遗留代码库在部分视图中包含脚本,并且 Chrome 调试器没有达到调试点。我通过添加来排序:

    debugger;
    

    我希望它打破的地方。

    谢谢,希望这对其他人有所帮助。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-02-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多