Asp.net Core中如何逐个展示IEnumerable模型并实现前后切换功能

看起来你已经把所有Question数据传到视图了，现在要实现前后切换单题显示的功能对吧？我给你两种实用的实现方案，都是前端JavaScript控制，不用每次回发控制器，体验更流畅：

方案一：预渲染所有题目，切换显示状态 #

这种方式适合数据量不大的场景，把所有题目先渲染到页面，默认只显示第一个，其他隐藏，然后通过JS控制切换显示。

修改你的视图代码如下：

<div>
    @{
        // 因为IEnumerable没有IndexOf方法，用变量跟踪当前索引
        int currentItemIndex = 0;
    }
    @* 渲染所有题目项 *@
    @foreach (var item in Model)
    {
        <div class="question-item" style="display: @(currentItemIndex == 0 ? "block" : "none")">
            <p>@Html.Raw(item.QuestionContent)</p>
            @foreach (var answer in item.Answers)
            {
                <div>
                    @Html.Raw(answer.AnswerContent)
                    <input type="checkbox" name="answers_@item.Id" value="@answer.Id" />
                </div>
            }
        </div>
        currentItemIndex++;
    }

    <div class="mt-3">
        <a id="btnprev" class="btn btn-secondary" disabled> Prev </a>
        <a id="btnnext" class="btn btn-primary ms-2"> Next </a>
    </div>
</div>

@section Scripts {
    <script>
        // 获取所有题目容器
        const questionItems = document.querySelectorAll('.question-item');
        let activeIndex = 0;

        // 更新按钮禁用状态，防止越界点击
        function updateButtonStates() {
            document.getElementById('btnprev').disabled = activeIndex === 0;
            document.getElementById('btnnext').disabled = activeIndex === questionItems.length - 1;
        }

        // 切换到指定索引的题目
        function switchToQuestion(index) {
            // 隐藏当前活跃的题目
            questionItems[activeIndex].style.display = 'none';
            // 显示目标题目
            questionItems[index].style.display = 'block';
            // 更新当前索引
            activeIndex = index;
            // 同步按钮状态
            updateButtonStates();
        }

        // 绑定Next按钮事件
        document.getElementById('btnnext').addEventListener('click', () => {
            if (activeIndex < questionItems.length - 1) {
                switchToQuestion(activeIndex + 1);
            }
        });

        // 绑定Prev按钮事件
        document.getElementById('btnprev').addEventListener('click', () => {
            if (activeIndex > 0) {
                switchToQuestion(activeIndex - 1);
            }
        });

        // 初始化按钮状态
        updateButtonStates();
    </script>
}

方案要点： #

• 用currentItemIndex变量跟踪循环中的项索引，解决IEnumerable没有IndexOf方法的问题
• 给每个题目项加上.question-item类，默认只显示第一个
• 加入按钮状态控制：在第一个题目时禁用Prev，最后一个时禁用Next
• 给复选框设置了带题目ID的name和答案ID的value，方便后续提交表单时获取选中的答案（如果需要的话）

方案二：动态渲染题目内容 #

如果你的题目数量比较多，预渲染所有DOM会增加页面体积，这种方式更合适：把所有题目数据转为JSON对象存在JS里，然后动态渲染当前显示的题目内容。

<div>
    <div id="question-content-container">
        <!-- 动态渲染的内容会放在这里 -->
    </div>

    <div class="mt-3">
        <a id="btnprev" class="btn btn-secondary" disabled> Prev </a>
        <a id="btnnext" class="btn btn-primary ms-2"> Next </a>
    </div>
</div>

@section Scripts {
    <script>
        // 把后端Model转为JS可操作的JSON对象
        const allQuestions = @Html.Raw(Json.Serialize(Model));
        let currentQuestionIndex = 0;

        // 渲染指定索引的题目
        function renderQuestion(index) {
            const question = allQuestions[index];
            let contentHtml = `<p>${question.QuestionContent}</p>`;
            // 渲染答案选项
            question.Answers.forEach(answer => {
                contentHtml += `<div>${answer.AnswerContent}<input type="checkbox" name="answers_${question.Id}" value="${answer.Id}" /></div>`;
            });
            document.getElementById('question-content-container').innerHTML = contentHtml;
        }

        // 更新按钮状态，逻辑和方案一一致
        function updateButtonStates() {
            document.getElementById('btnprev').disabled = currentQuestionIndex === 0;
            document.getElementById('btnnext').disabled = currentQuestionIndex === allQuestions.length - 1;
        }

        // 绑定切换事件
        document.getElementById('btnnext').addEventListener('click', () => {
            if (currentQuestionIndex < allQuestions.length - 1) {
                currentQuestionIndex++;
                renderQuestion(currentQuestionIndex);
                updateButtonStates();
            }
        });

        document.getElementById('btnprev').addEventListener('click', () => {
            if (currentQuestionIndex > 0) {
                currentQuestionIndex--;
                renderQuestion(currentQuestionIndex);
                updateButtonStates();
            }
        });

        // 初始化渲染第一个题目
        renderQuestion(0);
        updateButtonStates();
    </script>
}

方案要点： #

• 用Json.Serialize把后端Model转为JSON，前端直接操作JS对象
• 每次切换时动态生成当前题目的HTML，页面初始DOM更简洁
• 同样保留了按钮状态控制和复选框的合理命名，方便后续扩展

你可以根据自己的题目数量多少选择合适的方案，两种都能完美实现你要的前后切换功能~

内容的提问来源于stack exchange，提问作者topcool