Creating menus dynamically in web application

Im creating a web application in asp.net visual studio 2008..
in my application, i have manually created a menu control..
since, the menus changes by needs, i wish to load it dynamically from sql table..
help me with simple application which loads a menu control dynamically and i can develop mine using those concepts….

thank u very much

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

load your menu to a datatable.
then create a repeater in your ascx page (i guess your menur is a user control)
create the template for the repeater.
bind the datatable as the datasource for that repeater.
and there you go. a simple dynamic menu.

dont forget to do a cache on your control. or cache the datatable. so you wont open a connection to the database on every request for a page on your site

here is some examples for using a repeater :

http://articles.sitepoint.com/article/asp-net-repeater-control
http://www.w3schools.com/aspnet/aspnet_repeater.asp
http://www.asp101.com/articles/john/repeater/default.asp

Method 2

Download Source Code Here

<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>

In Code Behind File

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();
 }

}
}

Create an TransformXSLT.xsl

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output method="xml" indent="yes" encoding="utf-8"/>
 <!-- Find the root node called Menus
 and call MenuListing for its children -->
 <xsl:template match="/Menus">
 <MenuItems>
 <xsl:call-template name="MenuListing" />
 </MenuItems>
 </xsl:template>

 <!-- Allow for recusive child node processing -->
 <xsl:template name="MenuListing">
 <xsl:apply-templates select="Menu" />
 </xsl:template>

 <xsl:template match="Menu">
 <MenuItem>
 <!-- Convert Menu child elements to MenuItem attributes -->
 <xsl:attribute name="Text">
 <xsl:value-of select="Text"/>
 </xsl:attribute>
 <xsl:attribute name="ToolTip">
 <xsl:value-of select="ToolTip"/>
 </xsl:attribute>
 <xsl:attribute name="NavigateUrl">
 <xsl:value-of select="NavigateUrl"/>
 </xsl:attribute>

 <!-- Call MenuListing if there are child Menu nodes -->
 <xsl:if test="count(Menu) > 0">
 <xsl:call-template name="MenuListing" />
 </xsl:if>
 </MenuItem>
 </xsl:template>
</xsl:stylesheet>

Create Sql Table

CREATE TABLE [dbo].[Menu](
 [ID] [int] IDENTITY(1,1) NOT NULL,
 [Text] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
 [ToolTip] [varchar](255) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
 [NavigateUrl] [varchar](150) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
 [ParentID] [int] NULL)


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
Subscribe
Notify of
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x