MVC5 Bootstrap сворачиваемый с динамическим классом

#asp.net-mvc #twitter-bootstrap #twitter-bootstrap-3 #asp.net-mvc-5

#asp.net-mvc #twitter-bootstrap #twitter-bootstrap-3 #asp.net-mvc-5

Вопрос:

У меня есть привязка моего представления к datatable следующим образом

  @{int i = 1;}
    @foreach (var item in Model.Rows)
    {
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading bg-info">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse@(i)">
                        <div class="col-lg-3">
                            <img style="width:50px" class="float-left p-l-5" src="https://organicthemes.com/demo/profile/files/2012/12/profile_img.png" /> <div class="float-left p-l-10">
                                <h4 class="m-t-0">@item["First_Name"]</h4>
                                <p><b>#@item["Employee_Code"]</b></p>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <h4 class="m-t-0">@item["Leave_Description"]: @item["No_Of_Days"] days - <span class="blue_heading">@item["Start_date"]</span></h4>
                            <h4 class="m-t-0">@item["Leave_Purpose"]</h4>
                        </div>
                        <div class="col-lg-4">
                        </div>
                    </a>
                </div>
                <div id="collapse@(i)" class="panel-collapse collapse">
                    <div class="panel-body">
                        <div class="center_table">
                            <div class="border_table">
                                <table class="table table-hover table-expandable table-striped">
                                    <tr>
                                        <td>
                                            Leave Type: @item["Leave_Description"]
                                        </td>
                                        <td>
                                            Days : @item["No_Of_Days"]
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            From : @item["Start_Date"]
                                        </td>
                                        <td>
                                            To : @item["End_Date"]
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">Reason : @item["Leave_Purpose"]</td>
                                    </tr>

                                </table>
                            </div>
                            <div class="clearfix"></div>
                            <div class="well text-center p-10"><button type="button" class="btn btn-default">Accept Grant</button> <button type="button" class="btn btn-default">Reject</button></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        i  ;
    }
 

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

Может кто-нибудь сказать, какие изменения мне нужны для достижения сценария?

Ответ №1:

Можете ли вы попробовать

i=i 1;

Иногда foreach путает с оператором

Также вы можете попробовать collapse-@i вместо #collapse@(i)