我弹出一个提示用户的问题,当用户回答第一个问题并单击下一步时,第二个问题将出现,依此类推,一旦用户回答所有这些问题并单击最后一个下一个按钮, 我可以使用一个提交按钮来处理吗?
nieodie 回答:如何处理具有下一个和上一个按钮以及一个提交按钮的表单
在以下显示如何制作向导的示例中,该示例仅限于两个视图(FirstView和SecondView),它是使用记事本完成的,并需要对其进行测试。
索引视图
In [412]: np.random.choice(list('ACTG'),(3,4),replace=True)
Out[412]:
array([['C','C','G'],['A','A','G','T'],['G','T','T']],dtype='<U1')
第一视图
@model namespace.MyModel
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<head>
<script type="text/javascript">
$("#StartWizardButton").on("click",ShowWizard('FirstParamerValue'));
function ShowWizard(parameter) {
$.ajax({
url: '@Url.Action("FirstViewAction","HomeController")',type: "GET",data:{model:JSON.Parse(@Html.Raw(Json.Encode(Model)))},success: function (response,status,xhr) {
$('#WizardModalContainer').html(response);
$('#WizardModalDiv').modal({ backdrop: 'static',keyboard: false });
},error: function (response) {
alert(response.responseText);
}
});
}
</script>
</head>
<body>
<button id="StartWizardButton" type="submit" data-toggle="modal">Start Wizard</button>
............
<div class="modal fade container" id="WizardModalDiv" tabindex="1" role="dialog" aria-hidden="true">
<div class="modal-dialog" id="Wizard-modal-dialog">
<div class="modal-content" id="WizardModalContent">
<div class="modal-header" id="WizardModalHeader"></div>
<div class="modal-body" id='WizardModalContainer'>
</div>
<div class="modal-footer" id="WizardModalFooter">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
<button type="button" onclick="ShowWizard(); return false;" class="btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
</body>
第二视图
@model namespace.FirstModel
<head>
<script type="text/javascript">
$("#SecondViewWizardButton").on("click",ShowSecondView());
function ShowSecondView() {
$.ajax({
url: '@Url.Action("SecondViewAction",data:{model:JSON.Parse(@Html.Raw(Json.Encode(FirstModel)))},xhr) {
$('#WizardModalContainer').html(response);
},error: function (response) {
alert(response.responseText);
}
});
}
</script>
</head>
<body>
<button id="SecondViewWizardButton" type="submit" data-toggle="modal">Next</button>
............
</body>
控制器
@model namespace.SecondModel
<head>
<script type="text/javascript">
$("#SecondView").on("click",data:{model:JSON.Parse(@Html.Raw(Json.Encode(SecondModel)))},xhr) {
$('#WizardModalDiv').modal('hide');
},error: function (response) {
alert(response.responseText);
}
});
}
</script>
</head>
<body>
<button id="SecondViewWizard" type="submit" data-toggle="modal">Next</button>
............
</body>
私下