MVC 5 Dynamic Navigation Bar 2 Tier

Question

I currently have a navigation bar which is dynamically created from a MS SQL Database, but I would like to add a second sub layer. Below is what I have so far for the current working single level navigation bar.

Navigation

public partial class Navigation
{
    public int Id { get; set; }
    public string Title { get; set; }
    public Nullable<int> Position { get; set; }
    public bool Main { get; set; }
    public string Action { get; set; }
    public string Controller { get; set; }
}

HomeController

[ChildActionOnly]
public ActionResult Navigation()
{
    var navigationModel = (from m in db.Navigations where (m.Main == true) orderby m.Position select m);
    return View(navigationModel);
}

Navigation

@{ Layout = null; }
@model IEnumerable<WebApplication1.Models.Navigation>

<ul class="nav sf-menu clearfix">
    @foreach (var item in Model)
    {
        @Html.MenuLink(item.Title, item.Action, item.Controller)
    }
</ul>

The second tier needs to link to the Contents table, the relationship is db.Navigations.Id = db.Contents.NavigationId.

Content

public partial class Content
{
    public int Id { get; set; }
    public Nullable<int> NavigationId { get; set; }
    public string Title { get; set; }
    public string Content1 { get; set; }
    public Nullable<int> Position { get; set; }
    public string Image { get; set; }
    public string Sub { get; set; }
    public Nullable<bool> Active { get; set; }
    public string Url { get; set; }
    public string Summary { get; set; }
}

Could someone please provide a tutorial or example code of how I can bind child data to the parent dataset and then in the View, how to check if a parent holds child records and if so loop through them.

Any help would be much appreciated :-)

Answer 1

I added a new class called NavigationViewModel to declare the tables I wish to use and modified the HomeController to use NavigationViewModel for querying the respective tables.

NavigationViewModel

namespace WebApplication1.Models
{
    public class NavigationViewModel
    {
        public List<Navigation> Navigation { get; set; }
        public List<Content> Content { get; set; }
    }
}

HomeController

[ChildActionOnly]    
public ActionResult Navigation()
{
    var navigationModel = new NavigationViewModel();
    navigationModel.Navigation = (from m in db.Navigations where (m.Main == true) orderby m.Position select m).ToList();
    navigationModel.Content = (from n in db.Contents where (n.Active == true) orderby n.Position select n).ToList();

    return View(navigationModel);
}

Navigation

@model WebApplication1.Models.NavigationViewModel

<ul class="nav sf-menu clearfix">
    @foreach (var navigation in Model.Navigation)
    {
        int records = Model.Content.Count(c => c.NavigationId == navigation.Id);

        if (records > 0)
        {
            @Html.SubMenuLink(navigation.Title, navigation.Action, navigation.Controller)
            @Html.Raw("<ul>")
            foreach (var content in Model.Content.Where(c => c.NavigationId == navigation.Id))
            {
                if (string.IsNullOrEmpty(content.Url))
                {
                    if (string.IsNullOrEmpty(content.Content1))
                    {
                    }
                    else
                    {
                        @Html.MenuLink(content.Title, "Home/Article/" + content.Id + "/" + ToFriendlyUrl(content.Title), "Home");
                    }
                }
                else
                {
                    @Html.MenuLink(content.Title, content.Url, "Home");
                }
            }
            @Html.Raw("</ul>")
            @Html.Raw("</li>")
        }
        else
        {
            @Html.MenuLink(navigation.Title, navigation.Action, navigation.Controller)
        }
    }
</ul>

I'm not sure this is the most elegant or efficient way to achieve the end goal, any suggestions to make the code more efficient I am happy to listen.