如何处理具有下一个和上一个按钮以及一个提交按钮的表单

我弹出一个提示用户的问题,当用户回答第一个问题并单击下一步时,第二个问题将出现,依此类推,一旦用户回答所有这些问题并单击最后一个下一个按钮, 我可以使用一个提交按钮来处理吗?

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>

私下

本文链接:https://www.f2er.com/3127979.html

大家都在问