Dynamically add items to bootstrap dropdown list using ASP.NET

Question

0.00/5 (No votes)

See more:

The following is my piece of code. I have a drop down list in the navbar. Once I click on the dropdown button, I should get the name of the brands from the database.

To get the brands from the database, I have coded the following in my .cs page.
How do I bind the datasource to the bootstrap dropdownlist?

What I have tried:

ASPX

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Navbar</a>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">Brands
                    </a>
                    <div class="dropdown-menu"  id="ddlbrands" aria-labelledby="navbarDropdownMenuLink" runat="server">
                        <%--<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>
            </ul>
        </div>
    </nav>
    <asp:ContentPlaceHolder ID="MainContentPlaceholder" runat="server">
    </asp:ContentPlaceHolder>

</body>

C#

protected void Page_Load(object sender, EventArgs e)
{

    if (!IsPostBack)
    {
        try
        {
            using (SqlConnection connect = new SqlConnection(cs))
            {
                using (SqlCommand scmd = new SqlCommand("SELECT DISTINCT BrandName FROM Products", connect))
                {
                    using (SqlDataAdapter da = new SqlDataAdapter(scmd))
                    {
                        using (DataSet ds = new DataSet())
                        {
                            connect.Open();
                            da.Fill(ds);
                            ddlbrands.DataSource = ds;             // throws error since Datasource is not a property.
                            ddlbrands.DataBind();
                            connect.Close();
                        }
                    }
                }
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.Message);
        }
    }
}

Posted 10-Aug-20 6:38am

Member 14872744

Updated 20-Nov-20 17:05pm

Richard Deeming

v2

Add a Solution

Comments

Sandeep Mewara 10-Aug-20 12:53pm

And the problem is?

Member 14872744 11-Aug-20 8:03am

I am not able to get the bind the datasource to the bootstrap dropdownlist. It shows error at this line
ddlbrands.DataSource = ds; // HtmlGenericControl does not contain a definition for DataSource

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sandeep Mewara · Answer 1 · 2020-08-11T09:22:00

In bootstrap, dropdowns are defined in HTML via div/ul/li. You don't provide the source as above. It's not a dropdown control.

Working JSFiddle: Edit fiddle - JSFiddle - Code Playground[^]
References:
javascript - How to open Bootstrap dropdown programmatically - Stack Overflow[^]
c# - How to combine ASP with Bootstrap with dynamic lists - Stack Overflow[^]
javascript - Dynamic dropdown menu with bootstrap not working - Stack Overflow[^]

Saying that, if for a reason you want to get the data out of database then you can go ahead with approach of calling the server side when the dropdown click is invoked. Get the data back as a json and then convert that into defined html structure and assign that to the dropdown on client side. Though I have not tired, but in theory this should work out.
Close to above example would be: ASP.NET Webform - Datatables JQuery plugin Server Side Integration[^]
ASP.NET MVC jQuery Server Side Datatable Example[^]

It's an approach and you need to try it out and see.

Richard Deeming · Answer 2 · 2020-08-12T05:10:00

Use a ListView control:

ASPX

<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
    <asp:ListView id="ddlbrands" runat="server">
    <ItemTemplate>
        <a class="dropdown-item" href="#"><%#: Eval("BrandName") %></a>
    </ItemTemplate>
    </asp:ListView>
</div>

ListView Class (System.Web.UI.WebControls) | Microsoft Docs[^]

Also note that Console.WriteLine will not work in an ASP.NET application.

Dynamically add items to bootstrap dropdown list using ASP.NET

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0