C# MVC JsonResult 动态数据表格

Question

我有一个MVC应用程序，需要从SQL数据库中将表格绘制到Web上。但是我无法预先创建一个表格的模型，因此我在CSHTML文件中使用JavaScript代码动态创建了一个DataTable：

var data,
  tableName = "#demotable",
  columns,
  str,
  jqxhr = $
    .ajax({
      data: { str: JSON.stringify("kurator") },
      url: MyAppUrlSettings.MyUsefulUrl,
      type: "GET",
      datatype: "json"
    })
    .done(function() {
      data = JSON.parse(jqxhr.responseText);
      debugger;
      // Iterate each column and print table headers for Datatables
      $.each(data.columns, function(k, colObj) {
        str = "<th>" + colObj.data + "</th>";
        $(str).appendTo(tableName + ">thead>tr");
        debugger;
      });
      // Add some Render transformations to Columns
      // Not a good practice to add any of this in API/ Json side
      data.columns[0].render = function(data, type, row) {
        return "<h4>" + data + "</h4>";
        debugger;
      };
      // Debug? console.log(data.columns[0]);
      $(tableName).dataTable({
        data: data.data,
        columns: data.columns,
        fnInitComplete: function() {
          // Event handler to be fired when rendering is complete (Turn off Loading gif for example)
          console.log("Datatable rendering complete");
        }
      });
      debugger;
    });

我需要从ControllerAction返回一个JSON对象的数组。这是我创建DataTable的方式：

DataTable dt = new DataTable();

List<string> _columns = new List<string>() { "Kurator", "Filial", "Klient", "Saldo", "Docs", "no_Docs", "Change", "Status" };

for (int i = 0; i < _columns.Count; i++)
{
  cols.Add(new Columns { ColumnID = "data", ColumnName = _columns[i] });
  dt.Columns.Add(_columns[i], typeof(string));
}

// Add rows to Table

DataRow _ravi;

_ravi = dt.NewRow();                    

dt.Rows.Add(_ravi);

然后，最后，我需要将列和数据数组放入JsonResult中：

var data2 = debitor.Select(p => new {
  Kurator = p.Kurator,
  Filial = p.Filial,
  Klient = p.Klient,
  Saldo = p.Saldo,
  Docs = p.Docs,
  no_Docs = p.no_Docs,
  Change = p.Change,
  Status = p.Status
});

// var data1 = JsonConvert.DeserializeObject(data);

// var data = new JavaScriptSerializer().Serialize(dt, Formatting.Indented);

// JObject rss =  new JObject(new JProperty("title", "James Newton-King"));

var columns = cols.Select(p => new {
  data = p.ColumnName
});

return Json(new { data = data2, columns = columns }, JsonRequestBehavior.AllowGet);

这段代码能正常工作，并返回一个对象数组 (当从Model var data2时)，但是当我尝试从我的DataTable中获取行数组时(已注释)，在Json中没有结果。

如何正确将JsonResult放入我的DataTable行中？我不能使用Model，因为我不知道SQL查询结果中会有多少列。

- Roman Kozlov

---

你尝试过使用动态对象吗？https://dev59.com/GHA75IYBdhLWcg3wuLnD - nik0lai

数据库结果就像是一个键值对列表（字段名称和字段值）。 - User.Anonymous

尝试使用以下代码将数据序列化：var data = JsonConvert.SerializeObject(dt); dynamic data1 = System.Web.Helpers.Json.Decode(data); 然后返回 Json(data1 , JsonRequestBehavior.AllowGet); 在 JS 数据中，有一个空对象数组 data.data。以下是浏览器的响应：[{},{},{},{},{},{},{},{},{},{},{},{},{}] - Roman Kozlov

KeyValuePair的列表变成数组，但它的添加"Key"和"Value"到结果: "{"data":[{"Key":"Kurator","Value":1},{"Key":"Filial","Value":2}，所以不能被JS正确解析，它必须是{"data":[{"Kurator",1}... - Roman Kozlov

字符串 json = @"{'Klient':null,'Saldo':'16,866,147.39','Docs':'10,285,201.05','no_Docs':'6,580,946.34','Change':'00.00','Status':'4,141,030.29'}"; dynamic data = System.Web.Helpers.Json.Decode(json); return Json(new {data = data, columns = columns } , JsonRequestBehavior.AllowGet); 在浏览器中的结果是 data:{}....什么都没有...为什么??? - Roman Kozlov

@RomanKozlov 如果您有额外的代码需要展示，请编辑您的问题。在评论中展示代码几乎是无法阅读的。 - ADyson

Answer 1

从我的角度来看，这个问题有点复杂。

如果您正在使用 Microsoft.AspNetCore.Mvc 的 JsonResult 类，它将根据输入参数产生以下结果：

当与 List<> 一起使用时：

 using Microsoft.AspNetCore.Mvc;

 class SomeClass 
 {
     public string value1 {get; set;}
     public int value2 {get; set;}
 }

 // Controller code
 List<SomeClass> result = // Init list using Linq Select or similar
 return new JsonResult(result);

这段代码生成类似于以下 JSON 的数据（对象数组）

{
     [
          { value1: "some string",
            value2: 1
          },
          {
            value1: "another string",
            value2: 20
          }
     ]
}

使用 Dictionary<> 时

class AnotherClass 
{
    public string value1 {get; set;}
    public int value2 {get; set;}
}

// Controller code
// Dictionary should has key which became key in resulting object
Dictionary<string, AnotherClass> result = // Init dictionary 
return new JsonResult(result);

这段代码生成的 JSON 数据是一个大对象，其中 'key1' 和 'key2' 是字典中的键。

{
     key1: { 
               value1: "some string",
               value2: 1
           },
     key2: {
               value1: "another string",
               value2: 20
          }
}

- Fyodor Yemelyanenko