Making Dynamic Menu With Dropdowns

Question

I currently have dynamic menus like this:

<asp:Repeater runat="server" id="MenuRepeater">
  <headertemplate>
       <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">KezBlu</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
  </headertemplate>
  <itemtemplate>
     <li><a href='<%# Eval("PageFile") %>'><%# Eval("DisplayName") %></a></li>
  </itemtemplate>
  <footertemplate>
             </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>
  </footertemplate>
 </asp:Repeater>

And the datasource is:

 public partial class KezberProjectManager : System.Web.UI.MasterPage
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            MenuRepeater.DataSource = GetMenu();
            MenuRepeater.DataBind();
        }

        protected DataTable GetMenu() 
        {
          // you would normally pull this from a database, this is here
          // only to show the idea.
          DataTable menu = new DataTable();
          menu.Columns.Add("PageFile", typeof(String));
          menu.Columns.Add("DisplayName", typeof(String));

          DataRow row = menu.NewRow();
          row["PageFile"] = "home.aspx";
          row["DisplayName"] = "Home";
          menu.Rows.Add(row);

          row = menu.NewRow();
          row["PageFile"] = "Accounts.aspx";
          row["DisplayName"] = "Accounts";
          menu.Rows.Add(row);

          row = menu.NewRow();
          row["PageFile"] = "Logout.aspx";
          row["DisplayName"] = "Logout";
          menu.Rows.Add(row);

          return menu;
        }
    }

This works great, but I need sub menus too.

Would there be a way to in some way have repeaters for each item some how, or maybe a better way?

Thanks

Answer 1

You could use nested repeaters:

<asp:Repeater ID="rptFirstLevel" runat="server">
    <ItemTemplate>
        <!-- first level html --> 
        <asp:Repeater ID="rptSecondLevel" DataSource='<%# DataBinder.Eval(Container.DataItem, "Children") %>' runat="server">
            <ItemTemplate>
                <!-- second level html -->
            </ItemTemplate>
        </asp:Repeater>
     </ItemTemplate>
</asp:Repeater>

In your code just make sure that you properly data-bind the first repeater.

rptFirstLevel.DataSource = menu;
rptFirstLevel.DataBind();

And that your menu object contains the Children collection. This is only one of many possible solutions. Hope it helps.