在 Razor 页面中使用带有树对象的模型绑定和递归渲染？

Question

我有这门课：

public class SmartNode
{
    public string Key { get; set; }
    public object Value { get; set; }
    public JsonValueKind ValueKind { get; set; }
    public bool IsFinal { get; set; }
    public int Level { get; set; }
    public SmartNode ParentNode { get; set; }
    public List<SmartNode> SubNodes { get; set; } = new List<SmartNode>();
}

IsFinal 表示该对象表示一个简单的 JSON 节点（字符串、布尔值或数字..）如果 IsFinal 为 false，我会进行递归以获得“最终”属性：

这是剃须刀页面：

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

@{
    if (Model.HeadNode != null)
    {
        using (Html.BeginForm())
        {
            await DrawNode(Model.HeadNode);

            async Task DrawNode(SmartNode node)
            {
                var margin = (node.Level * 20).ToString() + "px";
                if (!node.IsFinal)
                {
                    <h4 style="margin-left:@margin">@node.Key</h4>
                    foreach (var subnode in node.SubNodes)
                    {
                        await DrawNode(subnode);
                    }
                }
                else
                {
                    int i = 0;//temp
                    var id = node.Key + "_" + node.Level;
                    <div>
                        <label for="@id" style="margin-left: @margin">@node.Key</label>
                        @switch (node.ValueKind)
                        {
                            case System.Text.Json.JsonValueKind.Undefined:
                                break;
                            case System.Text.Json.JsonValueKind.Object:
                                break;
                            case System.Text.Json.JsonValueKind.Array:
                                break;
                            case System.Text.Json.JsonValueKind.String:
    
                                <input type="text" name="???.Value" value="@node.Value" id="@id" />
                                break;
                            case System.Text.Json.JsonValueKind.Number:
                                <input type="number" name="???.Value" value="@node.Value" id="@id" />

                                break;
                            case System.Text.Json.JsonValueKind.True:
                            case System.Text.Json.JsonValueKind.False:
                                <input type="checkbox" name="???.Value"
                                       checked="@(node.Value.ToString() == "True")"
                                       value="True" id="@id" />
                                <input name="???.Value" type="hidden" value="False">
                                break;
                            case System.Text.Json.JsonValueKind.Null:
                                <input type="text" name="???.Value" value="@node.Value" id="@id" />
                                break;
                            default:
                                break;
                        }
                    </div>
                }

            }

            <button type="submit">Save</button>
        }
    }
}

问题是如何分配剃刀的输入名称

我使用 .NET 5 Razor 页面。

Answer 1

不要直接在页面上执行此操作，而是创建一个执行渲染的组件，将节点传递给组件，并使组件包含每个子节点的自身实例。

恭喜你现在有了一个递归组件。

Edit1：组件（此处为 SmartTreeView.razor）看起来像这样：

<!-- Maybe some title per node, whatever -->
<h3>@Node.Key - @Node.Value</h3>

<!-- Render node data here, like -->
@if (Node.Value != null)
{
    <DataComponent data="@(Node.Value)" />
}

<!-- Then, recursion -->
@foreach (var node in Node.SubNodes)
{
    <span>@tab</span>
    <SmartTreeView Node="@(node)" />
}



@code {
    private const string tab = "\t";

    [Parameter]
    public SmartNode Node { get; set; }

}

然后页面将<SmartTreeView Node="@(Model.HeadNode)" />放在任何地方。