Create dynamic menu in asp.net - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

Create dynamic menu in asp.net

Introduction: In this article I am going to explain how to create a dynamic menu in asp.net
Description:

Create a table (“Main_menu”).
Id
int
Menu_Name
varchar(50)
Menu_Url
varchar(100)
Menu_Order
int

Store Procedure:
To Insert data:
Create PROCEDURE Insert_Menu
(
@menuname varchar(50),
@menuurl varchar(100),
@menuorder int
)

AS
BEGIN
                SET NOCOUNT ON;

Insert into dbo.Main_menu values(@menuname,@menuurl,@menuorder)
END
GO
Store procedure to get data:
Create PROCEDURE [dbo].[Get_Menu]

AS
BEGIN
                SET NOCOUNT ON;

   Select * from dbo.Main_menu order by Menu_Order
END
HTML Markup of Create Menu page:
<fieldset style="height:auto;width:auto">
    <legend>Add Menu</legend>
    <table>
        <tr><td></td><td></td></tr>
        <tr><td>Menu Name:</td><td>
            <asp:TextBox ID="txtmenuname" runat="server"></asp:TextBox></td></tr>
            <tr><td></td><td></td></tr>
         <tr><td>Menu url:</td><td>
             <asp:TextBox ID="txtmenuurl" runat="server"></asp:TextBox></td></tr>           
                <tr><td></td><td></td></tr>
                      <tr><td>Menu Order:</td><td>
                          <asp:DropDownList ID="ddlmenuorder" runat="server">
                          <asp:ListItem>--Select--</asp:ListItem>
                          <asp:ListItem>1</asp:ListItem>
                          <asp:ListItem>2</asp:ListItem>
                          <asp:ListItem>3</asp:ListItem>
                          <asp:ListItem>4</asp:ListItem>
                          <asp:ListItem>5</asp:ListItem>
                          </asp:DropDownList>
                      </td></tr>
            <tr><td></td><td></td></tr>
                
              <tr><td></td><td>
                  <asp:Button ID="Button1" runat="server" Text="Add Menu" onclick="Button1_Click" />
                  </td></tr>
        </table>
    </fieldset>

On button click write the below given code (C#):
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ToString());

    protected void Button1_Click(object sender, EventArgs e)
    {
        SqlCommand cmd = new SqlCommand("Insert_Menu", con);
        cmd.CommandType = CommandType.StoredProcedure;
        con.Open();
        cmd.Parameters.AddWithValue("@menuname", txtmenuname.Text);
        cmd.Parameters.AddWithValue("@menuurl", txtmenuurl.Text);
        cmd.Parameters.AddWithValue("@menuorder", ddlmenuorder.SelectedValue);
        cmd.ExecuteNonQuery();
        con.Close();
        cmd.Dispose();
        Clearcontrol();
    }
    public void Clearcontrol()
    {
        txtmenuname.Text = "";
        txtmenuurl.Text = "";
        ddlmenuorder.SelectedValue = "--Select--";
    }

VB:
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("con").ToString())
  
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
        Dim cmd As New SqlCommand("Insert_Menu", con)
        cmd.CommandType = CommandType.StoredProcedure
        con.Open()
        cmd.Parameters.AddWithValue("@menuname", txtmenuname.Text)
        cmd.Parameters.AddWithValue("@menuurl", txtmenuurl.Text)
        cmd.Parameters.AddWithValue("@menuorder", ddlmenuorder.SelectedValue)
        cmd.ExecuteNonQuery()
        con.Close()
        cmd.Dispose()
        Clearcontrol()
    End Sub
    Public Sub Clearcontrol()
        txtmenuname.Text = ""
        txtmenuurl.Text = ""
        ddlmenuorder.SelectedValue = "--Select--"
    End Sub

Add a new page to show the menu. HTML Markup of the page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <style type="text/css">     
   a {text-decoration: none;}
        #MainMenu a:link, #MainMenu a:visited {color:White; font-weight:bold;margin-right: 10px;}
        #MainMenu a:hover {color:yellowgreen; font-weight:bold;}   
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <div id="MainMenu" style="height: 35px; width:100%; background-color:Black ; margin-top:-2px">
    <table width="100%" style="height: auto" ><tr><td width="20%"><p ></p></td>
        <td>
    <asp:DataList ID="dlMenu" runat="server" DataKeyField="id"
            RepeatDirection="Horizontal" ShowFooter="False" ShowHeader="False"
            CellPadding="5" CellSpacing="2">
        <ItemTemplate>
        <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("Menu_Url") %>' Text='<%# Eval("Menu_Name") %>' />
        </ItemTemplate>
        </asp:DataList>&nbsp;
    </td>
    </tr></table>
    </div>
    </div>
    </form>
</body>
</html>

Write below given code on (.aspx.cs) file of menu page (C#):

using System.Data;
using System.Data.SqlClient;
using System.Configuration;

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ToString());
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Bindmenu();
        }
    }
    public void Bindmenu()
    {
        SqlDataAdapter adp = new SqlDataAdapter("Get_Menu", con);
        adp.SelectCommand.CommandType = CommandType.StoredProcedure;
        DataTable dt = new DataTable();
        adp.Fill(dt);
        if (dt.Rows.Count > 0)
        {
            dlMenu.DataSource = dt;
            dlMenu.DataBind();
        }
    }

VB:
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

  Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("con").ToString())
  
    Public Sub Bindmenu()
        Dim adp As New SqlDataAdapter("Get_Menu", con)
        adp.SelectCommand.CommandType = CommandType.StoredProcedure
        Dim dt As New DataTable()
        adp.Fill(dt)
        If dt.Rows.Count > 0 Then
            dlMenu.DataSource = dt
            dlMenu.DataBind()
        End If
    End Sub

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Bindmenu()
        End If
    End Sub

End Class

Output:
Create dynamic menu

 Is this article helpful for you?

If yes post your comment to appreciate my work and fell free to contact me. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon