如何在Razor Page中实现Treeview，递归实现及JsonResult返回HTML问题咨询

现有方案合理性说明 #

你采用递归构建树形节点的核心思路是合理的，但直接在后端拼接HTML并封装到JsonResult的实现方式存在缺陷，会导致代码耦合度高、易出现语法错误，也是你当前问题的诱因。

问题根因 #

• 拼接HTML时存在语法错误：loader元素的id属性多写了多余的单引号，导致HTML结构断裂，浏览器解析异常
• JsonResult返回的是序列化后的JSON对象，直接访问.Value无法正确获取你写入的HTML字符串，导致渲染为空
• 递归逻辑被注释，无法生成完整的多层级树形结构

修复步骤 #

1. 修正递归生成HTML方法 #

将返回值从JsonResult改为字符串类型，修复语法错误，补全递归逻辑：

string UpdateRecursiveData(TreeNode tn)
{
    // 修正引号拼接错误，正确生成当前节点HTML
    var currentHtml = $"""
        <input type='checkbox' onclick="requestMyAction('{tn.board_id}', this.checked, 'loader-{tn.dataName}');" />
        <div class='loader' style='display: none;' id='loader-{tn.dataName}'>{tn.dataName}</div>
        <br />
    """;
    // 递归生成子节点HTML，增加缩进区分层级
    if (tn.subTreeNodes is { Count: > 0 })
    {
        currentHtml += "<div style='margin-left: 20px;'>";
        foreach (var subNode in tn.subTreeNodes)
        {
            currentHtml += UpdateRecursiveData(subNode);
        }
        currentHtml += "</div>";
    }
    return currentHtml;
}

2. 修改PageModel属性定义 #

将存储HTML的属性从JsonResult改为字符串类型，OnGet中直接赋值：

// PageModel中修改属性类型
public string RenderedTreeHtml { get; set; }

// OnGet方法中修改赋值逻辑
RenderedTreeHtml = UpdateRecursiveData(tree_List[1]);

3. 修正前端渲染逻辑 #

直接输出拼接好的HTML字符串即可：

<div id="data">
    @Html.Raw(Model.RenderedTreeHtml)
</div>

优化建议 #

如果需要长期维护该功能，更推荐将TreeNode数据序列化为JSON传到前端，通过前端模板/现成树形组件（如jsTree、zTree）渲染，可大幅降低前后端耦合度，减少拼接HTML导致的语法错误。

内容的提问来源于stack exchange，提问作者로다현