Scribd Logo
Upload

Welcome to Scribd!

  • 100 views

    How To Create Multi Level Menu Dynamically Using C

    Uploaded by

    Kuldeep Jagda
    This document explains how to create a multi-level dynamic menu in ASP.Net using C#. It describes making changes to the database to add a parent category ID column. It then shows code to retrieve all categories from the database and bind them to a repeater, generating submenus by filtering on the parent ID within an item data bound event. CSS is added to style the menu as a dropdown on hover.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    How To Create Multi Level Menu Dynamically Using C

    Uploaded by

    Kuldeep Jagda
    100 views7 pages
    This document explains how to create a multi-level dynamic menu in ASP.Net using C#. It describes making changes to the database to add a parent category ID column. It then shows code to retrieve all categories from the database and bind them to a repeater, generating submenus by filtering on the parent ID within an item data bound event. CSS is added to style the menu as a dropdown on hover.

    Original Title

    How To Create Multi Level Menu Dynamically Using C.docx

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document explains how to create a multi-level dynamic menu in ASP.Net using C#. It describes making changes to the database to add a parent category ID column. It then shows code to retrieve all categories from the database and bind them to a repeater, generating submenus by filtering on the parent ID within an item data bound event. CSS is added to style the menu as a dropdown on hover.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    100 views7 pages

    How To Create Multi Level Menu Dynamically Using C

    Uploaded by

    Kuldeep Jagda
    This document explains how to create a multi-level dynamic menu in ASP.Net using C#. It describes making changes to the database to add a parent category ID column. It then shows code to retrieve all categories from the database and bind them to a repeater, generating submenus by filtering on the parent ID within an item data bound event. CSS is added to style the menu as a dropdown on hover.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    of 7

    How To Create Multi Level Menu

    Dynamically Using C# in ASP.Net


    Friends,

    This is Part 4 of the series “Creating Menus”. We have already seen how to create a single level
    menu dynamically in ASP.Net here. This post will explain how to create a multi-level menu
    dynamically using C# in Asp.Net. You can also read the other 2 posts in this series with the links
    mentioned below –

     Part 2
     Part 1

    To begin with, we will make some changes to our Categories table in our database to hold Parent
    and child relationships between the menus. We added a ParentCategoryID in our table that will
    store the Parent CategoryID of the menu present in record. For parent categories, vlue in this
    column equals Zero. Now, the table structure looks something like below-

    After the structure is defined, its time to fill in with some dummy data. Lets assume we have the
    below data.
    Our DB is defined. Time to write some code! We make changes to our existing Repeater Control
    adding a Literal control that will hold all sub menus of parent menu. An important thing to note
    in this markup is we have handled the “ItemDataBound” event of the Repeater control.


    < %#Eval("Name") %>

    In the code file (.master.cs/.aspx.cs/.acsx.cs), we will make a call to our database to get all the
    categories and bind the data to the repeater control. For doing this, we will write the below code.

    DataTable allCategories=new DataTable();


    protected void Page_Load(object sender, EventArgs e)
    {
    if (!IsPostBack)
    {
    LoadCategories();
    }
    }
    private void LoadCategories()
    {
    allCategories = GetAllCategories();
    rptCategories.DataSource = GetCategories();
    rptCategories.DataBind();
    }
    private void GetCategories()
    {
    SqlConnection connection = new SqlConnection("Data
    Source=NITESH;Initial Catalog=TestDB;Integrated Security=SSPI;"
    providerName="System.Data.SqlClient");
    SqlCommand selectCommand = new SqlCommand("SELECT ID,CategoryName
    FROM Categories WHERE ParentCategoryID=0", connection);
    DataTable dt = new DataTable();
    try
    {
    connection.Open();
    SqlDataReader reader = selectCommand.ExecuteReader();
    if (reader.HasRows)
    {
    dt.Load(reader);
    }
    reader.Close();
    }
    catch (SqlException)
    {
    throw;
    }
    finally
    {
    connection.Close();
    }
    }
    private void GetAllCategories()
    {
    SqlConnection connection = new SqlConnection("Data
    Source=NITESH;Initial Catalog=TestDB;Integrated Security=SSPI;"
    providerName="System.Data.SqlClient");
    SqlCommand selectCommand = new SqlCommand("SELECT ID,CategoryName
    FROM Categories", connection);
    DataTable dt = new DataTable();
    try
    {
    connection.Open();
    SqlDataReader reader = selectCommand.ExecuteReader();
    if (reader.HasRows)
    {
    dt.Load(reader);
    }
    reader.Close();
    }
    catch (SqlException)
    {
    throw;
    }
    finally
    {
    connection.Close();
    }
    }
    protected void Categories_ItemDataBound(object sender,
    RepeaterItemEventArgs e)
    {
    if (e.Item.ItemType == ListItemType.Item ||
    e.Item.ItemType==ListItemType.AlternatingItem)
    {
    if (allCategories != null)
    {
    DataRowView drv = e.Item.DataItem as DataRowView;
    string ID = drv["ID"].ToString();
    DataRow[] rows = allCategories.Select("ParentCategoryID="
    + ID, "Name");
    if (rows.Length > 0)
    {
    StringBuilder sb = new StringBuilder();
    sb.Append("
    ");
    foreach (var item in rows)
    {
    sb.Append("

     " + item["CategoryName"] + "

    ");
    }
    sb.Append("
    ");
    (e.Item.FindControl("ltrlSubMenu") as Literal).Text =
    sb.ToString();
    }
    }
    }
    }

    If you see the code above, most of the code is similar to our previous post. So, I will explain the
    remaining part in this post. 1st of all we are binding only parent categories to the Repeater
    control in GetCategories(). Secondly, we get all categories in a separate DataTable (lets call it
    Main DT for this post in future references) which we will use in the
    rptCategories_ItemDataBound() event handler. Inside the event handler, we check if the
    current item is a valid Item(while binding Repeater control fires this event for binding header
    and footer rows as well). If yes, we get the ID of the current record and filter our main DT where
    ParentCategoryID = ID of the current record so that we have all child categories for the current
    menu. Once filtered, we create a dynamic HTML string using <ul> and <li> tags and finally
    assign this text to the Literal control defined in our .aspx page.

    At this point, you’re done with your main coding part and as always you need to apply CSS to
    the menus. Add the below CSS to your .css file and execute the application.

    .menu{
    width: 500px;
    margin: 0px auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
    }
    .menu ul li a:link, div ul li a:visited {
    display: block;
    background-color: #f1f1f1;color:#000;
    text-align: center;
    text-decoration: none;
    padding: 4px;
    border-bottom: 1px solid #fff;
    width: 150px;
    }
    .menu ul li a:hover{
    background-color: #ccc;
    }
    .menu ul li ul li a:link, li ul li a:visited {
    display: block;
    background-color: #f1f1f1;
    color: #000;
    text-align: center;
    text-decoration: none;
    padding: 4px;
    border-bottom: 1px solid #fff;
    width: 150px;
    }
    .menu ul li ul li a:hover {
    background-color: #ccc;
    }
    .menu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    }
    .menu ul li {
    float: left;
    margin-left: 5px;
    }
    .menu ul li ul li {
    float: none;
    margin-left: 0px;
    }
    .menu ul li ul {
    display: none;
    }
    .menu li:hover ul{
    display: block;
    }

    You will see the output something like below.


    Hope you like this post! Keep learning and sharing folks!

    .Net

    Sharing is caring!
     Tweet
     Share
     Share
     Pin
     Mail
     Share

    You may also like:


    [ what's this ]

    Share this to support us :

     2Click to share on Facebook (Opens in new window)2


     Click to share on LinkedIn (Opens in new window)
     Click to share on Twitter (Opens in new window)
     Click to email this to a friend (Opens in new window)
     Click to print (Opens in new window)
     Click to share on Google+ (Opens in new window)
     More

    Related

    How to Create Single Level Menu Dynamically Using C# in ASP.NetApril 29, 2014In ".Net"
    Blog Post Series: Creating Menus - Simple to ComplexApril 23, 2014In "ASP.Net"

    How to Create a Hierarchical Menu Using HTML And CSSApril 24, 2014In "CSS"

    #.Net#ASP.Net#C##CSS#HTML#Menu

    You might also like