时间戳

首页 > 解决方案 > Collapse not working on my DataList cards

html - Collapse not working on my DataList cards

问题描述

In my page I have an example card and a DataList.

The collapse feature is working just fine on my example card but I can't make it work on my real cards.

Here's the code.

<div class="resultadosEspecialidades">
    <asp:DataList ID="DataList_CredenciadosEs" OnItemDataBound="DataList2_ItemDataBound" runat="server" Style="width: 100%;">
        <ItemTemplate>
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title"><%#Eval("NomeExibicao")%></h3>
                    <h6 class="card-subtitle mb-2 text-muted">Especialidade(s):</h6>
                    <p class="card-text"><%#Eval("BairrosExibicao") %></p>
                    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#<%#Eval("PkCredenciado")%>">
                        Mais informações
                    </button>
                </div>

                <div class="collapse card-body show" id="<%#Eval("PkCredenciado")%>">
                    <h5>Endereços</h5>
                    <asp:Repeater ID="Repeater2" runat="server">
                        <ItemTemplate>
                            <div class="card-body">
                                <h6><%# DataBinder.Eval(Container.DataItem, "Logradouro") %>, <%# DataBinder.Eval(Container.DataItem, "Numero") %>, <%# DataBinder.Eval(Container.DataItem, "Complemento") %>, <%# DataBinder.Eval(Container.DataItem, "Bairro") %> - <%# DataBinder.Eval(Container.DataItem, "Municipio") %> - <%# DataBinder.Eval(Container.DataItem, "CEP") %></h6>
                                <div>
                                    <h6>(<%# DataBinder.Eval(Container.DataItem, "Telefones[0].DDD") %>)<%# DataBinder.Eval(Container.DataItem, "Telefones[0].Numero") %></h6>
                                </div>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
            </div>
        </ItemTemplate>
    </asp:DataList>
</div>

And here's the example card that it's on the same page

<div class="resultadosEspecialidades">
    <asp:DataList ID="DataList_CredenciadosEs" OnItemDataBound="DataList2_ItemDataBound" runat="server" Style="width: 100%;">
        <ItemTemplate>
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title"><%#Eval("NomeExibicao")%></h3>
                    <h6 class="card-subtitle mb-2 text-muted">Especialidade(s):</h6>
                    <p class="card-text"><%#Eval("BairrosExibicao") %></p>
                    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#<%#Eval("PkCredenciado")%>">
                        Mais informações
                    </button>
                </div>

                <div class="collapse card-body show" id="<%#Eval("PkCredenciado")%>">
                    <h5>Endereços</h5>
                    <asp:Repeater ID="Repeater2" runat="server">
                        <ItemTemplate>
                            <div class="card-body">
                                <h6><%# DataBinder.Eval(Container.DataItem, "Logradouro") %>, <%# DataBinder.Eval(Container.DataItem, "Numero") %>, <%# DataBinder.Eval(Container.DataItem, "Complemento") %>, <%# DataBinder.Eval(Container.DataItem, "Bairro") %> - <%# DataBinder.Eval(Container.DataItem, "Municipio") %> - <%# DataBinder.Eval(Container.DataItem, "CEP") %></h6>
                                <div>
                                    <h6>(<%# DataBinder.Eval(Container.DataItem, "Telefones[0].DDD") %>)<%# DataBinder.Eval(Container.DataItem, "Telefones[0].Numero") %></h6>
                                </div>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
            </div>
        </ItemTemplate>
    </asp:DataList>

The example card is working just fine and the html on chrome is giving the correct id and data-target to the elements with <%#Eval("PkCredenciado")%>.

I don't know what can I do to make it work.

标签： htmlasp.netbootstrap-4

解决方案

问题是它Eval("PkCredenciado")可能是一个整数，所以折叠元素的 ID 变成了这样

<div class="collapse" id="2048">

但是 ID 不能以数字开头。所以给ID添加一个前缀

<button class="btn btn-primary" data-target="#element_<%# Eval("PkCredenciado") %>"">
     Mais informações
</button>

<div class="collapse" id="element_<%# Eval("PkCredenciado") %>">

推荐阅读