ASP.NET Core MVC 在带有许多卡片的 foreach 循环中使用带有导航选项卡的引导卡

如何解决ASP.NET Core MVC 在带有许多卡片的 foreach 循环中使用带有导航选项卡的引导卡

我的问题是，ASP.NET Core MVC 是否有可能将我数据库中的所有数据放入带有导航功能的不同引导卡中的 foreach 循环中？

我已经试过了，发现它部分工作。但是，只要我点击第二张卡片上的导航标签，第一张卡片上的标签就会发生变化。

这是我的 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 &nbsp; | &nbsp; Prüfungsfach: @q.ExamCategory &nbsp; | &nbsp; Schulfach: @q.SubjectCategory </p>
            </div>
        </div>
    </div>
}
</div>

这是我的小 javascript 文件：

$('#fragen-list a').on('click',function (e) {
e.preventDefault()
$(this).tab('show')

});

卡片导航标题：

只要我点击卡片 2 上的“回答”，卡片 1 就会变为“回答”页面，而不是卡片 2

解决方法

更改您的代码，如下所示：

<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>