Tuesday 16 September 2014

Asphelp: Create Dynamic Menu in Asp.net

Download Source

In this article you will learn how to create dynamic main menu and there submenu.

HTML CODE
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        #menu li {
            text-decoration: none;
            display: block;
            width: 150px;
            height:35px;
            font-family: Calibri;
            font-size: 17px;
            background-color: #131414;           
            padding: 8px;
            margin-bottom: 0px;
            margin-left:1px;
        }

            #menu li:hover {                
                background: rgba(98,125,77,1);
                background: -moz-linear-gradient(top, rgba(98,125,77,1) 95%, rgba(98,125,77,1) 98%, rgba(31,59,8,1) 100%);
                background: -webkit-gradient(left top, left bottom, color-stop(95%, rgba(98,125,77,1)), color-stop(98%, rgba(98,125,77,1)), color-stop(100%, rgba(31,59,8,1)));
                background: -webkit-linear-gradient(top, rgba(98,125,77,1) 95%, rgba(98,125,77,1) 98%, rgba(31,59,8,1) 100%);
                background: -o-linear-gradient(top, rgba(98,125,77,1) 95%, rgba(98,125,77,1) 98%, rgba(31,59,8,1) 100%);
                background: -ms-linear-gradient(top, rgba(98,125,77,1) 95%, rgba(98,125,77,1) 98%, rgba(31,59,8,1) 100%);
                background: linear-gradient(to bottom, rgba(98,125,77,1) 95%, rgba(98,125,77,1) 98%, rgba(31,59,8,1) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08', GradientType=0 );
            }
    </style>
</head>
<body style="background-color:#f5f4e3">
    <form id="form1" runat="server">
        <div align="center" style="font-size:25px;">Create Dynamic Menu Using Sql Server As Database</div>
        <br />
        <asp:Menu ID="menu" runat="server" Orientation="Vertical" ForeColor="#cccccc"></asp:Menu>
    </form>
</body>
</html>


Create Table Menudetail



C# Code

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.Data;
using System.Configuration;

namespace Dynamic_Menu
{
    public partial class Home_page : System.Web.UI.Page
    {
        SqlConnection con = new SqlConnection("Data Source=Servername;Initial Catalog=Databasename;Initegrated Security=True");
        DataSet ds = new DataSet();
        DataTable dt = new DataTable();

        protected void Page_Load(object sender, EventArgs e)
        {
            bindmenuitems();
        }

        public void bindmenuitems()
        {
            con.Open();          
            SqlDataAdapter ad = new SqlDataAdapter("select * from menudetail", con);
            ad.Fill(ds);
            dt = ds.Tables[0];
            DataRow[] drowpar = dt.Select("parentid=" + 0);

            foreach (DataRow dr in drowpar)
            {
                menu.Items.Add(new MenuItem(dr["m_name"].ToString(),dr["id"].ToString(), "", dr["m_location"].ToString()));
            }

            foreach (DataRow dr in dt.Select("parentid >" + 0))
            {
                MenuItem menuitem = new MenuItem(dr["m_name"].ToString(),dr["id"].ToString(),"", dr["m_location"].ToString());
                menu.FindItem(dr["parentid"].ToString()).ChildItems.Add(menuitem);
            }
            con.Close();
        }
    }
}


Final output

dynamic menu | dotnetasphelp


Download Source

No comments: