一页c#asp.net中有多个窗口

问题描述 投票:0回答:2

我试图在c#asp.net页面上做一个类似于这个http://www.manuliferetirement.sg/calculator.html的页面。是否可以放置多个较小的页面/部分,并允许我单击下一步使用c#asp.net转到下一部分?

c# asp.net
2个回答
1
投票

为什么是!检查网站的HTML代码,他们只是在他们各自的divs中列出了所有步骤,并简单地将每个div的CSS样式从display: none更改为display: block以显示它们,而隐藏它们则相反。尝试右键单击网页并选择“检查元素”,然后尝试完成这些步骤。它应该让一切都清楚。

如果你想这样做,你需要一些javascript知识,但它在ASP.NET上是非常可行的。


1
投票

如果您了解jQuery,它将对您有所帮助。只需将您的页面作为div放在一个页面内,并给它们一个独特的ID

    <div class="page">
        <div id="Page_One">
            <input type="text" name="email_address" placeholder="Email Address"/>
            <button id="GoToSecond">Next</button>
        </div>
        <div id="Page_Two" class="hidden">
            <input type="password" name="password" placeholder="Password"/>
            <input type="password" name="retype_password" placeholder="Retype Password"/>
            <button id="GoToLast">Next</button>
            <button id="ReturnToFirst">Back</button>
        </div>
        <div id="Page_Three" class="hidden">
            <p>A confirmation code has been sent to your email. Put your code here</p>
            <input type="text" name="confirmation_code" placeholder="Code"/>
            <button id="AddUser">Add User</button>
            <button id="ReturnToSecond">Back</button>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            //Inside here you need to do some javascript to handle your ui transition
            $("#GoToSecond").on('click', function(e){
                //Do your validation to move next
                $('#Page_One').hide("slide", {direction: "left"});
                $('#Page_Two').delay(500).show("slide", {direction: "right"});
            });

            //Second Page functions
            $("#ReturnToFirst").on('click', function(e){
                $('#Page_Two').hide("slide", {direction: "right"});
                $('#Page_One').delay(600).show("slide", {direction: "left"});
            });

            $("#GoToLast").on('click', function(e){
                //Do your validation to move next
                $('#Page_Two').hide("slide", {direction: "left"});
                $('#Page_Three').delay(600).show("slide", {direction: "right"});
            });

            //Last Page functions
            $("#ReturnToSecond").on('click', function(e){
                $('#Page_Three').hide("slide", {direction: "right"});
                $('#Page_Two').delay(600).show("slide", {direction: "left"});
            });

            $("#AddUser").on('click', function(e){
                alert("Make your submission here");
            });

        })
    </script>

    <style>
        .page{
            margin: 0 auto;
            width: 300px;
            min-height: 200px;
            box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
        }
        .hidden{ display: none;}
    </style>
© www.soinside.com 2019 - 2024. All rights reserved.