Infinite Menu with recursive function

Question

I’d like to know how to create a recursive interface. I have a set of menus, these menus are parents having children and so on, not existing a maximum number of children. I would like to find a solution to this problem, I left what I have done in ASP.NET MVC and C code#

@foreach (var opcaoPai in opcoesPai)
            {

                var filhos = opcaoPai.OpcaoMenuFilhosSet.OrderBy(o => o.OrdemMenu);

            <div class="list-group-item list-group-item-info"  data-parent="#@opcaoPai.IdOpcao">
                <span>
                    @if (filhos.Any())
                    {
                        <a href="#@opcaoPai.IdOpcao" data-toggle="collapse">
                            <i style="float:left;margin-right:3px;" class="fa fa-caret-down"></i>
                            @Html.DisplayFor(modelItem => opcaoPai.Titulo)
                        </a>
                    }
                    else
                    {
                        @Html.DisplayFor(modelItem => opcaoPai.Titulo)
                    }
                </span>
                <!--<td>
                    @Html.DisplayFor(modelItem => opcaoPai.OrdemMenu)
                </td>
                <td>
                    @if (opcaoPai.IdAccao != null)
                    {
                        @(opcaoPai.AccaoSet.ControladorSet.PluginSet.Designacao + " - " + opcaoPai.AccaoSet.ControladorSet.Designacao + " - " + opcaoPai.AccaoSet.Designacao)
                    }
                </td>
                <td>
                    @Html.DisplayFor(modelItem => opcaoPai.OpcaoMenuPaiSet.Titulo)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => opcaoPai.ConteudoSet.Titulo)
                </td>-->
                <a href="@Url.Action("Apagar" ,new {id=opcaoPai.IdOpcao})" style="float:right;margin-right:10px;" id="menusgestao" type="btn" class="btn btn-danger btn-xs btnmenus">
                    <i id="iconsmenugestao" class="fa fa-lock" aria-hidden="true"></i>Eliminar
                </a>
                <a href="@Url.Action("Detalhes", new {id=opcaoPai.IdOpcao})" style="float:right;margin-right:10px;" id="menusgestao" type="btn" class="btn btn-info btn-xs btnmenus">
                    <i id="iconsmenugestao" class="fa fa-info-circle" aria-hidden="true"></i>Detalhes
                </a>
                <a href="@Url.Action("Editar", new {id=opcaoPai.IdOpcao})" style="float:right;margin-right:10px;" id="menusgestao" type="btn" class="btn btn-warning btn-xs btnmenus">
                    <i id="iconsmenugestao" class="fa fa-pencil" aria-hidden="true"></i>Editar
                </a>
            </div>
            <div id="@opcaoPai.IdOpcao" class="collapse list-group-submenu">
                @foreach (var filho in filhos)
                {
                    <div class="list-group-item list-group-item-warning" data-toggle="collapse" data-parent="#@[email protected]">
                        <span>
                            @Html.DisplayFor(modelItem => filho.Titulo)
                        </span>
                        <!--<td>
                            @Html.DisplayFor(modelItem => filho.OrdemMenu)
                        </td>
                        <td>
                            @if (filho.IdAccao != null)
                            {
                                @(filho.AccaoSet.ControladorSet.PluginSet.Designacao + " - " + filho.AccaoSet.ControladorSet.Designacao + " - " + filho.AccaoSet.Designacao)
                            }
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => filho.OpcaoMenuPaiSet.Titulo)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => filho.ConteudoSet.Titulo)
                        </td>-->
                        <a href="@Url.Action("Apagar" ,new {id=filho.IdOpcao})" style="float:right;margin-right:10px;" id="menusgestao" type="btn" class="btn btn-danger btn-xs btnmenus">
                            <i id="iconsmenugestao" class="fa fa-lock" aria-hidden="true"></i>Eliminar
                        </a>
                        <a href="@Url.Action("Detalhes", new {id=filho.IdOpcao})" style="float:right;margin-right:10px;" id="menusgestao" type="btn" class="btn btn-info btn-xs btnmenus">
                            <i id="iconsmenugestao" class="fa fa-info-circle" aria-hidden="true"></i>Detalhes
                        </a>
                        <a href="@Url.Action("Editar", new {id=filho.IdOpcao})" style="float:right;margin-right:10px;" id="menusgestao" type="btn" class="btn btn-warning btn-xs btnmenus">
                            <i id="iconsmenugestao" class="fa fa-pencil" aria-hidden="true"></i>Editar
                        </a>
                    </div>
                }
            </div>
        }

Answer 1

I will post here how to print a menu with recursiveness, and you modify to fit your scenario, ok?

Considering:

public class MenuItem
{
    public string Text { get; set; }
    public string Link { get; set; }
}
public class Menu
{
    public IEnumerable<MenuItem> Items { get; set; }
    public IEnumerable<Menu> SubMenus { get; set; }
}

Your job would look something like this:

@public void PrintMenu(Menu menu)
{
    <ul>
        @foreach(var item in menu.Items)
        {
            <li><a href="@item.Link">@item.Text</a>
        }
        @foreach(var subMenu in menu.SubMenus)
        {
            <li>@PrintMenu(subMenu)</li>
        }
    </ul>
}