[HTML/C#] Dataset hierarchy naar Unordered List

[Domih]

Beste lezer,

Momenteel maak ik gebruik van JOrgChart, een JS plugin die op basis van een UL een treestructure maakt (demo: https://dl.dropboxusercon...hart/example/example.html )

Structuur van data die hij gebruikt:

code:

<ul id="org" style="display:none">
  <li>Food:
    <ul>
      <li>Beer</li>
      <li class=collapsed>Vegetables
        <ul>
          <li>Carrot</li>
          <li>Pea</li>
        </ul>
      </li>
      <li>Chocolate</li>
    </ul>
  </li>
</ul>

Ik heb een dataset met parentID's, en ik wil daar dan zo'n treeview mee maken. Ik heb op google rondgekeken maar heb helaas niks kunnen vinden.
De dataset moet het liefst een oneindig aantal children aankunnen.

Voorbeeld uit database:

code:

ID:    ParentID:
1      0
2      0
3      1
4      1
5      3
6      5

Dat moet hij vervolgens omzetten naar een unordered list, waar de "child" onder zijn "parent" komt te staan.
Iemand een idee hoe ik dit het beste kan doen? Ben alweer even aan het knutselen, maar ben niet verder gekomen dan dit:

code:

            @foreach (var item in Model)
            {
                    @Html.Raw("<li>");
                    @item.ID;
                    @Html.Raw("<br/>");
                    @item.MeterNumber;
                    @Html.Raw("<br/>");
                    @item.DescriptionShort;
                    @Html.Raw("<br/>");
                    @Html.Raw("</li>");
                }
            }

Dit laat gewoon alle data zien met location ID die op de pagina ervoor geselecteerd is.

Ik hoop dat iemand tips voor me heeft

[Alex)]

Ons aller crisp heeft hier een tijd terug een blogpost over geschreven: Crisp's blog: Formatting a multi-level menu using only one query

Weliswaar in PHP/MySQL, maar de principes zouden ook toepasbaar moeten zijn op jouw probleem.

[InZane]

Misschien een stomme vraag hoor, maar waarom al die Html.Raw()?

[Domih]

InZane schreef op maandag 06 oktober 2014 @ 19:06:
Misschien een stomme vraag hoor, maar waarom al die Html.Raw()?

Hallo,

Omdat ik binnen de C# foreach loop zit, daar kan ik (Zover ik weet) geen normale html topassen. En zo werkt het (redelijk) overzichtelijk

Alex) schreef op maandag 06 oktober 2014 @ 18:59:
Ons aller crisp heeft hier een tijd terug een blogpost over geschreven: Crisp's blog: Formatting a multi-level menu using only one query

Weliswaar in PHP/MySQL, maar de principes zouden ook toepasbaar moeten zijn op jouw probleem.

Hmm, bedankt, ga er morgen naar kijken! Heel interessant.

[ Voor 44% gewijzigd door Domih op 06-10-2014 19:11 ]

[InZane]

Domih schreef op maandag 06 oktober 2014 @ 19:10:
[...]


Hallo,

Omdat ik binnen de C# foreach loop zit, daar kan ik (Zover ik weet) geen normale html topassen. En zo werkt het (redelijk) overzichtelijk

Dat kan wel hoor. Razor (want dat is het) kan daar prima mee overweg.

[R4gnax]

Domih schreef op maandag 06 oktober 2014 @ 19:10:
Omdat ik binnen de C# foreach loop zit, daar kan ik (Zover ik weet) geen normale html topassen.

Oh jawel hoor. Razor pikt het gewoon op als jij van een code context terug springt naar een markup context:

code:

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

​
Interessanter wordt het als je een boom wilt gaan opbouwen van een arbitraire diepte. Dan ben je eigenlijk op een recursieve oplossing aangewezen mbv een Razor helper delegate:

code:

@model Tree<String>

@helper RenderSubTree(TreeNode<String> node) {
  <text>node.Data</text>
  if (!node.Children.Any()) return;
  <ul>
    @foreach(var child in node.Children) {
      <li>@RenderSubTree(child)</li>
    }
  </ul>
}

<ul>
  @foreach(var child in Model.Children) {
    <li>@RenderSubTree(child)</li>
  }
</ul>

​
Toegegeven, je kunt bij extreem grote bomen tegen stack overflows aan gaan lopen, maar iets zegt me dat je op dat moment het praktische nut van het renderen van zo'n boom in een browser al lang en breed voorbij bent geschoten. (Zeker als het hele ding ook nog eens met JavaScript opgezet wordt.)

offtopic:
Hey wat leuk; eindelijk een manier gevonden om extra witregels op het messageboard voor elkaar te krijgen.

[ Voor 18% gewijzigd door R4gnax op 06-10-2014 20:32 ]

[Domih]

R4gnax schreef op maandag 06 oktober 2014 @ 20:25:
[...]


Oh jawel hoor. Razor pikt het gewoon op als jij van een code context terug springt naar een markup context:

code:

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

​
Interessanter wordt het als je een boom wilt gaan opbouwen van een arbitraire diepte. Dan ben je eigenlijk op een recursieve oplossing aangewezen mbv een Razor helper delegate:

code:

@model Tree<String>

@helper RenderSubTree(TreeNode<String> node) {
  <text>node.Data</text>
  if (!node.Children.Any()) return;
  <ul>
    @foreach(var child in node.Children) {
      <li>@RenderSubTree(child)</li>
    }
  </ul>
}

<ul>
  @foreach(var child in Model.Children) {
    <li>@RenderSubTree(child)</li>
  }
</ul>

​
Toegegeven, je kunt bij extreem grote bomen tegen stack overflows aan gaan lopen, maar iets zegt me dat je op dat moment het praktische nut van het renderen van zo'n boom in een browser al lang en breed voorbij bent geschoten. (Zeker als het hele ding ook nog eens met JavaScript opgezet wordt.)

offtopic:
Hey wat leuk; eindelijk een manier gevonden om extra witregels op het messageboard voor elkaar te krijgen.

Hallo, bedankt voor je tip, ik ga het even bekijken, ik snap er niet heel veel van, maar een beetje google moet me wel kunnen helpen

InZane schreef op maandag 06 oktober 2014 @ 20:22:
[...]


Dat kan wel hoor. Razor (want dat is het) kan daar prima mee overweg.

Zo ff testen

[ Voor 6% gewijzigd door Domih op 07-10-2014 09:41 ]

[2Keys]

Beer is geen food maar een drankje.

[Domih]

2Keys schreef op woensdag 08 oktober 2014 @ 20:23:
Beer is geen food maar een drankje.

Voor mij is een beer gewoon eten als ik die tegenkom in het bos

Ik werk nu aan een recursieve oplossing. Erg lastig wel

[ Voor 15% gewijzigd door Domih op 10-10-2014 14:32 ]

[Domih]

Goedemorgen Tweakertjes!

Ik ben weer een stuk verder gekomen (Denk ik)
Ik ben het nu aan het proberen met een recursieve functie,
Dit heb ik tot nu toe:

code:

    <ul id ="org">
        <li>LOCATION_NAME
            <ul>
            @{foreach (var item in Model)
              {
                int MainID = 0;
                if( item.ParentConnectionMeterID == null)
                {
                    <li>
                        @item.ID
                        @{MainID = item.ID;}
                        @foreach (var item2 in Model)
                        {
                            ShowTree(MainID);
                        }

                    </li>
                }
              }
            }
            </ul>
        </li>
    </ul>

@helper ShowTree(int MainID)
    {
        <ul>
            @foreach (var item2 in Model)
                {
                    if (item2.ParentConnectionMeterID == MainID)
                    {
                          <li>
                              @item2.ID
                              @{MainID = item2.ID;}
                              @foreach (var item3 in Model)
                              {
                                  ShowTree(MainID);
                              }
                          </li>
                    }
                }
                
        </ul>
    }

Ziet er in mijn ogen (redelijk) goed uit. Het enige probleem wat ik heb, is dat hij in de helperfunctie heel de foreach loop skipt. Iemand een idee hoe dit kan?

Alvast bedankt

[Merethil]

Domih schreef op maandag 13 oktober 2014 @ 10:59:
Goedemorgen Tweakertjes!

Ik ben weer een stuk verder gekomen (Denk ik)
Ik ben het nu aan het proberen met een recursieve functie,
Dit heb ik tot nu toe:

code:

    <ul id ="org">
        <li>LOCATION_NAME
            <ul>
            @{foreach (var item in Model)
              {
                int MainID = 0;
                if( item.ParentConnectionMeterID == null)
                {
                    <li>
                        @item.ID
                        @{MainID = item.ID;}
                        @foreach (var item2 in Model)
                        {
                            ShowTree(MainID);
                        }

                    </li>
                }
              }
            }
            </ul>
        </li>
    </ul>

@helper ShowTree(int MainID)
    {
        <ul>
            @foreach (var item2 in Model)
                {
                    if (item2.ParentConnectionMeterID == MainID)
                    {
                          <li>
                              @item2.ID
                              @{MainID = item2.ID;}
                              @foreach (var item3 in Model)
                              {
                                  ShowTree(MainID);
                              }
                          </li>
                    }
                }
                
        </ul>
    }

Ziet er in mijn ogen (redelijk) goed uit. Het enige probleem wat ik heb, is dat hij in de helperfunctie heel de foreach loop skipt. Iemand een idee hoe dit kan?

Alvast bedankt

Wat staat er in Model als je er doorheen stept met een debugger?
Komt er ook echt iets in item2 te staan? Komt die waarde ooit overeen met de MainID?

[Domih]

Merethil schreef op maandag 13 oktober 2014 @ 11:18:
[...]


Wat staat er in Model als je er doorheen stept met een debugger?
Komt er ook echt iets in item2 te staan? Komt die waarde ooit overeen met de MainID?

Hallo!

Ja er staat data in de Model, ik loop er al eerder doorheen.

bij debuggen hit hij de foreach niet eens op een of andere manier



Die breakpoint wordt volledig geskipt

Update:

Ik dacht dat ik het had en was al helemaal blij, maar na verdere analyse gaat er toch iets fout
Zie volgende plaatje voor een screenshot: http://puu.sh/cauKU/d587bc741e.png

code:

<ul id ="org">
        <li>LOCATION_NAME
            <ul>
            @{foreach (var item in Model)
              {
                int MainID = 0;
                if( item.ParentConnectionMeterID == null)
                {
                    <li>
                        @item.ID
                        @{MainID = item.ID;}
                        @foreach (var item2 in Model)
                        {
                            if (item2.ParentConnectionMeterID == MainID)
                                {
                                
                                  @ShowTree(MainID);
                                
                                }
                        }
                    </li>
                }
              }
            }
            </ul>
        </li>
    </ul>

@helper ShowTree(int MainID)
    {
        <ul>
            @{foreach (var item2 in Model)
                {
                    if (item2.ParentConnectionMeterID == MainID)
                    {
                        <li>
                            @item2.ID
                            @{MainID = item2.ID;}
                            @foreach (var item3 in Model)
                            {
                                if (item3.ID == MainID)
                                {
                                    @ShowTree(MainID);
                                }
                            }

                        </li>                           
                    }
                }
            }
        </ul>
    }

Ik heb helaas echt geen idee waarom het nu fout gaat. Het is denk ik iets met het MainID waar het fout gaat, want onder meter 2 moeten 3 dingen komen, en niet 2 dingen.. , ben een beetje verdwaald ben ik bang. Is er iemand die dit misschien kan zien? (De data staat in de databaseop de manier hoe het bovenaan in de webpagina staat, eerst komt ID, dan ParentID)

Edit:

Iemand nog een idee?
Ik zie deze vaak voorbij komen als suggestie:

code:

@helper ShowTree(IEnumerable<Foo> foos)
{
    <ul>
        @foreach (var foo in foos)
        {
            <li>
                @foo.Title
                @if (foo.Children.Any())
                {
                    @ShowTree(foo.Children)
                }
            </li>
        }
    </ul>
}

Dat probeerde ik toe te passen, ik weet alleen niet hoe hij aan die "foo.Children" komt
Ik hoop dat er snel een antwoord komt, ik ga ondertussen het over een hele andere boeg proberen te gooien, iets met voor elke ouder een array maken met de children ofzo

[ Voor 91% gewijzigd door Domih op 14-10-2014 10:02 ]

[Domih]

Little kick

Edit 12:24:

Ben weer een stukje verder gekomen, hij laat de OrgChart nu perfect zien!! Ben heel blij.
Het enige probleem waar ik nog mee zit is dat hij een verkeerd lijstje genereerd. Hij genereerd namelijk dit:

code:

LOCATION_NAME
1
10559
10561
10560
2
10562
10564
10563
10565
1
10559
10561
10560
2
10562
10564
10563
10565

Terwijl het dit moet zijn:

code:

LOCATION_NAME
1
10559
10561
10560
2
10562
10564
10563
10565

Weer even spelen, en heel erg bedankt voor jullie input

Edit: 14:00
Het is me gelukt (al een uur geleden gelukkig)

[ Voor 100% gewijzigd door Domih op 14-10-2014 14:07 ]