Javascript Web表单保持引导模式打开，并在回发后显示在下一页？

大家早上好，我这辈子都找不到一个有效的答案。我希望完全按照问题所说的去做

只是一点背景知识，我正在开发一个应用程序，在第一次注册和登录之后，它将有一个“设置”过程。我是通过一个带引导的模态来实现的。将有多个步骤，用户将通过asp按钮提交数据，以更新该数据库

这些步骤就是我被卡住的地方，因为在回发之后，页面会重新加载，并且模式会在入门开始时重新打开

为了帮助解释我是如何分页的，我基本上为每个页面使用了一个新的div，并带有display:none，直到到达设置的那个部分。下面是一些代码

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-body">
            <div class="modalPageOne">
                ... content
                <asp:Button ID="btnOne" runat="server" OnClick="btnOne_Click" OnClientClick="NextPage();" Text="Submit">
            </div>
            <div class="modalPageTwo">
                ... content
                <asp:Button ID="btnTwo" runat="server" OnClick="btnTwo_Click" OnClientClick="NextPage();" Text="Submit">
            </div>
            <div class="modalPageThree">
                ... content
                <asp:Button ID="btnThree" runat="server" OnClick="btnThree_Click" OnClientClick="NextPage();" Text="Submit">
            </div>
        </div>
    </div>
</div>

... 内容
... 内容
... 内容

下面是一些javascript代码

<script>
    var currentPage = 1;
    function NextPage() {
        if(currentPage == 1) {
            $(".modalPageOne").hide();
            $(".modalPageTwo").show();
            currentPage++;
        } else if
        ... finish else if for all pages
    }
</script>

var currentPage=1；
函数下一页（）{
如果（当前页面==1）{
$（“.modalPageOne”）.hide（）；
$（“.modalPageTwo”）.show（）；
currentPage++；
}否则如果
…完成所有页面的其他操作
}

这应该足以说明我是如何完成这个设置过程的。所以基本上，当点击asp按钮时，我需要转到下一页。如果有人有任何想法，那将是惊人的

谢谢，

---

Andy

您可以将asp:multiview包装在单个模式div中，并在提交时修改所选视图，而不是为每个表单使用不同的模式。然后，您将始终使用不同的内容打开相同的模式。

我建议在最后一页提交所有数据，并对之前的所有页面使用相同的模式。将提交按钮替换为常规按钮，并使其触发

NextPage（）

code

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-body">
            <div class="modalPageOne">
                ... content
                <button class="next-button">Next</button>
            </div>
            <div class="modalPageTwo">
                ... content
                <button class="next-button">Next</button>
            </div>
            <div class="modalPageThree">
                ... content
                <button class="next-button" onserverclick="btnSubmit_Click" runat="server">Next</button>
            </div>
        </div>
    </div>
</div>

---

我还利用jQuery为按钮分配了点击事件处理程序。内联事件处理程序有多个缺点，既然您已经在使用jQuery，那么不妨利用它。

除非您需要对每个页面进行回发，否则我强烈建议除去最后一页之外的所有页面都不要使用提交按钮。然后，您可以简单地将事件处理程序附加到页面中的常规按钮。然后，在过程结束时提交数据。嗯，有趣的是，这是我脑海中的一种想法，我想我只是有点担心，如果在插入数据时出现错误，用户会不高兴他们需要再次完成整个过程。谢谢您可以在每次调用

NextPage（）

时添加页面验证，如果出现任何问题，则不会进入下一页。我把这个东西放在结账页面上，效果很好。人们更喜欢它，而不是每次点击按钮都提交页面的旧版本，因为页面之间没有等待。太棒了，非常感谢您的快速回复！我想这就是我要走的路：）再次感谢！可以将评论标记为已接受的答案吗？不可以，但是因为它有帮助，我将以答案的形式将一些内容组合在一起。很高兴我能帮忙：）

<script>
    var currentPage = 1;
    function NextPage() {
        if(currentPage == 1) {
            // validate page contents here - return if invalid
            $(".modalPageOne").hide();
            $(".modalPageTwo").show();
            currentPage++;
        } else if {
            // etc..
        }
    }

    $(function() {
        $("button.next-button").on("click", function() {
            NextPage();
        });
    });
</script>