Menu Creation using Menu Control in Asp.Net

In this article , we will see the menu creation using menu control. Follow the below steps

 
In App_Data Folder, save it as ‘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="MenuName"/>
      </xsl:attribute>
      <xsl:attribute name="ToolTip">
        <xsl:value-of select="Menutip"/>
      </xsl:attribute>
      <xsl:attribute name="NavigateUrl">
        <xsl:value-of select="MenuWebPage"/>
      </xsl:attribute>
      <xsl:attribute name="Url">
        <xsl:value-of select="MenuWebPage"/>
      </xsl:attribute>
      <xsl:attribute name="MenuID">
        <xsl:value-of select="MenuID"/>
      </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>


Menu Separator Image,



In aspx File,

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>
    <style>
        .Menu
        {
        font-weight: bold;
        font-size: 8pt;
        color: #E6EBF2;
        text-decoration:none;
        font-family: Tahoma;
        background-color:#95ADD3;
        text-align: left;
        }
        .IE8Fix
        {
                  z-index:100;
        }
        .Mnuborbottom
        {
            border-bottom:solid 1px black;
            border-left:solid 1px black;
            border-right:solid 1px black;
            border-top:solid 1px black;
            color:White;
            font-size:8pt;
            font-family:Tahoma, Arial, Sans-Serif;
            width:100%; display:block;
        }

    </style>
</head>
<body>
    <form id="form1" runat="server">
     <div class="resourcelinks" style="margin-left: 1em;">
                <ul>
                    <tr align="center">
                        <td>
                            <asp:Menu ID="Menu1" DataSourceID="xmlDataSource" runat="server" Font-Names="Tahoma"
                                ForeColor="White" StaticSubMenuIndent="10px" Orientation="Horizontal" StaticPopOutImageUrl="images/MenuSeparator.png"
                                CssClass="Menu" OnMenuItemClick="Menu1_MenuItemClick"
                                Height="22px" BorderStyle="None" TabIndex="1" StaticEnableDefaultPopOutImage="false"
                                >
                                <DataBindings>
                                    <asp:MenuItemBinding DataMember="MenuItem" NavigateUrlField="NavigateUrl" TextField="Text"
                                        ToolTipField="ToolTip" />
                                </DataBindings>
                               
                                <StaticMenuItemStyle Font-Size="8pt" Font-Names="Tahoma, Arial, Sans-Serif" Font-Bold="true"   ForeColor="#FFFFFF" Height="20px" HorizontalPadding="10px" BorderStyle="none" />
                                <StaticHoverStyle  Font-Size="8pt" Font-Names="Tahoma, Arial, Sans-Serif" Font-Bold="true" ForeColor="#FFFFFF" BackColor="#84C3E7"  />
                                <DynamicMenuStyle CssClass="IE8Fix" />
                                <DynamicMenuItemStyle BackColor="#84C3E7" Font-Bold=false ForeColor="#FFFFFF"  CssClass="Mnuborbottom"  Height="20px" HorizontalPadding="10px" />
                                <DynamicHoverStyle Font-Size="8pt" Font-Names="Tahoma, Arial, Sans-Serif" BackColor="#84C3E7"   ForeColor="#FFFFFF" />
                            </asp:Menu>
                            <asp:XmlDataSource ID="xmlDataSource" TransformFile="App_Data/TransformXSLT.xsl"
                                XPath="MenuItems/MenuItem" runat="server" EnableCaching="false" />
                        </td>
                    
                    </tr>
                </ul>
            </div>
    </form>
</body>
</html>


In Codebehind (.cs File)

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Cache.SetCacheability(HttpCacheability.NoCache);
        string _sRawURL = string.Empty;
        if (!string.IsNullOrEmpty(Convert.ToString(Request.RawUrl)))
            _sRawURL = Convert.ToString(Request.RawUrl);
        xmlDataSource.Data = LoadMenu("5841", _sRawURL).GetXml();

    }

    //Purpose : Used to Load the Menu into our Page.
    public DataSet LoadMenu(string sUserID, string sRawURL)
    {
        DataSet dsUserMenu = null;
        try
        {
            //Connection string from Web.Config
            string sDBConnection = CommonBehavior.GetMainConnectionString();
            string[] sTableName = { "Menu" };

            dsUserMenu = new DataSet();

            //Get the User Details
            DBHelper.FillDataset(sDBConnection, CommandType.Text, "usp_GetMenu", dsUserMenu, sTableName);

            dsUserMenu.DataSetName = "Menus";
            DataRelation objMenuRelation = new DataRelation("ParentChild",
                    dsUserMenu.Tables["Menu"].Columns["menuid"],
                    dsUserMenu.Tables["Menu"].Columns["parentmenuid"],
                    false);
            objMenuRelation.Nested = true;
            dsUserMenu.Relations.Add(objMenuRelation);

            foreach (DataRow dr in dsUserMenu.Tables[0].Rows)
            {
                if (dr["MenuWebPage"].ToString().Equals("#"))
                {
                    dr["MenuWebPage"] = sRawURL + "#";
                }
            }

            dsUserMenu.Tables[0].AcceptChanges();

            return dsUserMenu;
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

    protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
    {
        Response.Redirect(e.Item.Value);
    }

}


SQL SP

Create PROC usp_GetMenu    
AS         
BEGIN         
          SELECT
                    [MenuID],
                    [MenuName],
                    [MenuWebPage],
                    [ParentMenuID],
                    [SortOrder],
                    [MenuTip],
                    [Status]
          FROM DBO.tTestMenu  WHERE Status = 1
         
END



Table structure 

CREATE TABLE [dbo].[tTestMenu](
          [MenuID] [bigint] NOT NULL,
          [MenuName] [nvarchar](max) NOT NULL,
          [MenuWebPage] [varchar](100) NOT NULL,
          [ParentMenuID] [bigint] NULL,
          [SortOrder] [varchar](10) NOT NULL,
          [MenuTip] [varchar](50) NULL,
          [Status] [tinyint] NOT NULL,
 CONSTRAINT [PK_tTestMenu] PRIMARY KEY CLUSTERED
 (
          [MenuID] ASC
 )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF,
          IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON)
 ON [PRIMARY]
) ON [PRIMARY]

 
Table Inputs




output
 
22:29 | Category: | 0 comments