在 MVC 视图中将 json 数据显示为表格答案

【问题标题】：Display json data as table in view of MVC在 MVC 视图中将 json 数据显示为表格
【发布时间】：2015-12-31 06:40:40
【问题描述】：

我正在使用 MVC 4 应用程序。我正在尝试将 json 数据绑定到视图中的表，该表在视图页面中反映为表视图。

这是我的控制器代码....

if (reportType == "Report")
{
    result = client.GetApiRequest("api/TurnoverReport/get?packageID=" + Convert.ToInt32(packageID)).Result;
}

这里的结果是一个数据表，它将输出数据保存为数据表。

要将表格传递给 View，我将表格序列化为：

System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
            List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
            Dictionary<string, object> row = new Dictionary<string, object>();
            row.Add("text", result);
            rows.Add(row);

var test = JsonConvert.SerializeObject(rows, Formatting.Indented,
                        new JsonSerializerSettings
                        {
                            ReferenceLoopHandling = ReferenceLoopHandling.Ignore
                        });

return Json(serializer.Serialize(test), JsonRequestBehavior.AllowGet);

这里我使用的是 jsonconvert，因为我收到了类似

的错误消息

在序列化“System.Globalization.CultureInfo”类型的对象时检测到循环引用。

所以，这个 json 将数据返回为：

我尝试在视图中显示，但我无法获得预期的结果.. 这是查看代码；

 function GenerateReport(packageID) {
    var repType = '@ViewBag.ReportType';
    $.ajax({
        url: '/turnover/GetTurnover' + repType,//?packageID=' + packageID,
        data: { "packageID": packageID },
        cache: false,
        type: 'POST',
        datatype: 'JSON',
        success: function (response) {
            debugger;

【问题讨论】：

您面临什么问题？你能在 ajax 调用中得到响应吗？
我正在将数据放入“响应”中......现在我需要在此处将其显示为表格，我不知道如何...... @FrebinFrancis
首先请把json作为文本而不是图像
@htiru jsfiddle.net/mjaric/sewm6 请看看这个
@htiru 所以首先你需要获取列列表（标题）以及记录列表，并在渲染值之前先渲染标题列（）（) 就像你在 JSfiddle 中看到的那样。

标签： c# jquery .net asp.net-mvc asp.net-mvc-4

【解决方案1】：

你可以在你的javascript方法中试试这个

function GenerateReport(packageID) {
    var repType = '@ViewBag.ReportType';
    $.ajax({
        method: "POST",
        url: '/turnover/GetTurnover' + repType,//?packageID=' + packageID,
        data: '{"packageID":' + packageID + '}',
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            //loop to data.text
            $.each(data.text, function( index, row ) {
               console.log(row);
            });
        }

【讨论】：