在Razor pages中使用树对象的模型绑定和递归呈现？

// TreeNode.cs
public class TreeNode
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<TreeNode> Children { get; set; }
}

// Tree.cshtml.cs
public class TreeModel : PageModel
{
    [BindProperty]
    public TreeNode Tree { get; set; }

    public void OnGet()
    {
        // 初始化树对象
        Tree = new TreeNode
        {
            Id = 1,
            Name = "Root",
            Children = new List<TreeNode>
            {
                new TreeNode { Id = 2, Name = "Child 1" },
                new TreeNode
                {
                    Id = 3,
                    Name = "Child 2",
                    Children = new List<TreeNode>
                    {
                        new TreeNode { Id = 4, Name = "Grandchild 1" },
                        new TreeNode { Id = 5, Name = "Grandchild 2" }
                    }
                }
            }
        };
    }
}

// Tree.cshtml
@page
@model TreeModel

<form>
    <div>
        <label asp-for="Tree.Name"></label>
        <input asp-for="Tree.Name" />
    </div>
    <div>
        <label asp-for="Tree.Children"></label>
        <ul>
            @foreach (var child in Model.Tree.Children)
            {
                <li>
                    <label asp-for="child.Name"></label>
                    <input asp-for="child.Name" />
                    @if (child.Children != null && child.Children.Count > 0)
                    {
                        <ul>
                            @foreach (var grandchild in child.Children)
                            {
                                <li>
                                    <label asp-for="grandchild.Name"></label>
                                    <input asp-for="grandchild.Name" />
                                </li>
                            }
                        </ul>
                    }
                </li>
            }
        </ul>
    </div>
    <button type="submit">提交</button>
</form>