Tuesday 16 September 2014

Asphelp: Dynamic Menu With Admin Panel

Download Source

In this article you will learn how to make dynamic menu. admin panel is also used which provide the facility to add or remove menu or submenu.

Create Table

table menudetail | dotnetasphelp


Design HomePage



HTML HomePage
<!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 />
        <div align="center" style="font-size:20px"><a href="admin_page.aspx" style="text-decoration:none">Go To Admin Page</a></div>
        <br />
        <asp:Menu ID="menu" runat="server" Orientation="Vertical" ForeColor="#cccccc">
        </asp:Menu>
    </form>
</body>
</html>

C# homepage
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;Integrated 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();
        }
    }
}


HTML Design AdminPage



HTML Adminpage
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/button.css" rel="stylesheet" />
    <style type="text/css">
        .font-style {
            font-family: Aldrich;
            color: #000000;
            font-size: 20px;
            padding: 0;
        }

        .textbox {
            background: white;
            border: 1px solid #DDD;
            border-radius: 5px;
            box-shadow: 0 0 5px #DDD inset;
            color: #666;
            outline: none;
            height: 25px;
            width: 200px;
        }
    </style>
</head>
<body style="background-color:#f5f4e3">
    <div align="center" style="font-size:20px"><b>Admin Panel Create Dynamic Menu</b><br /><a href="Home_page.aspx" style="text-decoration:none"><br />Go To Home Page</a></div>
    <div align="center" style="margin-top:50px;">
        <form id="form1" runat="server">
            <asp:Panel ID="pnlMainMenu" runat="server" GroupingText="Add/Update/Delete MainMenu"
                Font-Size="Large" Width="850px">
                <table>
                    <tr>
                        <td class="font-style">Name/Location</td>
                        <td>
                            <input type="text" id="txtmainmenu" runat="server" class="textbox" placeholder="&nbsp;MenuName" /><br />
                        </td>
                        <td>
                            <input type="text" id="txtmainmenulocation" runat="server" class="textbox" placeholder="&nbsp;Menulocation" /><br />
                        </td>
                        <td>
                            <input type="submit" id="btn_create_mainmenu" runat="server" class="css_button" value="Create" onserverclick="btn_create_mainmenu_ServerClick" /><br />
                        </td>

                    </tr>
                    <tr>
                        <td class="font-style">Update Menu</td>
                        <td>
                            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                                <ContentTemplate>
                                    <asp:DropDownList ID="dllmainmenu" runat="server" AutoPostBack="True" CssClass="textbox" Font-Size="Medium"></asp:DropDownList>
                                </ContentTemplate>
                            </asp:UpdatePanel>
                        </td>
                        <td>
                            <input type="text" id="txtupdatemenu" runat="server" class="textbox" placeholder="&nbsp;MenuName" /></td>
                        <td>
                            <input type="text" id="txtupdatelocation" runat="server" class="textbox" placeholder="&nbsp;Menulocation" /></td>
                        <td>
                            <input type="submit" id="btn_update_mainmenu" runat="server" value="Update" class="css_button" onserverclick="btn_update_mainmenu_ServerClick" /></td>
                    </tr>
                    <tr>
                        <td class="font-style">Delete Menu</td>
                        <td>
                            <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                                <ContentTemplate>
                                    <asp:DropDownList ID="dllmainmenu2" runat="server" AutoPostBack="True" CssClass="textbox" Font-Size="Medium"></asp:DropDownList>
                                </ContentTemplate>
                            </asp:UpdatePanel>
                        </td>
                        <td>
                            <input type="submit" id="btn_delete_mainmenu" runat="server" value="Delete" class="css_button" onserverclick="btn_delete_mainmenu_ServerClick" /></td>
                        <td>
                            <asp:Label ID="lblmsg" runat="server"></asp:Label>
                        </td>
                    </tr>
                </table>
            </asp:Panel>
            <br />
            <asp:Panel ID="Panel1" runat="server" GroupingText="Add/Update/Delete SubMenu"
                Font-Size="Large" Width="850px">
                <table>
                    <tr>
                        <td class="font-style">SubMenuName</td>
                        <td>
                            <asp:UpdatePanel ID="UpdatePanel3" runat="server">
                                <ContentTemplate>
                                    <asp:DropDownList ID="dllsubmenu" runat="server" AutoPostBack="True" CssClass="textbox" Font-Size="Medium"></asp:DropDownList>
                                </ContentTemplate>
                            </asp:UpdatePanel>
                        </td>
                        <td>
                            <input type="text" id="txtsubmenu" runat="server" class="textbox" /></td>
                        <td>
                            <input type="text" id="txtsublocation" runat="server" class="textbox" /></td>
                        <td>
                            <input type="submit" id="btn_create_submenu" runat="server" class="css_button" value="Create" onserverclick="btn_create_submenu_ServerClick" /></td>
                    </tr>
                </table>
            </asp:Panel>
        </form>
    </div>
</body>
</html>

C# AdminPage
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 admin_page : System.Web.UI.Page
    {
        public static string parentid, id2;
        string parent = "0";
        SqlConnection con = new SqlConnection("Data Source=Servername;Initial Catalog=Databasename;Integrated Security=True");

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                bind();
            }
        }

        public void bind()
        {
            con.Open();
            SqlCommand cmd = new SqlCommand("select * from menudetail where parentid='" + "0" + "'", con);
            SqlDataAdapter ad = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            dt.Load(cmd.ExecuteReader());
            con.Close();
            dllmainmenu.DataSource = dt;
            dllmainmenu.DataTextField = "m_name";
            dllmainmenu.DataValueField = "id";
            dllmainmenu.DataBind();
            dllmainmenu2.DataSource = dt;
            dllmainmenu2.DataTextField = "m_name";
            dllmainmenu2.DataValueField = "id";
            dllmainmenu2.DataBind();
            dllmainmenu.Items.Insert(0, new ListItem("------------  Select  ------------", "0"));
            dllmainmenu2.Items.Insert(0, new ListItem("------------  Select  ------------", "0"));
            dllsubmenu.DataSource = dt;
            dllsubmenu.DataTextField = "m_name";
            dllsubmenu.DataValueField = "id";
            dllsubmenu.DataBind();
            dllsubmenu.Items.Insert(0, new ListItem("------------  Category  ------------", "0"));          
        }

        protected void btn_delete_mainmenu_ServerClick(object sender, EventArgs e)
        {
            con.Open();
            SqlCommand cmdbind = new SqlCommand("select * from menudetail where id='" + dllmainmenu2.SelectedItem.Value + "'", con);
            SqlDataAdapter ad = new SqlDataAdapter(cmdbind);
            DataSet ds = new DataSet();
            ad.Fill(ds);
            parentid = ds.Tables[0].Rows[0]["id"].ToString();
            SqlCommand cmd2 = new SqlCommand("select * from menudetail where parentid='" + parent + "'", con);
            SqlDataAdapter ad2 = new SqlDataAdapter(cmd2);
            DataSet ds2 = new DataSet();
            ad2.Fill(ds2);
            if (ds2.Tables[0].Rows.Count > 0)
            {
                id2 = ds2.Tables[0].Rows[0]["parentid"].ToString();
            }
            else
            {

            }
            if (parentid == id2)
            {
                lblmsg.Text = "already have sub menu";
            }
            else
            {               
                SqlCommand cmd = new SqlCommand("delete from menudetail where id='" + dllmainmenu2.SelectedItem.Value + "'", con);
                cmd.ExecuteNonQuery();
                dllmainmenu2.Items.Insert(0, new ListItem("------------  Select  ------------", "0"));              
                clear();
            }
        }

        protected void btn_create_mainmenu_ServerClick(object sender, EventArgs e)
        {
            con.Open();
            SqlCommand cmd = new SqlCommand("insert into menudetail(parentid,m_name,m_location) values('" + parent + "','" + txtmainmenu.Value + "','" + txtmainmenulocation.Value + "')", con);
            cmd.ExecuteNonQuery();
            con.Close();
            clear();
        }

        protected void btn_update_mainmenu_ServerClick(object sender, EventArgs e)
        {
            con.Open();
            SqlCommand cmd = new SqlCommand("update menudetail set m_name='" + txtupdatemenu.Value + "',m_location='" + txtupdatelocation.Value + "' where id='" + dllmainmenu.SelectedItem.Value + "'", con);
            cmd.ExecuteNonQuery();
            con.Close();
            clear();
        }

        public void clear()
        {
            Response.Redirect(Request.RawUrl);
            txtmainmenu.Value = "";
            txtmainmenulocation.Value = "";
            txtupdatelocation.Value = "";
            txtupdatemenu.Value = "";
        }

        protected void btn_create_submenu_ServerClick(object sender, EventArgs e)
        {
            con.Open();
            SqlCommand cmd = new SqlCommand("insert into menudetail(parentid,m_name,m_location) values('" + dllsubmenu.SelectedItem.Value + "','" + txtsubmenu.Value + "','" + txtsublocation.Value + "')", con);
            cmd.ExecuteNonQuery();
            clear();
        }
    }
}


Output Preview

dynamic menu with admin panel | dotnetasphelp


Download Source

1 comment:

Unknown said...

Thank you for sharing this nice informatics info...... it is very useful and informatics information