Question

我目前正在我的webforms应用程序中生成一个datagrid，我使用一个模板列将我的所有数据绑定到foreach行。

我正在尝试使用bootstrap手风琴窗格在手风琴标题中仅显示我的订单名称，然后在手风琴主体中展开订单的详细信息。

我遇到的麻烦是因为我使用我的c＃代码绑定数据生成的每一行具有相同的div id所以当我在任何行上执行collapse命令时，它总是会折叠第一行。如果我将其更改为折叠类而不是id，则会折叠网格中的每一行。有没有办法只折叠控件所在的手风琴组中的div而不是按ID或类折叠？

以下是我的代码，任何帮助将不胜感激：

asp:DataGrid ID="DataGrid_Quotes" CssClass="dataGrid" AutoGenerateColumns="false" runat="server" OnItemDataBound="DataGrid_Quotes_OnItemDataBound">
    <HeaderStyle CssClass="dataGridHeader"></HeaderStyle>
    <Columns>
        <asp:TemplateColumn>
            <ItemTemplate>
                <div class="dataRowItem">
                    <div class="accordion-group">
                        <div class="accodrion-heading">
                            <div class="dataGridMainItem">
                                <div class="container-fluid">
                                    <div class="col-sm-6">
                                        <asp:HyperLink runat="server" Text='<%# Eval("Title") %>' NavigateUrl='<%# Eval("Sale","QuoteDetails.aspx?SaleId={0}") %>' />
                                    </div>
                                    <div class="col-sm-6" align="right">
                                        <asp:Label runat="server" Text='<%# Eval("Quote") %>' />&nbsp;&nbsp;
                                        <a class="accordion-toggle" href="#collapseOne" data-toggle="collapse">
                                            <span class="glyphicon glyphicon-chevron-down"></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="collapseOne" class="accordian-body in collapse">
                            <div class="accordion-inner">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="dataGridItemBody">
                                            <div class="col-sm-6">
                                                Client:&nbsp;<asp:Label runat="server" Text='<%# Eval("Client") %>' />
                                                <br />
                                                Total:&nbsp;<asp:Label runat="server" Text='<%# String.Format(Eval(("Total"), "{0:c}")) %>' />
                                                <br />
                                            </div>
                                            <div class="col-sm-6" align="right">
                                                Created On:&nbsp;<asp:Label runat="server" Text='<%# Convert.ToDateTime(Eval("Created On")).ToString("d") %>' />
                                                <br />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <br />
                            </div>
                        </div>
                    </div>
                </div>
            </ItemTemplate>
        </asp:TemplateColumn>
    </Columns>
</asp:DataGrid>

Answer 1

我明白了。我用了＃34;类=＆＃34;崩＆＃34;然后设置data-target =＆＃34;＃＆lt;％＃Eval（＆＃34; Quote＆＃34;）％＆gt;＆＃34;它将div id动态分配给该行的引号。

<asp:TemplateColumn>
    <ItemTemplate>
        <div class="dataRowItem">
            <div class="accordion" id="accordion2">
                <div class="accordion-group">
                    <div class="accodrion-heading">
                        <div class="dataGridMainItem">
                            <div class="container-fluid">
                                <div class="col-sm-6">
                                    <asp:HyperLink runat="server" Text='<%# Eval("Title") %>' NavigateUrl='<%# Eval("Sale","QuoteDetails.aspx?SaleId={0}") %>' />
                                </div>
                                <div class="col-sm-6" align="right">
                                    <asp:Label runat="server" Text='<%# Eval("Quote") %>' />&nbsp;&nbsp;
                                    <a class="accordion-toggle" data-toggle="collapse" data-target="#<%# Eval("Quote") %>"><span class="glyphicon glyphicon-chevron-down"></span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-inner">
                        <div id="<%# Eval("Quote") %>" class="collapse">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="dataGridItemBody">
                                        <div class="col-sm-6">
                                            Client:&nbsp;<asp:Label runat="server" Text='<%# Eval("Client") %>' />
                                            <br />
                                            Total:&nbsp;<asp:Label runat="server" Text='<%# String.Format(Eval(("Total"), "{0:c}")) %>' />
                                            <br />
                                        </div>
                                        <div class="col-sm-6" align="right">
                                            Created On:&nbsp;<asp:Label runat="server" Text='<%# Convert.ToDateTime(Eval("Created On")).ToString("d") %>' />
                                            <br />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ItemTemplate>
</asp:TemplateColumn>

Collapse Bootstrap手风琴组

1 个答案: