将动态 ID 分配给 bootstrap 手风琴 asp-经典

assigning dynamic id to bootstrap accordion asp-classic

我正在尝试使用可折叠手风琴面板,并从数据库中填充它,但不知道如何更改每个面板的面板 ID。

这是相关代码(我认为 - 不是编码员)

<% i = 1 %>
<% WHILE NOT objRS.EOF %>
<div aria-multiselectable="true" class="panel-group" id="accordion" role="tablist">
    <div class="panel panel-default">
        <div class="panel-heading clearfix" id="headingOne" role="tab">
            <div class="col-md-8 fz-2">
            <h4 class="panel-title">
            <%=objRS("data")%><br>
            <a aria-controls="collapseOne" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" role="button">
            <%=objRS("titolo")%>
            </a>
            </h4>
            </div>
                <div class="col-md-4 fz-2">
            <% IF LEN(objRS("idchiave")) > 1 THEN %>
                    <img class="img-responsive" name="img" src="public/<%=objRS("idchiave")%>" />
                <% ELSE %>
                    (No Foto)
                <% END IF %>
                </div>
        </div>
        <div aria-labelledby="headingOne" class="panel-collapse collapse in" id="collapseOne" role="tabpanel">
            <div class="panel-body">
                <div class="fz-gallery-wrap">

                </div>
            </div>
        </div>
    </div>
</div>

<% i = i + 1 %>
<% objRS.MoveNext %>
<% WEND %>

您需要将手风琴移到 while...wend 循环之外,然后在单词 "One" 出现的任何地方添加变量 i,以便每个面板都获得唯一标识符。

<% i = 1 %>
<div aria-multiselectable="true" class="panel-group" id="accordion" role="tablist">
<% WHILE NOT objRS.EOF %>
    <div class="panel panel-default">
        <div class="panel-heading clearfix" id="heading_<%=i %>" role="tab">
            <div class="col-md-8 fz-2">
            <h4 class="panel-title">
            <%=objRS("data")%><br>
            <a aria-controls="collapse_<%=i %>" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#collapse_<%=i %>" role="button">
            <%=objRS("titolo")%>
            </a>
            </h4>
            </div>
                <div class="col-md-4 fz-2">
            <% IF LEN(objRS("idchiave")) > 1 THEN %>
                    <img class="img-responsive" name="img" src="public/<%=objRS("idchiave")%>" />
                <% ELSE %>
                    (No Foto)
                <% END IF %>
                </div>
        </div>
        <div aria-labelledby="heading_<%=i %>" class="panel-collapse collapse<% If i = 1 Then %> in<% End If %>" id="collapse_<%=i %>" role="tabpanel">
            <div class="panel-body">
                <div class="fz-gallery-wrap">

                </div>
            </div>
        </div>
    </div>

<% i = i + 1 %>
<% objRS.MoveNext %>
<% WEND %>
</div>