Razor Pages动态生成树形菜单按钮点击事件失效问题求助

问题背景 #

在Razor Pages中通过递归函数渲染树形菜单，规则为：

• 叶子节点显示Edit、Delete按钮
• 非叶子节点显示Add New Child、Edit按钮
  数据已从数据库加载到MenuItemHierarchy类中，页面能正常展示树形结构和按钮，但点击按钮无法跳转到对应页面，生成的页面源码外观正常。

数据库表数据 #

ID  Name        Description Icon ParentId FunctionalityId
1   M1          Top M1      NULL 0        NULL
2   M2          Top M2      NULL 0        NULL
3   M3          Top M3      NULL 0        NULL
4   M4          Top M4      NULL 0        NULL
5   M1m1        M1m1        NULL 1        NULL
6   M1m2        M2m2        NULL 1        NULL
7   M1m3        M1m3        NULL 1        NULL
8   M2m1        M2m1        NULL 2        NULL
9   M2m2        M2m2        NULL 2        NULL
10  M3m1        M3m1        NULL 3        NULL
11  M1m2m1      M1m2m1      NULL 6        1
12  M2m2m2      M1m2m2      NULL 6        2
13  M2m2m3      M2m2m3      NULL 9        3
14  M1m1m1      M2m1m1      NULL 5        4
15  M1m1m2      M2m1m2      NULL 5        5
16  M3m1m1      M3m1m1      NULL 10       6
17  M4m1        M4m1        NULL 4        NULL
18  M4m2        M4m2        NULL 4        NULL
19  M4m1m1      M4m1m1      NULL 17       7
20  M4m1m2      M4m1m2      NULL 17       8
21  M4m1m3      M4m1m3      NULL 17       9
22  M4m2m1      M4m2m1      NULL 18       10

数据实体类 #

public class MenuItemHierarchy
{
    public Int64 Id { get; set; }
    public string Name { get; set; }
    public int ParentId { get; set; }
    public int? FunctionalityId { get; set; }
    public List<MenuItemHierarchy> Children { get; set; } // 存储子节点的属性

    public bool IsLeafNode => Children == null || Children.Count == 0;
}

原递归渲染代码 #

<h2>Menu Items</h2>
<div>
    @await RecursiveRenderNodes(Model.MenuItems)
</div>

@* 递归渲染节点的函数 *@
@functions {
    public async Task<IHtmlContent> RecursiveRenderNodes(List<MenuItemHierarchyDTO> nodes)
    {
        var content = new HtmlContentBuilder();
        if (nodes.Count > 0)
        {
            content.AppendHtml("<ul>");
            foreach (var node in nodes)
            {
                content.AppendHtml("<li>");
                content.AppendHtml($"<p>{node.Name}</p>");

                if (node.IsLeafNode)
                {
                    content.AppendHtml("<a class=\"btn btn-primary btn-sm\" asp-page=\"Edit\" asp-route-id=\"" + @node.Id + "\">Edit</a> | ");
                    content.AppendHtml("<a  class=\"btn btn-primary btn-sm\" asp-page=\"Delete\" asp-route-id=\"" + @node.Id + "\">Delete</a>");
                }
                else
                {
                    content.AppendHtml("<a class=\"btn btn-primary btn-sm\" asp-page=\"Create\" asp-route-id=\"" + @node.Id + "\">Add New Child</a> | ");
                    content.AppendHtml("<a class=\"btn btn-primary btn-sm\" asp-page=\"Edit\" asp-route-id=\"" + @node.Id + "\">Edit</a>");
                 }
                if (node.Children != null && node.Children.Count > 0)
                {
                    var childrenContent = await RecursiveRenderNodes(node.Children);
                    content.AppendHtml(childrenContent);
                }
                content.AppendHtml("</li>");
            }
            content.AppendHtml("</ul>");
        }
        return content;
    }
}

问题现象 #

页面生成的HTML源码结构看似正常，但点击按钮后无法跳转到Edit/Delete/Create页面。

解决方案 #

Mike Brind提供的修复方案：直接使用Url.Page方法生成完整的跳转URL，替换原代码中按钮的生成逻辑：

if (node.IsLeafNode)
{
    // 叶子节点显示Edit和Delete按钮
    content.AppendHtml($"<a class=\"btn btn-primary btn-sm\" href=\"{Url.Page("./Edit", new { id = node.Id })}\">Edit</a>  ");
    content.AppendHtml($"<a class=\"btn btn-primary btn-sm\" href=\"{Url.Page("./Delete", new { id = node.Id })}\">Delete</a>");

}
else
{
    // 非叶子节点显示创建子节点和编辑按钮
    content.AppendHtml($"<a class=\"btn btn-primary btn-sm\" href=\"{Url.Page("./Create", new { id = node.Id })}\">Create Child Node</a>  ");
    content.AppendHtml($"<a class=\"btn btn-primary btn-sm\" href=\"{Url.Page("./Edit", new { id = node.Id })}\">Edit</a>");

}

事后反思 #

实现该功能时，更合适的方式是使用View Component来完成。

内容的提问来源于stack exchange，提问作者Dibakar