我试图在c#asp.net页面上做一个类似于这个http://www.manuliferetirement.sg/calculator.html的页面。是否可以放置多个较小的页面/部分,并允许我单击下一步使用c#asp.net转到下一部分?
为什么是!检查网站的HTML代码,他们只是在他们各自的divs
中列出了所有步骤,并简单地将每个div的CSS样式从display: none
更改为display: block
以显示它们,而隐藏它们则相反。尝试右键单击网页并选择“检查元素”,然后尝试完成这些步骤。它应该让一切都清楚。
如果你想这样做,你需要一些javascript知识,但它在ASP.NET上是非常可行的。
如果您了解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>