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:

 In the previous article I have explained Getting the ID of last inserted record in asp.net using output parameter, How to reset or clear all web form controls in asp.net, Getting the ID of last inserted record using SQL Server database in asp.net, Explain cookies in asp.net OR Explain cookies with example in asp.net and Example of Multiview control in asp.net .

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:

 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.