ASP.NET循环数据拼接成我需要的HTML代码

[海洋齐齐]

数据库很简单就是一个树形结构的数据库，比如这样
Id Name Pid 树的区域
1 A 0
2 B 1 左
3 C 1 右
4 D 2 左

想到实现的HTML代码是这样的，请问有程序如何循环

                            <div><span>用户A</span></div>
                                    <ul>
	                                    <li style="float: left;">
	                                        <div><span>用户B</span></div>
                                            <ul>
                                                <li style="float: left;">
                                                    <div><span>用户D</span></div>
                                                    <ul>
                                                        <li style="float: left;">
                                                            <div><span>添加</span></div>
                                                        </li>
                                                        <li style="float: right;">
                                                            <div><span>添加</span></div>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li style="float: right;">
                                                    <div><span>添加</span></div>
                                                </li>
                                            </ul>
	                                    </li>
	                                    <li style="float: right;">
	                                        <div><span>用户C</span></div>
                                            <ul>
                                                <li style="float: left;">
                                                    <div><span>添加</span></div>
                                                </li>
                                                <li style="float: right;">
                                                    <div><span>添加</span></div>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>

说明一下：这是一个左右结构2级树形结构，每个节点下都只能有2个节点，如果有下级则显示名称，如果没有下级则显示添加，下面是画的图，只求大神告诉我怎么循环出上面的HTML代码就可以了

[编程有钱人了]

这种情况我经常遇到，如果是后台使用（不是高并发的情况）可以以空间换时间 把整个表读到Datatable 中 第一次加载根节点，DataRow[] drs=dt.Select("pid=0"); StringBuilder sb=new StringBuilder () //循环根节点 foreach(DataRow dr in drs) { //循环下一个节点 DataRow[] _drs=dt.Select("pid="+dr["id"].ToString()); sb("");//用sb 拼接html } 递归循环就可以了

[闭包客]

如果是我做，我会用解析修改的方法，而不是拼接的方法。 拼接虽然可以实现，但是遇到任何新的情况都是比较麻烦的。

[海洋齐齐]

引用 1 楼 wangjun8868 的回复:

这种情况我经常遇到，如果是后台使用（不是高并发的情况）可以以空间换时间 把整个表读到Datatable 中 第一次加载根节点，DataRow[] drs=dt.Select("pid=0"); StringBuilder sb=new StringBuilder () //循环根节点 foreach(DataRow dr in drs) { //循环下一个节点 DataRow[] _drs=dt.Select("pid="+dr["id"].ToString()); sb("");//用sb 拼接html } 递归循环就可以了

谢谢，你说的原理我都知道，只是在我这里应用起来有些困哪，递归不知道如何写，能不能按照我的HTML代码给一个详细的例子

[海洋齐齐]

引用 2 楼 closurer 的回复:

如果是我做，我会用解析修改的方法，而不是拼接的方法。 拼接虽然可以实现，但是遇到任何新的情况都是比较麻烦的。

谢谢你，不过你说的解析修改是什么意思？

[编程有钱人了]

引用 3 楼 jetaimejay 的回复:

[quote=引用 1 楼 wangjun8868 的回复:] 这种情况我经常遇到，如果是后台使用（不是高并发的情况）可以以空间换时间 把整个表读到Datatable 中 第一次加载根节点，DataRow[] drs=dt.Select("pid=0"); StringBuilder sb=new StringBuilder () //循环根节点 foreach(DataRow dr in drs) { //循环下一个节点 DataRow[] _drs=dt.Select("pid="+dr["id"].ToString()); sb("");//用sb 拼接html } 递归循环就可以了

谢谢，你说的原理我都知道，只是在我这里应用起来有些困哪，递归不知道如何写，能不能按照我的HTML代码给一个详细的例子[/quote]

sb.Append(" <li style=\"float: left;\">");
sb.Append(" <div><span>用户C</span></div>");
if(_drs.Length>0)//如果有子节点
{
 sb.Append("  <ul>");
sb.Append("<li><div><span>用户D</span></div></li>")
 sb.Append("  </ul>");
}
sb.Append(" </li>");

[编程有钱人了]

sb.Append(" <li style=\"float: left;\">"); sb.Append(" <div><span>用户C</span></div>"); if(_drs.Length>0)//如果有子节点 { sb.Append(" <ul>"); foreac(DataRow dr in _drs) { sb.Append("<li><div><span>用户D</span></div></li>") } sb.Append(" </ul>"); } sb.Append(" </li>");

[闭包客]

引用 4 楼 jetaimejay 的回复:

[quote=引用 2 楼 closurer 的回复:] 如果是我做，我会用解析修改的方法，而不是拼接的方法。 拼接虽然可以实现，但是遇到任何新的情况都是比较麻烦的。

谢谢你，不过你说的解析修改是什么意思？[/quote] 你是不会从数据库里面读取一个节点的子节点，还是不会拼接 html？如果是后者，我可以帮忙。

[海洋齐齐]

引用 7 楼 closurer 的回复:

[quote=引用 4 楼 jetaimejay 的回复:] [quote=引用 2 楼 closurer 的回复:] 如果是我做，我会用解析修改的方法，而不是拼接的方法。 拼接虽然可以实现，但是遇到任何新的情况都是比较麻烦的。

谢谢你，不过你说的解析修改是什么意思？[/quote] 你是不会从数据库里面读取一个节点的子节点，还是不会拼接 html？如果是后者，我可以帮忙。 [/quote] 读取数据我是知道的，只是不知道怎么拼接这个HTML结构，谢谢你的帮忙

[超级路灯]

用递归来拼接，先把你现在的HTML代码放在一个过程里，每一个用户显示的位置都去运行这个过程

[闭包客]

引用 8 楼 jetaimejay 的回复:

[quote=引用 7 楼 closurer 的回复:]
[quote=引用 4 楼 jetaimejay 的回复:]
[quote=引用 2 楼 closurer 的回复:]
如果是我做，我会用解析修改的方法，而不是拼接的方法。

拼接虽然可以实现，但是遇到任何新的情况都是比较麻烦的。

谢谢你，不过你说的解析修改是什么意思？[/quote]

你是不会从数据库里面读取一个节点的子节点，还是不会拼接 html？如果是后者，我可以帮忙。
[/quote]
读取数据我是知道的，只是不知道怎么拼接这个HTML结构，谢谢你的帮忙[/quote]

源代码：
https://code.csdn.net/closurer/less-html/tree/master

            //构造数据源
            dynamic[] data = new dynamic[]
            {
                new{id = 1, name = "A", pid = 0, _float = "" },
                new{id = 2, name = "B", pid = 1, _float = "left" },
                new{id = 3, name = "C", pid = 1, _float = "right" },
                new{id = 4, name = "D", pid = 2, _float = "left" }
            };

            //视图模板
            string template = "<div><span>文字内容</span></div>";

            //绘制视图
            string html = this.RenderNode(data, 1, template);

            //输出
            Console.WriteLine(html);

递归函数：

        private string RenderNode(dynamic[] data, int id, string template)
        {
            //用 Less.Html 解析视图模板
            Document document = HtmlParser.Parse(template);

            //绑定查询器
            var q = Selector.Bind(document);

            //非空节点
            if (id > 0)
            {
                //获取数据
                dynamic item = data.Where(i => i.id == id).First();

                //绘制本节点
                q("span").html("用户" + item.name);

                //绘制子节点
                q("div").after("<ul></ul>");

                //左边节点
                dynamic left = data.Where(i => i.pid == id && i._float == "left").FirstOrDefault();

                q("ul:first").append(q("<li>" + this.RenderNode(data, left != null ? left.id : -1, template) + "</li>").attr("style", "float:left"));

                //右边节点
                dynamic right = data.Where(i => i.pid == id && i._float == "right").FirstOrDefault();

                q("ul:first").append(q("<li>" + this.RenderNode(data, right != null ? right.id : -1, template) + "</li>").attr("style", "float:right"));
            }
            //空节点
            else
            {
                //绘制添加操作节点
                q("span").html("添加");
            }

            return document.ToString();
        }

键入 test2 得到运行结果：


我使用了 html 解析器，但其实这个例子解析的优势并不明显，因为 html 太简单，重点在递归。

[qq_30254253]

后台递归好数据 然后前端页面递归html 不要用拼接 后期你会头大