Question

早上好，我不能为我的生活找到一个有效的答案。我希望完全按照问题说明。

只是一点背景，我正在开发一个应用程序，它将在首次注册并首次登录后进行“设置”过程。我是通过一个带有Bootstrap的模态来做这个的。将有多个步骤，用户将通过asp按钮提交数据，以便更新该数据库。

这些步骤是在我重新加载页面重新加载并且模式在开始开始时重新打开之后卡住的地方。

为了帮助解释我是如何分页的，我基本上每个页面使用一个新的div，显示：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按钮我需要转到下一页。如果有人有任何想法，那将是惊人的！

谢谢，安迪

Answer 1

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

Answer 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将click事件处理程序分配给按钮。内联事件处理程序有多个缺点，因为你已经在使用jQuery，所以你也可以利用它。

网络表单在回发后保持bootstrap模式打开和下一页？

2 个答案: