Установите Bootstrap Accordion с определенным идентификатором

Question

У меня есть таблица, показывающая количество ошибок в каждом заказе.Каждая строка показывает, сколько ошибок в определенном порядке.Я хотел бы добавить кнопку «Просмотр» в конце строки, и когда пользователь щелкает ее, эта строка расширяется как аккордеон и отображает список ошибок.

 OrderId    Order From   Number of Error    Button
 ---------------------------------------------------
     1          A              4             See
     2          B              3             See
     3          C              2             See

Когда пользователь нажимает кнопку «Посмотреть» в строке2

 OrderId    Order From   Number of Error    Button
 ---------------------------------------------------
     1          A              4             See
     2          B              3             See
     Error 1- 
     Error 2-
     Error 3-
     3          C              2             See

Я не мог понять, как связать / связать строку с соответствующей ошибкой

 @{int i = 0;}
 @foreach (var item in Model.OrderList)
 {
     i++;
     <tr>
        <td>
            @Html.DisplayFor(ID)
        </td>
        <td>
             @Html.DisplayFor(FROM)
        </td>
        <td>
            @Html.DisplayFor(NumberOfError)
        </td>
        <td class="text-right">
<a class="btn btn-warning" data-toggle="collapse" href="#@i" role="button" aria-expanded="false" aria- 
controls="multiCollapseExample:@i">Toggle</a>
                </td>
            </tr>
            <tr class="collapse multi-collapse" id="@i">
                <td colspan="3">
                    Error 1
                    Error 2
                    Error 3
                </td>
            </tr>

enter code here

Я знаю, что мне нужно установить тег anchor href = "#" для класса= "collapse multi-collapse" id = "", но Bootstrap не нравится, если я начинаю с числа, такого как "1abc" или "abc: 1".Я не могу начать с номера или использовать ":" внутри идентификатора или href.

Я устал "abc @ {i}", он говорит, что я переменная не может использовать, как это пытался это "abc: @i" без ошибок, но не работал, также ": @iabc" или просто"@i"

Answer 1

Вы можете показать скрыть следующую tr, если вы создаете tr.С помощью jquery просто переключить следующее значение.

@{int i = 0;}
 @foreach (var item in Model.OrderList)
 {
     i++;
     <tr>
        <td>
            @Html.DisplayFor(ID)
        </td>
        <td>
             @Html.DisplayFor(FROM)
        </td>
        <td>
            @Html.DisplayFor(NumberOfError)
        </td>
        <td class="text-right">
        <button type="button" class="btn btn-primary btn-sm" onclick="changeToggle(this)">See <i class="fa fa-arrow-down" ></i></button>
                </td>
            </tr>
        <tr class="collapse" style="display:none;">
            <td colspan="3">
                Error 1
                Error 2
                Error 3
            </td>
        </tr>
        }
<script>


function changeToggle(btn){
        $(btn).find(i).removeClass("fa-arrow-up");
        $(btn).find(i).removeClass("fa-arrow-down");
    if($(btn).closest( "tr" ).next().css('display') == 'none'){
        $(btn).find(i).addClass("fa-arrow-down");
        $(btn).find(i).removeClass("fa-arrow-up");
    }else{
        $(btn).find(i).removeClass("fa-arrow-down");
        $(btn).find(i).addClass("fa-arrow-up");
    }
    $(btn).closest( "tr" ).next().toggle();
}

    </script>