How do I populate a menu by using recursive loop?

Question

Below are the info.

No idea how to loop the SubNav item in the View. (Ref: Loop Through Multi-Level Dynamic Menus in Asp.Net MVC)

Controller

[ChildActionOnly]
    public PartialViewResult LoadNav()
    {
        var db = new NavDb();
        List<Nav> NavCol = db.Navs.ToList<Nav>();
        var navObj = CreateNavVM(0, NavCol);
        return PartialView("_PVTopNav", navObj);
    }
    public IEnumerable<NavViewModel> CreateNavVM(int pParentId, List<Nav> pNavCol)
    {
        return from m in pNavCol
               orderby m.DisplaySeq
               where m.ParentMenuId == pParentId
               select new NavViewModel()
               {
                   MenuId = m.MenuId,
                   Name = m.Name,
                   HtmlTitle = m.HtmlTitle,
                   Url = m.Url,
                   DisplaySeq = m.DisplaySeq,
                   SubNav = (IEnumerator<NavViewModel>)CreateNavVM(m.MenuId, pNavCol)
               };
    }

ViewModel

public class NavViewModel
{
    public int MenuId { get; set; }
    public int ParentMenuId { get; set; }
    public string Name { get; set; }
    public string HtmlTitle { get; set; }
    public string Url { get; set; }
    public int DisplaySeq { get; set; }
    public IEnumerator<NavViewModel> SubNav { get; set; }
}

Model

public class Nav
{
    [Key]
    public int MenuId { get; set; }
    public int ParentMenuId { get; set; }
    public string Name { get; set; }
    public string HtmlTitle { get; set; }
    public string Url { get; set; }
    public int DisplaySeq { get; set; }
}

View

    @model IEnumerable<yetpweb.ViewModels.NavViewModel>

    @foreach (var m in Model) {
        <div class="ui simple dropdown item">
            @m.Name
            <div class="menu">
                <a class="item" href="#">Link Item</a>
                <a class="item" href="#">Link Item</a>
                <div class="item">
                    <i class="dropdown icon"></i>
                    Sub Menu
                    <div class="menu">
                        <a class="item" href="#">Link Item</a>
                        <a class="item" href="#">Link Item</a>
                    </div>
                </div>
                <a class="item" href="#">Link Item</a>
            </div>
        </div>
    }

Yan · Accepted Answer · 2016-03-17 15:13:23Z

1

You can just start another razor foreach statement. In your code this would result in:

@foreach (var m in Model) {
        <div class="ui simple dropdown item">
            @m.Name
            <div class="menu">
                <a class="item" href="#">Link Item</a>
                <a class="item" href="#">Link Item</a>
                <div class="item">
                    <i class="dropdown icon"></i>
                    @foreach(var sub in m.SubNav) {
                    <div class="menu">
                        <a class="item" href="#">Link Item</a>
                        <a class="item" href="#">Link Item</a>
                    </div>
                    }
                </div>
                <a class="item" href="#">Link Item</a>
            </div>
        </div>
    }

answered Mar 17, 2016 at 15:13

Yan

4333 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yan Over a year ago

Please flag this as the answer in case it answered your question.

Collectives™ on Stack Overflow

How do I populate a menu by using recursive loop?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related