Is it possible to display data from a database in ASP.NET Core MVC using a foreach loop to generate different bootstrap cards with navigation tabs?
I have attempted this, and it seems to work partially. However, when I click on a navigation tab in the second card, the tabs switch only on the first card.
This is my index.html:
<div class="row">
@foreach (var q in Model.Question)
{
<div class="col-sm-12 col-lg-6 pt-sm-4 pt-4">
<div class="card ">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="fragen-list" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#frage" role="tab" aria-controls="frage" aria-selected="true">Frage</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#antwort" role="tab" aria-controls="antwort" aria-selected="false">Antwort</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content mt-3 mt-sm-3">
<div class="tab-pane active" id="frage" role="tabpanel">
<h5 class="card-title text-center">@q.Question</h5>
</div>
<div class="tab-pane" id="antwort" role="tabpanel" aria-labelledby="history-tab">
<p class="card-text">@Model.Answer.Single(a => a.Id == q.AnswerId).Antwort1</p>
<ul>
@if (@Model.Answer.Single(a => a.Id == q.AnswerId).Example1 != null)
{
<li class="card-text">@Model.Answer.Single(a => a.Id == q.AnswerId).Example1</li>
}
@if (@Model.Answer.Single(a => a.Id == q.AnswerId).Example2 != null)
{
<li class="card-text">@Model.Answer.Single(a => a.Id == q.AnswerId).Example2</li>
}
@if (@Model.Answer.Single(a => a.Id == q.AnswerId).Example3 != null)
{
<li class="card-text">@Model.Answer.Single(a => a.Id == q.AnswerId).Example3</li>
}
@if (@Model.Answer.Single(a => a.Id == q.AnswerId).Example4 != null)
{
<li class="card-text">@Model.Answer.Single(a => a.Id == q.AnswerId).Example4</li>
}
</ul>
@if (@Model.Answer.Single(a => a.Id == q.AnswerId).Antwort2 != null)
{
<p class="card-text">@Model.Answer.Single(a => a.Id == q.AnswerId).Antwort2</p>
}
@if (@Model.Answer.Single(a => a.Id == q.AnswerId).Antwort3 != null)
{
<p class="card-text">@Model.Answer.Single(a => a.Id == q.AnswerId).Antwort3</p>
}
</div>
</div>
</div>
<div class="card-footer text-center">
<p class="card-text small text-black-50">Ausbildungsfach: @q.Category | Prüfungsfach: @q.ExamCategory | Schulfach: @q.SubjectCategory </p>
</div>
</div>
</div>
}
</div>
This is my simple javascript file:
$('#fragen-list a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')
});
Card Nav Header:
https://i.sstatic.net/GWLSj.png
When I click on "Answer" in card 2, the content on card 1 changes to "Answer" instead of card 2