Bootstrap 4.3分页绑定问题：如何实现问卷单题分页导航

嗨，别担心！作为Bootstrap和MVC新手遇到这种问题太正常了，我来帮你一步步实现问卷的单页切换功能～

第一步：调整视图结构 #

首先咱们要修改现有视图，把每个问卷问题单独标记，添加分页按钮，并且默认只显示第一个问题：

@model cq.Models.EmptySurveyViewModel
<div class="container">
    @using (Html.BeginForm("New", "Client", FormMethod.Post, new { role = "form" }))
    {
        @Html.HiddenFor(m => m.Sequence, Model.Sequence)
        @Html.AntiForgeryToken()
        <h2>@Model.Name</h2>
        <hr />
        @Html.ValidationSummary(false, "", new { @class = "text-danger" })
        @Html.HiddenFor(m => m.Name, new { @value = Model.Name })

        <!-- 问卷问题容器 -->
        <ul id="survey-questions-list">
            @for (int i = 0; i < Model.Questions.Count(); i++)
            {
                <li class="survey-question @(i == 0 ? "d-block" : "d-none")">
                    <!-- 你的问题字段和逻辑，比如： -->
                    <h5>@Model.Questions[i].Text</h5>
                    <!-- 这里放你的输入框、单选框等表单元素 -->
                    @Html.TextBoxFor(m => m.Questions[i].Answer, new { @class = "form-control" })
                </li>
            }
        </ul>

        <!-- Bootstrap分页按钮组 -->
        <div class="mt-4">
            <button type="button" id="prev-btn" class="btn btn-secondary" disabled>上一页</button>
            <span id="page-info" class="mx-3">第 1 页 / @Model.Questions.Count() 页</span>
            <button type="button" id="next-btn" class="btn btn-primary">下一页</button>
        </div>

        <button type="submit" class="btn btn-success mt-3">
            <i class="fas fa-check"></i> 结束 survey
        </button>
    }
</div>

这里的关键改动：

• 给每个问题li添加了survey-question类，用Bootstrap的d-block（显示）和d-none（隐藏）类控制初始显示状态，只显示第一个问题。
• 添加了分页按钮组，包括上一页、页码信息、下一页按钮，初始时上一页按钮是禁用状态。

第二步：添加JavaScript切换逻辑 #

接下来咱们用JavaScript来处理页面切换的交互，把这段代码放在视图的末尾（或者单独的JS文件里）：

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const questions = document.querySelectorAll('.survey-question');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const pageInfo = document.getElementById('page-info');
        let currentPage = 0; // 从0开始计数，对应第一个问题

        // 更新分页状态的函数
        function updatePagination() {
            // 隐藏所有问题
            questions.forEach(q => q.classList.add('d-none'));
            // 显示当前页的问题
            questions[currentPage].classList.remove('d-none');
            
            // 更新页码信息
            pageInfo.textContent = `第 ${currentPage + 1} 页 / ${questions.length} 页`;
            
            // 控制按钮禁用状态
            prevBtn.disabled = currentPage === 0;
            nextBtn.disabled = currentPage === questions.length - 1;
        }

        // 上一页点击事件
        prevBtn.addEventListener('click', function() {
            if (currentPage > 0) {
                currentPage--;
                updatePagination();
            }
        });

        // 下一页点击事件
        nextBtn.addEventListener('click', function() {
            if (currentPage < questions.length - 1) {
                currentPage++;
                updatePagination();
            }
        });

        // 初始化分页状态
        updatePagination();
    });
</script>

第三步：表单提交说明 #

不用担心隐藏的问题字段提交不了！因为所有表单元素都在<form>标签内部，即使被d-none隐藏，提交表单时MVC的模型绑定依然能正确获取所有问题的答案，不需要额外处理～

这样你就能实现每个问题单独显示，通过上一页/下一页按钮切换的功能啦！如果还有细节需要调整（比如样式、问题的表单元素），可以根据你的实际需求修改。

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