一页中的多个窗口C＃asp.net

Question

我正在尝试在c＃asp.net页面上创建类似于此http://www.manuliferetirement.sg/calculator.html的页面。 是否可以放置多个较小的页面/部分，并允许我单击下一步以使用c＃asp.net转到下一部分？

Answer 1

为什么是！ 他们检查了网站的HTML代码，仅将所有步骤布置在各自的divs ，并且只是将每个div的CSS样式从display: none更改为display: block来显示，而将其隐藏则相反。 尝试右键单击该网页，然后选择“检查元素”，然后尝试逐步进行操作。 它应该使一切都清楚。

如果要执行此操作，则需要一些JavaScript知识，但是在ASP.NET上它是非常可行的。

Answer 2

如果您知道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>