[c# / asp.net]Recursief menu tonen

Pagina: 1
Acties:

  • TeeDee
  • Registratie: Februari 2001
  • Laatst online: 17-04 11:22
de code in deze post is in asp3 geschreven, omdat ik hier geen .net tot mijn beschikking heb, en zo goed ben ik nog niet ;) dat ik het uit mijn hoofd kan

Ik probeer een Menu op te bouwen op basis van gegevens uit een database.
DB model (versimpeld)
code:
1
2
3
PageId (int)
ParentId(int)
PageTitle(nvarchar)


Het opbouwen van het menu moet (zoals zovaak) recursief gebeuren.
ASP:
1
2
3
4
5
6
7
8
9
function menu(id)
do while not rs.eof
    ' code hieronder als een soort van debug :)
    strItem = strItem & rs("PageRewrite")&vbTab&"Pageid:"&rs("PageID")&vbTab&"ParentId:"&id&"<br>"&vbcrlf
    strItem = strItem & menu(rs("PageId")) ' voer de functie "menu" nogmaals uit
rs.movenext()
loop
menu = strItem
end function


Dit heeft in mijn geval als resultaat:
code:
1
2
3
4
5
6
7
8
Pageid  ParentId    PageTitle
1           0       MainMenu 1
2           0       MainMenu 2
4           2       Sub-Menu 1
5           2       Sub-Menu 2
6           5       Sub-Menu a
7           5       Sub-Menu b
3           0       MainMenu 3

Zoals je ziet horen Sub-Menu 1 en Sub-Menu 2 bij MainMenu 2. Sub-Menu a en Sub-Menu b horen vervolgens weer bij Sub-Menu 2. Je zou zeggen dat het werkt. Maar het enige waar ik nog niet uitkom is om de SubMenu's een klein stukje in te laten springen.

Middels google en de GoT search heb ik wel een aantal artikelen gevonden waaronder:
Sitepoint, dit topic en nog vele andere waar imho de materie hetzelfde is. De materie van een recursieve functie is me wel redelijk duidelijk inmiddels, alleen ik zou op dit moment niet weten hoe ik bijvoorbeeld het inspringen e.d. kan doen.

Het uiteindelijke doel is om dit te produceren:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul>
<li>Main Menu 1</li>
<li>Main Menu 2
    <ul>
        <li>SubMenu 1<li>
        <li>SubMenu 2
            <ul>
                <li>Sub-Menu a</li>
                <li>Sub-Menu b</li>
            </ul>
        <li>
    </ul>
</li>
<li>Main Menu 3</li>
</ul>


Verder baseer ik me nu even op mijn ASP3 kennis. Mocht er in .Net 1.1 een veel betere "way to go" zijn, dan hoor ik dat erg graag.

Heart..pumps blood.Has nothing to do with emotion! Bored


  • gorgi_19
  • Registratie: Mei 2002
  • Laatst online: 22-04 18:50

gorgi_19

Kruimeltjes zijn weer op :9

Digitaal onderwijsmateriaal, leermateriaal voor hbo


  • TeeDee
  • Registratie: Februari 2001
  • Laatst online: 17-04 11:22
Thanks. Ik zal er eens naar kijken.
Had wel gezocht op "Tree" maar niet op "TreeView". Krijg ineens veel meer results.
Morgen dat maar eens in een C# jasje werpen.

Heart..pumps blood.Has nothing to do with emotion! Bored


  • joopst
  • Registratie: Maart 2005
  • Laatst online: 01-10-2024
als je alles in een divje rendert, dan kan je met css de margin-left op bijv 10px zetten. Omdat de divjes in elkaar zitten, worden ze ingesprongen.

  • Vedett.
  • Registratie: November 2005
  • Laatst online: 09:07
Tja,een twee jaar geleden heb ik zoiets ook gemaakt. Het verschil was dat ik menuItems uit een tekstbestand moest laden.

Nu had ik toen de volgende oplossing bedacht:

1) je haalt de gegevens op uit de database, en je sorteert ze op ParentId zodat al de hoofdmenus (ParentId == 0) eerst in je result van je query staan.
(Ik raad je aan om NULL te gebruiken want 0 is eigenlijk ook een key die een Id kan zijn in je DB, of heb je geen relaties liggen??)

2) Je maakt een hashtable aan waarin al de mainMenu's komen (parentId == 0)

3) Je loopt doorheen de lijst met geselecteerde waarden
3a) Als de waarde ParentId NULL is
-> Menuitem object toevoegen aan de hashtable met MenuId als key
3b) Als de waarde niet ParentId NOT NULL is
-> Menuitem object opzoeken in hashtable met ParentId als key
-> SubMenuItem toevoegen aan MAinMenuItem

Vervolgens zit de structuur in één hashtable.

Eigenlijk hetzelfde als de link die Gorgi_19 aanhaalt. Met dat verschil dat je maar één keer loopt en één hashtable nodig hebt.


ps: Ik dach dat het toen goed werkte

  • joopst
  • Registratie: Maart 2005
  • Laatst online: 01-10-2024
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<style type="text/css">div {padding-left: 15px; border: 1px solid black;}</style>
</head>
<body>

<div>een
    <div>twee</div>
    <div>drie
        <div>vier</div>
    </div>
</div>

</body>
</html>

  • Folkert
  • Registratie: September 2001
  • Laatst online: 08:50
Misschien is de HierarchicalRepeater van Wilco een oplossing... heb er ook mee gewerkt en werkt erg goed!!!
http://www.wilcob.com/Demos/HierarchicalRepeater/
meer info:
http://www.wilcob.com/Wil...epeaterASPNETControl.aspx

[ Voor 29% gewijzigd door Folkert op 01-12-2005 13:46 ]


  • TeeDee
  • Registratie: Februari 2001
  • Laatst online: 17-04 11:22
Vedett.: Het hele Hashtable gebeuren heb ik even opzij gelegd, omdat ik met een krappe deadline zat en helaas geen tijd had om er mee aan de slag te gaan. Vooralsnog is het nu met een kleine recursieve functie. Ik zal sowieso naar de Hashtable variant kijken, omdat me dat toch een nettere oplossing lijkt.

joopst: dat kan ja, maar dat is niet echt semantisch correct.

Folkert: zelfde idee als het idee van joopst: dus dat valt simpelweg af.

Heb het nu, zoals ik al zei, even op de volgende manier gedaan:
C#:
1
2
3
4
5
6
7
8
9
10
11
12
private string renderSubMenuItem(int menuId, string linkURL, string linkTekst)
{
item += "<li><a href=".."</a></li>"; 
    foreach(DataRow dr in FillDataTable.Select("ParentId="+menuId))
    {
        item += "<ul>";
        item += renderSubMenuItem(.....);
        item += "</ul>";
    }
    item += "</li>\n";
    return item;
}

Code is even versimpeld, dus zou niet helemaal correct kunnen zijn.

Heart..pumps blood.Has nothing to do with emotion! Bored


Verwijderd

joopst schreef op woensdag 30 november 2005 @ 08:24:
als je alles in een divje rendert, dan kan je met css de margin-left op bijv 10px zetten. Omdat de divjes in elkaar zitten, worden ze ingesprongen.
Dit kan je met CSS natuurlijk ook specificeren voor de UL (unordered list) tag. En dat lijkt me qua semantiek ook een betere methode.
Pagina: 1