Web表单在回发后保持引导模式打开并在下一页上？答案

【问题标题】：Web forms keep bootstrap modal open and on next page after postback?Web表单在回发后保持引导模式打开并在下一页上？
【发布时间】：2015-07-07 15:01:04
【问题描述】：

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

只是一点背景知识，我正在开发一个应用程序，该应用程序将在首次注册和首次登录后进行“设置”过程。我正在通过带有 Bootstrap 的模式来执行此操作。用户将通过多个步骤通过 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>

这应该足以基本说明我是如何进行此设置过程的。所以基本上当单击 asp 按钮时，我需要转到下一页。如果有人有任何想法，那就太棒了！

谢谢，安迪

【问题讨论】：

除非您需要对每一页进行回发，否则我强烈建议您去掉除最后一页之外的所有提交按钮。然后，您可以简单地将事件处理程序附加到在页面中前进的常规按钮。然后，只需在流程结束时提交数据。
嗯，很有趣，我脑子里一直有这样的想法，我想我只是有点担心，如果插入数据时出现错误，用户会不高兴他们需要再次经历整个过程。谢谢！
您可以在每次调用NextPage()时添加页面验证，如果有任何问题，请不要进入下一页。我在结帐页面上有这个确切的东西，它工作得很好。人们更喜欢它而不是每次单击按钮时都会提交页面的旧版本，因为页面之间没有等待。
太棒了，非常感谢您的快速回复！我想这就是我要走的路:)再次感谢！可以将评论标记为已接受的答案吗？
不，但既然它有帮助，我会以答案的形式把一些东西放在一起。很高兴我能帮忙:)

标签： javascript jquery asp.net twitter-bootstrap

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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>

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

【讨论】：