如何使用Razor Pages实现带复选框的可交互层级树形视图

问题核心原因 #

• Razor Pages的PageModel为瞬时对象，每次HTTP请求都会生成新实例，未做绑定和持久化的属性每次都会重置为初始值
• 前端复选框未绑定后端状态值，整页重载时会默认恢复未选中状态
• 测试代码中的booTest未添加绑定特性，POST请求时无法获取前端提交的最新值，也未做持久化存储，修改后的值无法在下次页面加载时保留

具体修复步骤 #

1. 后端属性绑定与持久化 #

给需要保留状态的属性添加[BindProperty]特性，确保POST请求时能自动接收前端提交的值：

// PageModel中定义属性
[BindProperty]
public bool booTest { get; set; }

// TreeNode的状态如果需要持久化，建议将boolData字段同步存储到数据库对应节点的字段中，每次页面初始化时从数据库读取最新状态

如果仅需要临时存储状态，也可以使用Session存储：

// 存储状态
HttpContext.Session.SetBoolean("booTest", booTest);
// 页面初始化时读取状态
booTest = HttpContext.Session.GetBoolean("booTest") ?? false;

2. 前端复选框绑定后端状态 #

给所有复选框添加checked属性，绑定对应TreeNode的状态值，页面重载后会自动匹配后端状态：

<!-- 根节点复选框示例 -->
<input type="checkbox"
       checked="@Model.tree_List[0].boolData"
       onclick="requestMyAction('@Model.tree_List[0].board_id', this.checked, 'loader-@Model.tree_List[0].dataName');" />

<!-- 递归生成子节点的位置同步修改 -->
<input type="checkbox"
       checked="@tn.boolData"
       onclick="requestMyAction('@tn.board_id', this.checked, 'loader-@tn.dataName');" />

3. 优先使用AJAX局部更新（推荐） #

你已经实现了JS调用后端接口，完全不需要整页重载，修改后端Handler返回子节点的HTML片段或者结构化数据，前端收到后局部更新页面即可，不会触发整页刷新，自然不会丢失状态：

// 后端Handler示例
public IActionResult OnPostMyAction(string itemName, bool deploy)
{
    // 处理业务逻辑，查询对应节点的子节点
    var childNodes = _context.TreeNodes.Where(x => x.ParentId == itemName).ToList();
    // 返回局部视图或者JSON结构
    return Partial("_ChildNodesPartial", childNodes);
}

在JS请求成功的回调函数中，把返回的HTML插入到对应节点区域即可完成更新。

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