Creating an Unordered List for a MultiLevel Menu in Code Behind vb.net

As mentioned in New Series: Completely Redoing the Company Website, I’m creating our members website from scratch. One of the items on my to do list is the menu, since I’ll be using master pages, the menu will be placed on every page and will be a big part of the website.

Since our website is a members site, we have different security levels, depending on what your security level is, this will determin what links you get in the menus. (example: admins get links to admin pages). So our menu needed to be created on the fly depending on what the person logged in has as a security level.

Looking at the many ways to create a menu, the one’s I like are purly CSS based. With the CSS based menus you use an unordered (bulleted) list and then use CSS to create the menu as seen at Create a Multilevel Dropdown Menu with CSS

The Code Behind

Being that we already have a website, we already have the menu structure in our SQL database.
While your SQL structure will be different, you can get a hint on how to pull each sub to create your UL. (tables and column names changed to protect the innocent)

Grabbing the Main Menu Level


Sub GetMenuMain()

        
        SecurityLevel = getUserLevel.ReturnLevel
        Dim extraline As String
        Dim menuText As String
        Dim SubMenuList As New ArrayList()
        Dim ds As New DataSet()
        Dim cn As SqlConnection = New SqlConnection(ConfigurationManager.AppSettings("yoursqlconn"))
        Dim cmd As New SqlCommand("SELECT * FROM tblMainMenu where SecLvl <=" & SecurityLevel & " order by Seq", cn)
        Dim da As New SqlDataAdapter(cmd)
        da.Fill(ds)
        Dim table As DataTable = ds.Tables(0)
        


        Dim sb = New StringBuilder()
        If table.Rows.Count > 0 Then
            ' build the unordered list
            sb.AppendLine("<ul id='nav'>")
            For Each dr As DataRow In table.Rows
				' If this Menu Item has a sub menu
                If dr("SubMenuIDs").ToString() <> "*NONE" Then
                    SubMenuList.Add(dr("SubMenuIDs").ToString())
                    dr("SubMenuIDs").ToString() & "' data-dir='h' data-offsets='-10,5'>")
                    sb.AppendLine("<li class='mainmenu'><a href='" & dr("Pageurl").ToString() & "'>" & dr("itemName").ToString() & "</a>")
                    SubMenu = SubMenu & sb.ToString()
                    sb = New StringBuilder()
					' Go get the submenu
                    GetMenuSub(dr("SubMenuIDs").ToString())
                Else
					sb.AppendLine("<li class='mainmenu'><a href='" & dr("Pageurl").ToString() & "'>" & dr("itemName").ToString() & "</a></li>")

                End If
    
            Next
        End If
        sb.AppendLine("</ul>")
        
        SubMenu = SubMenu & sb.ToString()
        

    End Sub

Grabbing the Sub Menu Level

Sub GetMenuSub(ByVal submenuid As String)

        
        Dim ds As New DataSet()
        Dim cn As SqlConnection = New SqlConnection(ConfigurationManager.AppSettings("yoursqlconn"))
        Dim cmd As New SqlCommand("SELECT * FROM tblMenusSub where SubMenuIDs = '" & submenuid & "' AND SecLvl <=" & SecurityLevel & "", cn)
        Dim da As New SqlDataAdapter(cmd)
        da.Fill(ds)
        Dim table As DataTable = ds.Tables(0)
		Dim sb = New StringBuilder()
        If table.Rows.Count > 0 Then
			' build sub unordered list
            sb.AppendLine("<ul>")
            For Each dr As DataRow In table.Rows
                

                Dim TestPos As Integer
				'if submenu item starts with > then there is a subsub menu
                TestPos = InStr(1, dr("SubMenuText").ToString(), ">")
                If TestPos > 0 Then
                    Dim MyChar() As Char = {">"}
                    Dim NewString As String = dr("SubMenuText").ToString().TrimStart(MyChar)
                    'get subsubmenu loop here
                    sb.AppendLine("<li><a href='" & Trim(dr("HyperLink").ToString()) & "'>" & NewString & "&nbsp;&nbsp;&nbsp;<img src='/images/arrow.gif' border='0'></a>")
                    SubMenu = SubMenu & sb.ToString()
                    sb = New StringBuilder()
					'get subsub menu
                    GetSubSubMenus(Trim(dr("HyperLink").ToString()))

                Else
                    sb.AppendLine("<li><a href='" & Trim(dr("HyperLink").ToString()) & "'>" & dr("SubMenuText").ToString() & "</a></li>")

                End If
                
            Next
            sb.AppendLine("</ul></li>")
        End If
        SubMenu = SubMenu & sb.ToString()
        

    End Sub

Grabbing the SubSub Menu Level


Sub GetSubSubMenus(ByVal hyperlink As String)
        Dim ds As New DataSet()
        Dim cn As SqlConnection = New SqlConnection(ConfigurationManager.AppSettings("yoursqlconn"))
        Dim cmd As New SqlCommand("SELECT * FROM tblMenusSub where SubMenuIDs = '" & hyperlink & "' AND SecLvl <=" & SecurityLevel & " ORDER BY SubMenuID", cn)
        Dim da As New SqlDataAdapter(cmd)
        da.Fill(ds)
        Dim table As DataTable = ds.Tables(0)

        Dim sb = New StringBuilder()
        If table.Rows.Count > 0 Then
            sb.AppendLine("<ul>")
            For Each dr As DataRow In table.Rows
                
                sb.AppendLine("<li><a href='" & Trim(dr("HyperLink").ToString()) & "'>" & dr("SubMenuText").ToString() & "</a></li>")

            Next
            sb.AppendLine("</ul></li>")
        End If
        SubMenu = SubMenu & sb.ToString()
    End Sub

Your List

<ul id="nav">
    <li><a href="#">1 HTML</a></li>
    <li><a href="#">2 CSS</a></li>
    <li><a href="#">3 Javascript</a>
        <ul>
            <li><a href="#">3.1 jQuery</a>
                <ul>
                    <li><a href="#">3.1.1 Download</a></li>
                    <li><a href="#">3.1.2 Tutorial</a></li>
                </ul>
            </li>
            <li><a href="#">3.2 Mootools</a></li>
            <li><a href="#">3.3 Prototype</a></li>
        </ul>
    </li>
</ul>

Now use Kriesi’s page and format the CSS for your completed menu.

     

Leave a Reply