Question

我有一个要求，我需要将任何JSON显示为HTML表格，并能够尽可能轻松地对其进行格式化。

我如何使用PartialView以递归方式呈现任何表格，以便可以看到大部分细节？

Answer 1

我发现最好的方法是使用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>

Answer 2

    public class MyClass
    {
        public string name { get; set; }
    }

    var converted = JsonConvert.DeserializeObject<MyClass>(Json);

如何将动态JSON转换为HTML表

2 个答案: