Member Avatar for olybobo

Dear all;


I have googled everywhere but still cant find a good robust code for this. I would like to use an XML to create a menu and submenu in asp.net in the master page. This is the design I would like

About Me|Interest

now if About Me is clicked on it shows all its associated submenu, so this is what you get

About Me|Interest

City|Place|Age

if Interest is clicked on instead, this is what you get instead,

About Me|Interest

Hobby|Games

How do you implement all this in asp.net, all help is greatly appreciated. Thank you. A good sample code will really help.

  • 3 Contributors
  • 2 Replies
  • 122 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by Netcode

Dani AI

Generated

For the About Me / Interest scenario described, a simple, robust pattern is to keep a small XML file (App_Data), parse it on the master page, render semantic nested UL/LI markup, and use a tiny client-side toggle for the submenu. This gives full control over markup, accessibility, caching and styling. The examples below complement the earlier replies from and by showing a code-first, easily-cacheable implementation.

Example XML (menu.xml)

<menu>
  <item title="About Me">
    <item title="City" url="/city.aspx" />
    <item title="Place" url="/place.aspx" />
    <item title="Age" url="/age.aspx" />
  </item>
  <item title="Interest">
    <item title="Hobby" url="/hobby.aspx" />
    <item title="Games" url="/games.aspx" />
  </item>
</menu>

Server-side: build HTML from XML and inject into a placeholder on the master page

using System.Xml.Linq;
using System.Text;
using System.Web;

private string BuildMenu(string xmlRelativePath)
{
    var path = Server.MapPath(xmlRelativePath);
    var doc = XDocument.Load(path);
    var sb = new StringBuilder();
    sb.Append("<ul class='menu' role='menubar'>");
    foreach (var item in doc.Root.Elements("item")) AppendItem(sb, item);
    sb.Append("</ul>");
    return sb.ToString();
}

private void AppendItem(StringBuilder sb, XElement el)
{
    var title = (string)el.Attribute("title") ?? "";
    var url = (string)el.Attribute("url") ?? "#";
    sb.AppendFormat("<li role='none'><a role='menuitem' href='{0}'>{1}</a>",
        HttpUtility.HtmlEncode(url), HttpUtility.HtmlEncode(title));
    var children = el.Elements("item");
    if (children.Any())
    {
        sb.Append("<ul class='submenu' role='menu'>");
        foreach (var c in children) AppendItem(sb, c);
        sb.Append("</ul>");
    }
    sb.Append("</li>");
}

Hook in Page_Load

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
        menuPlaceholder.Controls.Add(new Literal { Text = BuildMenu("~/App_Data/menu.xml") });
}

Client-side toggle (very small)

document.addEventListener('click', function(e) {
  var a = e.target;
  if (a.tagName.toLowerCase() === 'a' && a.parentNode.parentNode.classList.contains('menu')) {
    var li = a.parentNode;
    var submenu = li.querySelector('.submenu');
    if (submenu) { e.preventDefault(); submenu.classList.toggle('open'); }
  }
});

Notes and cautions: HtmlEncode titles/URLs to prevent XSS. Cache the generated HTML (MemoryCache or HttpRuntime.Cache) with a file dependency so edits to the XML invalidate the cache. Add an "active" class by comparing Request.Url to the url attribute for highlighting. Include ARIA roles and keyboard handlers for accessibility, and style .submenu.open in CSS to show/hide children.

Recommended Answers

All 2 Replies

Member Avatar for kvprajapati

You need to use SiteMap and Menu Control available in ASP.NET.

Member Avatar for Netcode

If you're working with the visual studio 2010, you are provided with a default template with that feature. if not, then proceed with adding your own menus from the toolbox.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.