折疊式手風琴組

Question

我目前正在我的Webforms應用程序中生成一個數據網格，該數據庫正在使用一個模板列將所有數據綁定到foreach行中。

我正在嘗試使用Bootstrap手風琴窗格在手風琴標題中僅顯示我的訂單名稱，然后在手風琴主體中擴展訂單的詳細信息。

我面臨的問題是，因為我正在使用c＃代碼綁定數據，所以所生成的每一行都具有相同的div id，因此，當我對任何一行執行執行崩潰命令時，它總是折疊第一行。 如果我將其更改為折疊一個類而不是一個id，那么它將折疊網格中的每一行。 有沒有辦法只折疊控件所在的手風琴組中的div而不是按id或class折疊？

這是我的下面的代碼，任何幫助將不勝感激：

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

我想到了。 我使用了“ class =“ collapse”，然后設置了data-target =“＃<％＃Eval（” Quote“）％>”，將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>