Список объектов для таблицы 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> 

Это делает потянув данных из веб-службы на странице, важная часть этого кода является вызов «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 вместе с helper functions от Craig Stuntz, чтобы «экспортировать» любые 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 
      }); 
     } 
    } 
};