Member 14872744 Ответов: 2

Динамическое добавление элементов в раскрывающийся список bootstrap с помощью ASP.NET

Ниже приведен мой фрагмент кода. У меня есть выпадающий список в навигационной панели. Как только я нажму на кнопку выпадающего списка, я должен получить название брендов из базы данных.

Чтобы получить бренды из базы данных, я закодировал следующее на своей странице .cs.
Как привязать источник данных к раскрывающемуся списку начальной загрузки?

Что я уже пробовал:

<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);
        }
    }
}

Sandeep Mewara

И в чем же проблема?

Member 14872744

Я не могу получить привязку источника данных к раскрывающемуся списку bootstrap. Он показывает ошибку в этой строке
ddlbrands.DataSource = ds; // HtmlGenericControl не содержит определения источника данных

2 Ответов

Рейтинг:
1

Sandeep Mewara

В bootstrap выпадающие списки определяются в HTML через div/ul/li. Вы не предоставляете источник, как указано выше. Это не выпадающий элемент управления.

Рабочий JSFiddle: Edit fiddle - JSFiddle - Code Playground[^]
Рекомендации:
javascript - как открыть раскрывающийся список Bootstrap программно - переполнение стека[^]
c# - как объединить ASP с Bootstrap с динамическими списками - переполнение стека[^]
javascript - динамическое выпадающее меню с bootstrap не работает - переполнение стека[^]

Говоря это, если по какой-то причине вы хотите получить данные из базы данных, то вы можете пойти дальше с подходом вызова серверной стороны, когда вызывается выпадающий щелчок. Получите данные обратно в виде json, а затем преобразуйте их в определенную html-структуру и назначьте ее раскрывающемуся списку на стороне клиента. Хоть я и не устал, но теоретически это должно получиться.
Близким к приведенному выше примеру будет: ASP.NET формы - объекты DataTable jQuery плагин, сервер, сторону интеграции[^]
ASP.NET MVC с помощью jQuery на стороне сервера объект DataTable пример[^]

Это подход, и вы должны попробовать его и посмотреть.

Рейтинг:
0

Richard Deeming

Использовать ListView контроль:

<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 (System.Web.UI.WebControls) | Microsoft Docs[^]

Также обратите внимание, что Console.WriteLine не будет работать в Ан ASP.NET применение.