Inserting items into bootstrap-dropdown from SQL Table

Question

I am working on asp.net project and my code behind language is c#. I have one bootstrap dropdown in which i want to get the items from SQL Table. is there anyone who will help me in this regard. thanks in advance.

<li class="nav-item dropdown">
    <a class="btn btn-light dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Category
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</li>

Action, Another Action and Something else items should come from database (Category) Table. Using c# language on server side is much appreciable.

Answer 1

There are some ways to do it in WebForms, but first you need to make the DIV element of the dropdown menu accessible from the Code Behind.

See this snippet?

<ul class="nav nav-tabs">
    <li class="nav-item dropdown">
        <a class="btn btn-light dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Category
        </a>
        <div id="myDropdownMenu" runat="server" class="dropdown-menu" aria-labelledby="navbarDropdown">
        </div>
    </li>
</ul>

Note that I added 2 attributes : id="myDropdownMenu" and runat="server".

After this you can go to Code Behind to start populating the menu from a data source.

At least there are 2 ways to do this, as far as I know.

By manipulating the InnerHtml property, like this :

    private void DisplayMenuByConstructingHtmlTags(List<string> menuList)
    {
        var menuHtml = "";

        foreach (string menuText in menuList)
        {
            menuHtml += "<a class=\"dropdown-item\" href=\"#\">" + menuText + "</a>\n";
        }

        myDropdownMenu.InnerHtml = menuHtml;
    }

Or, by adding the menu as the child controls, like this :

    private void DisplayMenuByAddingChildControls(List<string> menuList)
    {
        foreach (string menuText in menuList)
        {
            var linkMenu = new HyperLink() { CssClass = "dropdown-item", NavigateUrl = "#", Text = menuText };
            myDropdownMenu.Controls.Add(linkMenu);
        }
    }

It's your call, which one to choose.

Btw, just to complete this example, you may try to call one of those methods from the Page_Load event, like this :

EDIT :

By your request, I've modified the samples by adding a connection to a table in a database. So, this is the module to load the data :

    private List<string> LoadMenuFromTable()
    {
        string connectionString = ConfigurationManager.ConnectionStrings["YourConnectionStringName"].ToString();

        var retVal = new List<string>();
        using (var connection = new SqlConnection(connectionString))
        {
            using (var cmd = new SqlCommand("SELECT menu_text FROM Table_1", connection))
            {
                connection.Open();
                using (var reader = cmd.ExecuteReader())
                {
                    while (reader.Read())
                    {
                        retVal.Add((string)reader["menu_text"]);
                    }
                }
            }
        }
        return retVal;
    }

And here's how you should call the module :

    protected void Page_Load(object sender, EventArgs e)
    {
        var menu = LoadMenuFromTable();

        DisplayMenuByAddingChildControls(menu);
        // or DisplayMenuByConstructingHtmlTags(menu);
    }

Oh, and remember to import these two libraries to make this sample works :

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

Hope it helps.