ASP.NET 3.5 C#: Best way to create and display dynamic menu with submenus

I usually just create a datatable with one repeater and have all this html in my codebehind. I have not found an easy method for adding a submenu dynamically. Does anyone have a way to do this better?

Contents hide

Answers:

Method 1

Method 2

Method 3

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Render as a nested list of lists (<li></li> elements in a <ul></ul>). Use a jQuery menu plugin to convert to a dynamic menu.

Method 2

Normally, I would use a server control for a menu, that would add copies of itself for submenus, making it dynamically generated. However, consider caching it, as it is not quick to generate.

Method 3

You can create a xslt File and Get the records from the database dynamically.

Download the Full Source Code

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
     <title>DataBase Driven Menu</title>

     </head>
     <body>
     <form id="form1" runat="server">
     <div id="myslidemenu" class="jqueryslidemenu">
     <asp:Menu ID="Menu1" runat="server" StaticEnableDefaultPopOutImage="False"
     Orientation="Horizontal" StaticSubMenuIndent="10px" BackColor="#FFFBD6"
     DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em"
     ForeColor="#990000">
     <DataBindings>
     <asp:MenuItemBinding DataMember="MenuItem" NavigateUrlField="NavigateUrl" TextField="Text"
     ToolTipField="ToolTip" />
     </DataBindings>
     <DynamicHoverStyle BackColor="#990000" ForeColor="White" />
     <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
     <DynamicMenuStyle BackColor="#FFFBD6" />
     <DynamicSelectedStyle BackColor="#FFCC66" />
     <StaticHoverStyle BackColor="#990000" ForeColor="White" />
     <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
     <StaticSelectedStyle BackColor="#FFCC66" />
     </asp:Menu>

     </div>
     </form>
    </body>
    </html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Xml;
using System.Data;

public partial class _Default : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
 {
 if (!IsPostBack)
 {
 DataSet ds = new DataSet();
 XmlDataSource xmlDataSource = new XmlDataSource();
 xmlDataSource.ID = "xmlDataSource";
 xmlDataSource.EnableCaching = false;

string connStr = @"Data Source=.SQLEXPRESS;AttachDbFilename=G:AdminWebSite28App_DataDatabase.mdf;Integrated Security=True;User Instance=True";
 using (SqlConnection conn = new SqlConnection(connStr))
 {
 string sql = "Select ID, Text,NavigateUrl,ParentID from Menu";
 SqlDataAdapter da = new SqlDataAdapter(sql, conn);
 da.Fill(ds);
 da.Dispose();
 }

&nbsp;

ds.DataSetName = "Menus";
 ds.Tables[0].TableName = "Menu";
 DataRelation relation = new DataRelation("ParentChild",
 ds.Tables["Menu"].Columns["ID"],
 ds.Tables["Menu"].Columns["ParentID"],
 true);

relation.Nested = true;
 ds.Relations.Add(relation);

xmlDataSource.Data = ds.GetXml();

//Reformat the xmldatasource from the dataset to fit menu into xml format
 xmlDataSource.TransformFile = Server.MapPath("~/TransformXSLT.xsl");

//assigning the path to start read all MenuItem under MenuItems
 xmlDataSource.XPath = "MenuItems/MenuItem";

//Finally, bind the source to the Menu1 control
 Menu1.DataSource = xmlDataSource;
 Menu1.DataBind();
 }

}
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating