Iterating through list within Razor View

Question

I have a C# list with multiple levels, like this:

What I want to do in my view is display ALL items in the list, and not only the parents. My result with my current code is:

So, those are the parents only.

My view:

@model IEnumerable<Docks.Base.Models.RootObject>

@{
    ViewBag.Title = "Docs Index";
    Layout = "~/Views/_Layout.cshtml";
}


<div class="page-wrapper-inside">
    <div class="groups">
        <div class="group-wrapper">
            <h1 class="group-title">Manage Navigation</h1>
            <div class="group">
                <div class="blocks-wrapper row">
                    <h1 class="intranet-group-title">Overview</h1>
                    <table class="table full-width">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Name</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model)
                            {
                                <tr>
                                    <td>@Html.DisplayFor(modelItem => item.id)</td>
                                    <td>@Html.DisplayFor(modelItem => item.name)</td>
                                    <td>
                                        @Html.ActionLink("Edit", "Edit", new { id = item.id }) |
                                        @Html.ActionLink("Details", "Details", new { id = item.id }) |
                                        @Html.ActionLink("Delete", "Delete", new { id = item.id })
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

My model:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Docks.Base.Models
{

    public class Child
    {
        #region Properties
        public int id { get; set; }
        public int parentId { get; set; }
        public int typeId { get; set; }
        public int sortOrder { get; set; }
        public int authScope { get; set; }
        public string name { get; set; }
        public string area { get; set; }
        public object action { get; set; }
        public object controller { get; set; }
        public object root { get; set; }
        public object root_Included { get; set; }
        public object runLocation { get; set; }
        public string iconName { get; set; }
        public bool read { get; set; }
        public bool edit { get; set; }
        public bool add { get; set; }
        public bool delete { get; set; }
        public bool details { get; set; }
        public bool search { get; set; }
        public bool childDependent { get; set; }
        public bool parentDependent { get; set; }
        public bool blocked { get; set; }
        public int count { get; set; }
        public bool beginGroup { get; set; }
        public int itemType { get; set; }
        public string url { get; set; }
        public bool isInternal { get; set; }
        public List<Child> childs { get; set; }
        #endregion
    }

    public class RootObject
    {
        #region Properties
        public int id { get; set; }
        public object parentId { get; set; }
        public int typeId { get; set; }
        public int sortOrder { get; set; }
        public int authScope { get; set; }
        public string name { get; set; }
        public string area { get; set; }
        public object action { get; set; }
        public object controller { get; set; }
        public object root { get; set; }
        public object root_Included { get; set; }
        public object runLocation { get; set; }
        public string iconName { get; set; }
        public bool read { get; set; }
        public bool edit { get; set; }
        public bool add { get; set; }
        public bool delete { get; set; }
        public bool details { get; set; }
        public bool search { get; set; }
        public bool childDependent { get; set; }
        public bool parentDependent { get; set; }
        public bool blocked { get; set; }
        public int count { get; set; }
        public bool beginGroup { get; set; }
        public int itemType { get; set; }
        public object url { get; set; }
        public bool isInternal { get; set; }
        public List<Child> childs { get; set; }
        #endregion
    }

}

My controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Docks.Base.Models;
using Newtonsoft.Json;

namespace Docks.Base.Controllers.Api
{
    public class NavigationController : Controller
    {
        // GET: Navigation
        public ActionResult Index()
        {
            string json = System.IO.File.ReadAllText(@"C:\develop\spl_development\main\Docks\Docks.Base\App\Data\LeftBar\data.json");
            List<RootObject> list = JsonConvert.DeserializeObject<List<RootObject>>(json);

            return View(list);
        }
    }
}

I hope I made my problem clear and someone has a solution, thanks in advance!

Answer 1

You can do that by writing inline function and calling it recursively

        @helper PopulateChild(Child child)
        {
            <tr>
                <td>@Html.DisplayFor(modelItem => child.id)</td>
                <td>@Html.DisplayFor(modelItem => child.name)</td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = child.id }) |
                    @Html.ActionLink("Details", "Details", new { id = child.id }) |
                    @Html.ActionLink("Delete", "Delete", new { id = child.id })
                </td>
            </tr>
            foreach (var item in child.childs)
            {
                PopulateChild(item);
            }
        }
        @foreach (var item in Model)
        {
            <tr>
                <td>@Html.DisplayFor(modelItem => item.id)</td>
                <td>@Html.DisplayFor(modelItem => item.name)</td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new {id = item.id}) |
                    @Html.ActionLink("Details", "Details", new {id = item.id}) |
                    @Html.ActionLink("Delete", "Delete", new {id = item.id})
                </td>
            </tr>

            foreach (var child in item.childs)
            {
                @PopulateChild(child)
            }

        }