[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 777
  • Last Modified:

ASP .Net VB Dynamic Menu ASP Script IF/Then based on URL Comparison??

I have an ASP .Net 2.0 Content Management System I am developing.  I've integrated a site map and have a custom menu that I display the site map links using a site master.  I've created a test page and test site map to demonstrate the functionality.

What I am trying to do, is to add a condition in the VB script so that if the page is in the "pages" tag of the site map node, then the parent node would be highlighted (i.e., write class='selmenu' in the li tag) and the children would be visible.  Otherwise, I would like it so that the children are hidden and the main menu item appears normal.  As it stands, the main items do not highlight and are always visible.  This would be ok for a small site, but as the site grows and we add nodes on the site map, it can make a very long page.

I've added the "pages" tag to the sitemap so that I could make an asp comparison. For example, I thought if the current page, was found in pages, then write "class=selmenu" and leave it blank otherwise.  I am not sure if it is the correct/best approach or not. This is the current menu items with the children (sub menu items) shown
<!-- Code for the CustomNavUI.aspx -->

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="CustomNavUI.aspx.vb" Inherits="CustomNavUI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
<!--    <link rel='stylesheet' type='text/css' href='styles.css' media='screen,print' title='default' />-->

        <style type="text/css">
    
    
            /******************************************************** 
            * These rules control the Menu  *
             *******************************************************/

            ul#main-nav, ul#main-nav2 {
            padding: 0;
            overflow:hidden;
            margin:0 -17px;
            width:242px; /*below is the hack to make the correct width and margin for non ie5 browsers*/
                voice-family:  '\'}\'';
                voice-family: inherit;
            width:225px;
            margin:0 0px;
            }

            ul#main-nav li, ul#main-nav2 li 
            {
            margin:0;
            padding:0 0 0 -10px;
            list-style:none;
            font-size: 9pt;
            border-bottom: solid 1px #dbeaf1;
            width:100%; 
            }

            ul#main-nav li a, ul#main-nav li a:visited, ul#main-nav2 li a, ul#main-nav2 li a:visited {
            font-weight:bold;
            text-decoration:none;
            display:block;
            padding:5px 5px 5px 5px;
            width:100%; 
            background: #fce78d;/*bacground color of the main nav items*/
            color: #484b60;
            }
            ul#main-nav li a:hover, ul#main-nav2 li a:hover {
            font-size: 9pt; 
            font-weight:bold;
            background: #f6cd1d;
            color: #000000;
            }

            ul#main-nav li a:active, ul#main-nav2 li a:active  {
            font-size: 9pt; 
            font-weight:bold;
            background: #9b947e;
            color: #000000;
            }
            /* MENU LIST FOR SUBSECTIONS*/
            ul#main-nav li ul, ul#main-nav2 li ul {
            /*display:none; visibility: hidden;*/

            border-top: none;
            border-bottom: none;

            /*list-style-type: none;
            margin: 0px 0px 0px 0px;
            padding: 0px 0px 5px 3px;
            font-size: 9pt;
            }

            #main-nav li ul, #main-nav2 li ul  {
            /*border-top:1px solid #000000;*/
            font-size: 9pt;

            border-top: none;
            border-bottom: none;
            }

            #main-nav li ul li, #main-nav2 li ul li {
            margin-bottom: -2px;
            background-image: url(images/site/img_fdagov_orangebullet.gif);
            background-repeat: no-repeat;
            background-position: 6px 12px;/*10px 8px;*/
            padding-left: 10px;
            padding-right: 3px;

            border-top: none;
            border-bottom: none;
            }

            #main-nav li ul li, #main-nav2 li ul li  { 
            padding-bottom: 2px; list-style-type: none; text-align:left; padding-left:15px;font-size:.9em}

            #main-nav li ul li a, #main-nav2 li ul li a,
            #main-nav li ul li a:visited, #main-nav2 li ul li a:visited {
            font-family: Arial; 
            font-size: 9pt; 
            font-weight:bold; 
            text-decoration: none;
            background: none;
            color: #484b60;


            border-top: none;
            border-bottom: none;
            }

            #main-nav li ul li a:hover, #main-nav2 li ul li a:hover {


            font-family: Arial; 
            font-size: 9pt; 
            font-weight:bold; 
            text-decoration: none;
            background: none;
            color:#730b0d ;


            border-top: none;
            border-bottom: none;
            }

            #current, .current {
            background-color: #000000; height:200px;}

            .selmenu:active, 
            #main-nav li #selmenu:active {
            font-size: 9pt; 
            font-weight:bold; 
            display: -moz-block;
            display: block;
            /*height: 100%;*/
            padding: 5px 0px 5px 6px;
            background: #9b947e;
            /*border-bottom: 1px solid #000000;*/
            text-decoration: none;
            color: #ffffff;
            }

            .selmenu:link, 
            #main-nav li #selmenu:link {
            font-size: 9pt; 
            font-weight:bold; 
            display: -moz-block;
            display: block;
            /*width: 173px;*/
            /*height: 100%;*/
            padding: 5px 0px 5px 6px;
            background: #080242; /*#9b947e;*/
            /*border-bottom: 1px solid #000000;*/
            text-decoration: none;
            color: #ffffff;
            }

            .selmenu:visited,
            #main-nav li #selmenu:visited {
            font-size: 9pt; 
            font-weight:bold; 
            display: -moz-block;
            display: block;
            /*width: 173px;*/
            /*height: 100%;*/
            padding: 5px 0px 5px 6px;
            background: #080242; /*#9b947e;*/
            /*border-bottom: 1px solid #000000;*/
            text-decoration: none;
            color: #ffffff;
            }

            .selmenu:hover,
            #main-nav li #selmenu:hover 
            {
            font-size: 9pt; 
            font-weight:bold; 
            background: #EEEEF0;
            color: #000000;
            }

            .menugen { font-family: Arial; font-size: 8pt; color:#000000; padding:10px;}

            /******************************************************** 
             * end of menu css          *
             *******************************************************/
    
    
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h1>
            Custom Navigation UI Elements</h1>
        <p>
            <asp:Label ID="bulletedList" runat="server"></asp:Label>
            
            <asp:SiteMapDataSource ID="siteMapData" runat="server" ShowStartingNode="False" /></p>
    </div>        
    </form>
</body>
</html>

<!-- Code for the CustomNavUI.aspx.vb -->

Partial Class CustomNavUI
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        'Create the bulleted list
        bulletedList.Text = String.Format("<ul id='main-nav'><li><a href=""{0}"" title=""{1}"">{1}</a></li>{2}</ul>", _
                            SiteMap.RootNode.Url, SiteMap.RootNode.Title, DisplaySiteMapLevelAsBulletedList())
    End Sub

    Private Function DisplaySiteMapLevelAsBulletedList() As String
        'Get the SiteMapDataSourceView from the siteMapData SiteMapDataSource
        Dim siteMapView As SiteMapDataSourceView = CType(siteMapData.GetView(String.Empty), SiteMapDataSourceView)

        'Get the SiteMapNodeCollection from the SiteMapDataSourceView
        Dim nodes As SiteMapNodeCollection = CType(siteMapView.Select(DataSourceSelectArguments.Empty), SiteMapNodeCollection)

        'Recurse through the SiteMapNodeCollection...
        Return GetSiteMapLevelAsBulletedList(nodes)
    End Function

    Private Function GetSiteMapLevelAsBulletedList(ByVal nodes As SiteMapNodeCollection) As String
        Dim output As String = String.Empty
        For Each node As SiteMapNode In nodes
            output &= String.Format("<li><a href=""{0}"" title=""{1}"">{1}</a>", node.Url, node.Title)

            'Add any children levels, if needed (recursively)
            If node.HasChildNodes Then
                output &= String.Format("<ul>{0}</ul>", GetSiteMapLevelAsBulletedList(node.ChildNodes))
            End If

            output &= "</li>"
        Next

        Return output
    End Function
End Class



<!-- The sitemap file -->


<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="~/Default.aspx" title="Home">
     <siteMapNode url="~/Books/Default.aspx" title="Books" pages="Default.aspx,Novels.aspx,History.aspx,Romance.aspx">
       <siteMapNode url="~/Books/Novels.aspx" title="Novels" pages="Default.aspx,Novels.aspx,History.aspx,Romance.aspx" />
       <siteMapNode url="~/Books/History.aspx" title="History" pages="Default.aspx,Novels.aspx,History.aspx,Romance.aspx"/>
       <siteMapNode url="~/Books/Romance.aspx" title="Romance" pages="Default.aspx,Novels.aspx,History.aspx,Romance.aspx" />
     </siteMapNode>
     <siteMapNode url="~/Electronics/Electronics.aspx" title="Electronics" pages="Electronics.aspx" />
     <siteMapNode url="~/DVDs/DVDs.aspx" title="DVDs" pages="DVDs.aspx,New.aspx,Old.aspx">
       <siteMapNode url="~/DVDs/New.aspx" title="New" pages="DVDs.aspx,New.aspx,Old.aspx" />
       <siteMapNode url="~/DVDs/Old.aspx" title="Old" pages="DVDs.aspx,New.aspx,Old.aspx" />
     </siteMapNode>
     <siteMapNode url="~/Computers/Computers.aspx" title="Computers" pages="Computers.aspx"/>
  </siteMapNode>
</siteMap>

Open in new window

0
atljarman
Asked:
atljarman
  • 4
  • 2
1 Solution
 
Carlos VillegasFull Stack .NET DeveloperCommented:
Hi buddy, I did something based in your example:
    Private Function GetSiteMapLevelAsBulletedList(ByVal nodes As SiteMapNodeCollection) As String
        Dim sbOutput As New StringBuilder

        For Each node As SiteMapNode In nodes
            sbOutput.AppendFormat("<li><a{2} href=""{0}"" title=""{1}"">{1}</a>", node.Url, node.Title, IIf(CurrentPageInChildNode(node), " class=""selmenuActive""", String.Empty))

            'Add any children levels, if needed (recursively)
            If CurrentPageInChildNode(node) Then
                sbOutput.AppendFormat("<ul>{0}</ul>", GetSiteMapLevelAsBulletedList(node.ChildNodes))
            End If

            sbOutput.Append("</li>")
        Next

        Return sbOutput.ToString()
    End Function

    Private Function CurrentPageInChildNode(ByVal node As SiteMapNode) As Boolean
        If node.HasChildNodes Then
            Dim currentUrl As String = Request.Url.AbsolutePath
            If node.Url.Equals(currentUrl, System.StringComparison.CurrentCultureIgnoreCase) Then
                Return True
            End If

            For Each childNode As SiteMapNode In node.ChildNodes
                If childNode.Url.Equals(currentUrl, System.StringComparison.CurrentCultureIgnoreCase) Then
                    Return True
                End If
            Next
        End If

        Return False
    End Function

Open in new window


The full example project can be downloaded from this link:
http://dl.dropbox.com/u/13237304/DynamicMenu.zip

I hope this help.
0
 
atljarmanAuthor Commented:
This is great!  Do you know of a good site map editor that could be incorporated into the ASP .Net Framework?  Your zip was exactly what I need.  Awarding points this am.
0
 
Carlos VillegasFull Stack .NET DeveloperCommented:
Hi, the author is closing the question by mistake, please take the corresponding actions to accept this as solution.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Carlos VillegasFull Stack .NET DeveloperCommented:
Hi atljarman, I dont know about a site map editor, but I'm sure that a Google search can give you the answer:
http://www.google.com/#q=site+map+editor
http://www.google.com/#q=sitemap+editor+aspnet
0
 
Carlos VillegasFull Stack .NET DeveloperCommented:
Hi atljarman! if this is the solution to your answer, you must accept this as solution, there is no way to give more points as you requested, I appreciate that. thank you.
0
 
atljarmanAuthor Commented:
On this solution the root node and parent nodes without children do not highlight when on the active page.  Any solution?
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now