我有一个需求,即需要将任何JSON显示为HTML表格,并且能够尽可能轻松地进行格式化。如何将动态JSON转换为HTML表格
我将如何去使用PartialView递归地呈现任何表格,以便可以看到大多数细节?
我有一个需求,即需要将任何JSON显示为HTML表格,并且能够尽可能轻松地进行格式化。如何将动态JSON转换为HTML表格
我将如何去使用PartialView递归地呈现任何表格,以便可以看到大多数细节?
我发现最好的方法是使用Newtonsoft.Json来动态分析数据并能够轻松地进行格式化。
主视图:
@{
var converted = JsonConvert.DeserializeObject(Model.JsonData);
if (converted is JObject)
{
isMultiLevel = true;
}
else if (converted is JArray)
{
isSingleLevel = true;
}
}
@if (isMultiLevel)
{
Html.RenderPartial("Details_MultiLevelResult", Model);
}
else if (isSingleLevel) //might not be multiLevel nor singleLevel (if no data)
{
Html.RenderPartial("Details_SingleLevelResult", Model);
}
Details_MultiLevelResult:
@{
JObject json = JsonConvert.DeserializeObject(Model.JsonData) as JObject;
}
<table class="display table table-striped table-bordered" cellspacing="0" style="background-color: white;">
<tbody>
@foreach (var property in json.Properties())
{
<tr>
<td><b>@property.Name</b></td>
<td>
@foreach (var data in property)
{
if (data.Type == JTokenType.Array)
{
<table class="table table-bordered">
<thead>
<tr>
@{
var firstProperty = data.First;
}
@if (firstProperty != null)
{
foreach (JProperty propertyData in firstProperty)
{
<th>@propertyData.Name</th>
}
}
</tr>
</thead>
<tbody>
@foreach (var propertyData in (data as JArray))
{
<tr>
@foreach (JProperty jProperty in propertyData)
{
if (jProperty.HasValues)
{
if (jProperty.Value.Type == JTokenType.Object)
{
var inlineClass = ((JObject)jProperty.Value).Properties();
var result = inlineClass.Select(x => string.Format("<div><b>{0}:</b><span> {1}</span></div>", x.Name, x.Value)).ToList();
string joinedResult = string.Join("", result);
<td>
<div>@Html.Raw(joinedResult)</div>
</td>
}
else
{
<td>@jProperty.Value</td>
}
}
}
</tr>
}
</tbody>
</table>
}
else if (data.Type == JTokenType.Object)
{
var uniqueClass = data as JObject;
<table class="table" style="background-color: white;">
<thead>
<tr>
@{
var classProperties = uniqueClass.Properties()
.Select(x => x.Name)
.ToList();
foreach (var classProperty in classProperties)
{
<th>@classProperty</th>
}
}
</tr>
</thead>
<tbody>
<tr>
@foreach (var classProperty in uniqueClass.Properties())
{
if (classProperty.Value.Type == JTokenType.Object)
{
var inlineClass = ((JObject)classProperty.Value).Properties();
var result = inlineClass.Select(x => string.Format("<div><b>{0}</b> <span>: {1}</span></div>", x.Name, x.Value)).ToList();
string joinedResult = string.Join("", result);
<td>
<div>@Html.Raw(joinedResult)</div>
</td>
}
else
{
<td>@classProperty.Value</td>
}
}
</tr>
</tbody>
</table>
}
else
{
@data
}
}
</td>
</tr>
}
</tbody>
</table>
Details_SingleLevelResult:
@{
JArray jsonAsArray = JsonConvert.DeserializeObject(Model.JsonData) as JArray;
var classes = jsonAsArray
.OfType<JObject>()
.ToList();
var nonClasses = jsonAsArray
.Where(x => x.Type != JTokenType.Object)
.ToList();
}
<table class="table" style="background-color: white;">
<thead>
<tr>
@{
var anyClass = classes.FirstOrDefault();
if (anyClass != null)
{
var properties = anyClass.Properties().Select(x => x.Name).ToList();
foreach (var property in properties)
{
<th>@property</th>
}
}
else
{
<th>Data</th>
}
}
</tr>
</thead>
<tbody>
@foreach (JObject item in classes)
{
<tr>
@foreach (var property in item.Properties())
{
if (property.Value.Type == JTokenType.Array)
{
var model = new MyModel();
model.JsonData = property.Value.ToString();
<td>
@Html.Partial("Details_SingleLevelResult", model)
</td>
}
else if (property.Value.Type == JTokenType.Object)
{
var inlineClass = ((JObject)property.Value).Properties();
var resultado = inlineClass.Select(x => string.Format("<div><b>{0}</b> <span>: {1}</span></div>", x.Name, x.Value)).ToList();
string resultadoUnido = string.Join("", resultado);
<td>
<div>
@Html.Raw(resultadoUnido)
</div>
</td>
}
else
{
<td>@property.Value</td>
}
}
</tr>
}
@foreach (JValue item in nonClasses)
{
<tr>
<td>@item.Value</td>
</tr>
}
</tbody>
</table>
public class MyClass
{
public string name { get; set; }
}
var converted = JsonConvert.DeserializeObject<MyClass>(Json);
这将如何提供帮助? –
你需要包含你的代码的解释。在完整答案中也可以参考。查看[帮助中心](https://stackoverflow.com/help)以获取有关回答问题的更多信息。 –
也许这是对你有用https://stackoverflow.com/questions/ 11981282/convert-json-to-datatable – HTCom
@HTCom这实际上已经解决了,我只是想分享我的答案,以防有人想到更好的方法。但是这个答案是行不通的,因为它需要预先知道的类型 –