Collapse Bootstrap Asp/Net Core не работает

11 августа 2019, 05:00

Проблема в следующем, не могу понять по чему при переборе появляется две кнопки (так как сообщения два), название (Title) тоже верное в них, а контент появляется только при нажатии на первую кнопки.

То есть при нажатии на первую (верхнюю) кнопку с заголовком открывается сообщение. А, при нажатии на вторую кнопку (ниже) открывается то же первое сообщение.

   @foreach (var item in Model)
    {
        if (item.Status == "New")
        {
            <div class="panel panel-default">
                <div class="panel-heading">
                    <a class="btn btn-primary" data-toggle="collapse" href="#imageGallery" style="width: 100%">
                        @Html.DisplayFor(modelItem => item.Title)
                    </a>
                </div>
                <div class="panel-body collapse" id="imageGallery">
                    @Html.DisplayFor(modelItem => item.Title)<br />
                    @Html.DisplayFor(modelItem => item.Content) <br />
                    @Html.DisplayFor(modelItem => item.Employee.Name) <br />
                    @Html.DisplayFor(modelItem => item.Title) <br />
                    @Html.DisplayFor(modelItem => item.DateFrom)
                </div>
            </div>
        }
    }

Answer 1

Элементарно. Вы для всех моделей провайдите одинаковый айдишник #imageGallery. Как это работает: при нажатии на кнопку происходит магия, вытягивается селектор из href (у нас это #imageGallery). Далее по селектору берется секция (возмется первая секция по этому айдишнику).

Решение: рендерите уникальный айдишник для каждой секции:

@foreach (var item in Model)
{
    if (item.Status == "New")
    {
        <div class="panel panel-default">
            <div class="panel-heading">
                <a class="btn btn-primary" data-toggle="collapse" href="#imageGallery-@item.Title" style="width: 100%">
                    @Html.DisplayFor(modelItem => item.Title)
                </a>
            </div>
            <div class="panel-body collapse" id="imageGallery-@item.Title">
                @Html.DisplayFor(modelItem => item.Title)<br />
                @Html.DisplayFor(modelItem => item.Content) <br />
                @Html.DisplayFor(modelItem => item.Employee.Name) <br />
                @Html.DisplayFor(modelItem => item.Title) <br />
                @Html.DisplayFor(modelItem => item.DateFrom)
            </div>
        </div>
    }
}

Либо если у вас есть айдишник в модели - лучше используйте его вместо item.Title

Доки: