Liste des objets à JSON en Html Table?

Question

Si j'ai une liste d'objets

IEnumerable<MyType> myTypes; 

Est-il possible pour moi de retourner cela au client comme JSON

return Json(myTypes); 

et si oui, est-il possible pour moi de convertir ce (maintenant Format JSON) liste à un <table> quand il arrive au client?

Y at-il un plugin jQuery pour cela? En fait, il y a beaucoup d'autres choses que je dois envoyer en JSON, donc générer une table avec une Vue Partielle et l'incorporer dans le JSON est une complexité supplémentaire que j'aimerais éviter.

Answer 1

je suis venu avec ma propre solution pour un problème similaire, je voulais être en mesure d'afficher une réponse de tableau d'objets JSON dans un belle table sans avoir à coder dur quelque chose dans le JavaScript donc c'était réutilisable!

Voici ce que je faisais ...

<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> 

Cela est en train de faire le tirage des données du service Web à la page, la partie importante de ce code est l'appel à la « CreateDynamicTable() » qui convertit le tableau d'objets JSON en une jolie table HTML. Voici le code, la sortie est une jolie table de HTML. J'ai également cherché quelque chose de gratuit pour le faire, mais tout ce que j'ai trouvé était commercial ou obligatoire des valeurs de colonnes de codage. J'ai fait un blog rapide avec des détails supplémentaires, une capture d'écran et une démo de VS 2008. Dans l'ensemble, cela fonctionne parfaitement pour ce dont j'avais besoin.

Blog Article on JSON data to HTML Table

Answer 2

Ce n'est pas une table HTML, exactement, mais j'utilise jqGrid avec le helper functions de Craig Stuntz pour "exporter" n'importe quel IQueryable<T> comme JSON. La fonction d'aide ToJqGridData envoie JSON exactement le format requis par jqGrid, de sorte que votre code est agréable et soigné:

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); 

Soyez conscient que vous aurez également besoin de mettre à jour les paramètres globaux pour vos jqGrids pour les rendre compatibles avec le conventions de nommage utilisées par ToJqGridData (I comprennent simplement ce script dans ma page principale):

$(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 
      }); 
     } 
    } 
};