My question is, is there a possibility with ASP.NET Core MVC to put all data from my database in a foreach
loop in different bootstrap cards with navigation?
I’ve already tried this and found that it works partially. But as soon as I click on a navigation tab from the second card, the tabs are only changed on the first card.
That’s 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>
And here is my small javascript file:
$('#fragen-list a').on('click', function (e) { e.preventDefault() $(this).tab('show')
});
Card Nav Header:
As soon as I click on “Answer” on my card 2, my card 1 changes to the “Answer” page and not my card 2
Advertisement
Answer
Change your code like below:
<div class="row"> @{var i = 0; } //add this... @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"> //change here.. <a class="nav-link active" href="#frage_@i" role="tab" aria-controls="frage" aria-selected="true">Frage</a> </li> <li class="nav-item"> //change here... <a class="nav-link" href="#antwort_@i" 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"> //change here... <div class="tab-pane active" id="frage_@i" role="tabpanel"> <h5 class="card-title text-center">@q.Question</h5> </div> //change here... <div class="tab-pane" id="antwort_@i" role="tabpanel" aria-labelledby="history-tab"> //... </div> </div> </div> //... </div> </div> i++; //add this... } </div>