ASP 控制无序列表 UL 与嵌套列表答案

【问题标题】：ASP Control unordered list UL with nested listASP 控制无序列表 UL 与嵌套列表
【发布时间】：2013-12-16 23:03:40
【问题描述】：

我尝试了 Menu、TreeView、BulletedList、Repeater、HtmlGenericControl 但没有结果。

我想要的是渲染一些东西的asp控件：

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a>
        <ul>
            <li><a href="#">Item 2.1</a></li>
        </ul>
    </li>
</ul>

例如菜单，它呈现 SPAN 无 UL。

<asp:Menu runat="server">
     <Items>
          <asp:MenuItem Text="Item 1" />
          <asp:MenuItem Text="Item 2">
             <asp:MenuItem Text="Item 2.1" />
          </asp:MenuItem>
    </Items>
</asp:Menu>

我也试过

<asp:Menu RenderingMode="MenuRenderingMode" />

但它不起作用。我正在使用 ASP.NET 3.5。

我需要创建动态 ul 列表，点击项目后，它会检查 db 是否存在嵌套项目，并将它们作为嵌套 ul 添加到点击列表中。

由于性能问题，我无法一次渲染整个菜单。

对不起，如果我不是很清楚。感谢您的帮助。

【问题讨论】：

标签： c# asp.net

【解决方案1】：

您需要使用嵌套中继器：

<asp:Repeater ID="rptFoo" runat="server" OnItemDataBound="rptFoo_ItemDataBound">
   <HeaderTemplate>
     <ul>
   </HeaderTemplate>
   <ItemTemplate>
       <li>
           <asp:HyperLink ID="lnkFoo" runat="server" />
           <asp:Repeater ID="rptBar" runat="server" OnItemDataBound="rptBar_ItemDataBound">
               <HeaderTemplate>
                  <ul>
               </HeaderTemplate>
               <ItemTemplate>
                    <li><asp:HyperLink ID="lnkBar" runat="server" /></li>
               </ItemTemplate> 
               <FooterTemplate>
                  </ul>
               </FooterTemplate>
           </asp:Repeater>
      </li>
   </ItemTemplate> 
   <FooterTemplate>
     </ul>
   </FooterTemplate>
</asp:Repeater>

然后在ItemDataBound处理程序中，您需要检查每个顶级项目是否有子元素，如果有，则将这些元素分配给子转发器和数据绑定，否则隐藏它。

protected void rptFoo_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if ((e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem))
    {
        FooType obj = (FooType)e.Item.DataItem;
        Repeater rptBar = (Repeater)e.Item.FindControl("rptBar");
        if(obj.Children.Count() > 0)
        {
            rptBar.DataSource = obj.Children;
            rptBar.DataBind();
        }
        else
        {
            rptBar.Visible = false;
        }
    }
}

【讨论】：

【解决方案2】：

如果您只需要从代码隐藏中访问 ul 和 li 元素，您可以轻松地向它们添加 runat="server" 属性。为了能够引用单个元素，id 属性是必需的：

<ul id="mainMenu" runat="server">
    <li id="mainMenuItem1" runat="server"><a href="#">Item 1</a></li>
    <li id="mainMenuItem2" runat="server"><a href="#">Item 2</a>
        <ul id="subMenu" runat="server">
            <li id="subMenuItem1" runat="server"><a href="#">Item 2.1</a></li>
        </ul>
    </li>
</ul>

也可以使用 HtmlGenericControls 从代码隐藏构建此结构。

另一种选择是使用用户控件：http://msdn.microsoft.com/en-us/library/y6wb1a0e%28v=vs.100%29.aspx

【讨论】：