Click here to Skip to main content
14,733,443 members
Please Sign up or sign in to vote.
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:

<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>
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
Updated 20-Nov-20 18:05pm
v2
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

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.
   
Use a ListView control:
<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.
   

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900