c# - How to show IEnumerable hierarchy on cshtml? -

i have object list model on .cshtml page.

@model ienumerable<someobject> 

each object have name, id , parentid.

right showing data simple list:

<ul> @foreach (var item in model) {    <li>    ...    </li> } </ul> 

and looks like:

--------- |test1  | //id=1 parentid=0 |test2  | //id=2 parentid=1 |test3  | //id=3 parentid=2 |test4  | //id=4 parentid=2 |test5  | //id=5 parentid=0 --------- 

but need show as:

--------------- |test1        | //id=1 parentid=0 |   test2     | //id=2 parentid=1 |      test3  | //id=3 parentid=2 |      test4  | //id=4 parentid=2 |test5        | //id=5 parentid=0 --------------- 

how can accomplish that?

you need consider using recursive function. need change data structure in such way can used in recursive function. please see example have created

public class menu {     public int id { get; set; }     public int parentid { get; set; }     public string name { get; set; }     public list<menu> childmenus { get; set; } } 

you can use above class in model , in view, can create recursive function sample below:

@model list<testns.models.menu> 

<div>  @displaymenu(model)  </div>

@helper displaymenu(list<menu> menuitems)  {      <ul>          @foreach (var item in menuitems)          {              <li>                  @item.name                  @if (item.childmenus != null && item.childmenus.any())                  {                      @displaymenu(item.childmenus)                  }              </li>          }      </ul>  }

and controller, can prepare menu , call send view. please use sample shown below:

   public actionresult index()     {         var menu = new list<menu>         {             new menu             {                 id = 1,                 parentid = 0,                 name = "home",                 childmenus = new list<menu>                 {                     new menu                     {                         id = 2,                         parentid = 1,                         name = "business",                         childmenus = null                     },                     new menu                     {                         id = 3,                         parentid = 1,                         name = "social",                         childmenus = new list<menu>                         {                             new menu                             {                                 id = 4,                                 parentid = 3,                                 name = "educ",                                 childmenus = null                             },                             new menu                             {                                 id = 5,                                 parentid = 3,                                 name = "opp",                                 childmenus = null                             }                         },                     }                 },             }          };         return view(menu);     } } 

put on , see how can achieve want. of course need pull data data source. hope address issue. enjoy!!