Question

我有一个从模型传递到视图的元组列表。我正在尝试使用从模型获得的元组列表来创建嵌套的HTML列表。我的清单以正确的顺序返回。如果嵌套列表项，则可以是无穷大。

我试图使用foreach循环遍历元组列表，但是标记仅在彼此之后紧接着显示<UL>并且不嵌套。

我的foreach循环看起来像这样

        @foreach (var item in Model)
            {
                <ul class="nav-breadcrumbs">
                    <li>
                        <a href="@item.Item2">@item.Item1</a>
                    </li>
                </ul>
            }

我希望每个项目都是上一个项目的子级。如果需要，我可以更改模型。或者，也许将数据传递给javascript变量，然后使用jquery构建嵌套列表。我希望我的标记最终看起来像这样。并保持嵌套

<ul>
     <li>
          <a>link</a>
               <ul>
                    <li>
                          <a>link</a>
                    </li>
               </ul>
     </li>
</ul>

Answer 1

您可以使用递归，在控制器中创建一个递归方法以创建HTML并将其通过ViewBag传递给视图，递归方法如下所示：

方法参数中的

ItemType是您的模型列表的类型

public string CreateHtml(int i, List<ItemType> items)
  {
    string html = "";

    html += "<ul><li>" + "<a href='" + items[i].Item2 + "'>" + items[i].Item1 + "</a>";

    i++;

    if (i < items.Count)
      return html += CreateHtml(i, items);
    else
      return html + "</li></ul>";

    html += "</li></ul>";

    return html;
  }

以以下方式添加到ViewBag：

ViewBag.Html = CreateHtml(0, model);

在视图上显示如下：

@Html.Raw(Model.Html)

Answer 2

另一种（相对简单）的解决方案是在解析之前在视图上创建Html字符串，如下所示：

HTML解析器不允许您先打开所有ul，li标签，然后最后关闭所有标签，因此您必须采用这种方式：

@{
     string html = "";

     foreach (var item in Model)
     {
       html += "<ul class='nav-breadcrumbs'><li><a href=" + item.Item2 + ">" + item.Item1 + "</a>";
     }

     foreach (var item in Model)
     {
        html += "</li></ul>";
     }
  }

  @Html.Raw(html)

如何从平面列表构建嵌套的HTML列表

2 个答案: