将JSON转换为Html表的对象列表？

Question

如果我有对象的列表

IEnumerable<MyType> myTypes; 

是否有可能对我来说，返回给客户作为JSON

return Json(myTypes); 

如果有的话，是有可能对我来说，转换这种（现JSON格式）列表到<table>当它到达客户端？

是否有任何jQuery插件来做到这一点？

事情是，我还需要将其他东西作为JSON发送，因此使用PartialView生成表并将其嵌入到JSON中是一个额外的复杂性，我希望避免。

Answer 1

我来到了我自己的一个类似的问题的解决方案，我希望能够显示任何JSON对象数组响应成漂亮的桌子，而不必在JavaScript中硬编码任何东西，所以它是可重用的！

这里是我做过什么......

<script type="text/javascript"> 
    $(document).ready(function() { 
     $.ajax({ 
      type: "POST", 
      url: "DemoSvc.asmx/GetJSONTableContents", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      data: "{}", 
      success: function(res) { 
       $('#<%= DynamicGridLoading.ClientID %>').hide(); 
       $('#<%= DynamicGrid.ClientID %>').append(CreateDynamicTable(res.d)).fadeIn(); 
      } 
     }); 
    }); 
</script> 

这是做数据从Web服务到页面的拉动，该代码的重要组成部分，是在调用“CreateDynamicTable（）”将JSON对象数组转换为漂亮的HTML表格。下面是代码，输出是一个漂亮的HTML表格。

function CreateDynamicTable(objArray) { 
    var array = JSON.parse(objArray); 

    var str = '<table class="lightPro">'; 
    str += '<tr>'; 
    for (var index in array[0]) { 
     str += '<th scope="col">' + index + '</th>'; 
    } 
    str += '</tr>'; 
    str += '<tbody>'; 
    for (var i = 0; i < array.length; i++) { 
     str += (i % 2 == 0) ? '<tr class="alt">' : '<tr>'; 
     for (var index in array[i]) { 
      str += '<td>' + array[i][index] + '</td>'; 
     } 
     str += '</tr>'; 
    } 
    str += '</tbody>' 
    str += '</table>'; 
    return str; 
    } 

我也在寻找一些免费的东西来做到这一点，但我发现的一切都是商业或需要硬编码列值。我做了一个快速的博客文章，提供了更多的细节，屏幕快照和简单的VS 2008演示。总的来说，它适用于我所需要的。

Blog Article on JSON data to HTML Table

Answer 2

这不是一张HTML表格，但我使用jqGrid以及Craig Stuntz的helper functions将任何IQueryable<T>“导出”为JSON。助手功能ToJqGridData发送JSON恰好由jqGrid的要求的格式，所以你的代码是好的，整齐：

MyObjectRepository rep = new MyObjectRepository(); 
var myObjects = from o in rep.SelectAll() 
       select new 
       { 
        Prop1 = o.Prop1, 
        Prop2 = o.Prop2 
        ... 
       } 
return Json(apps.ToJqGridData(page, rows, sidx, null, null), JsonRequestBehavior.AllowGet); 

要知道，你还需要更新您jqGrids全局设置，以使它们与兼容通过ToJqGridData使用的命名约定（我只是包括在我的母版页这个脚本）：

$(document).ready(function() { 
    GridDemo.SiteMaster.setDefaults(); 
}); 

var GridDemo = { 
    Home: { 
     GridDemo: {} 
    }, 
    SiteMaster: { 
     setDefaults: function() { 
      $.jgrid.defaults = $.extend($.jgrid.defaults, { 
       datatype: 'json', 
       height: 'auto', 
       imgpath: '/Scripts/jqGrid/themes/lightness/images', 
       jsonReader: { 
        root: "Rows", 
        page: "Page", 
        total: "Total", 
        records: "Records", 
        repeatitems: false, 
        userdata: "UserData", 
        id: "Id" 
       }, 
       loadui: "block", 
       mtype: 'GET', 
       multiboxonly: true, 
       rowNum: 20, 
       rowList: [10, 20, 50], 
       viewrecords: true 
      }); 
     } 
    } 
};