如何使用一个提交按钮处理具有下一个和上一个按钮的表单答案

【问题标题】：How to handle a form that have next and previous buttons with one submit button如何使用一个提交按钮处理具有下一个和上一个按钮的表单
【发布时间】：2019-11-10 18:51:13
【问题描述】：

我有一个弹出窗口向用户提出问题，当用户回答第一个问题并单击下一步时，会出现第二个问题，依此类推，一旦用户回答了所有这些问题并单击最后一个下一步按钮，我可以用一个提交按钮来处理吗？

【问题讨论】：

标签： c# asp.net asp.net-mvc asp.net-mvc-4 formwizard

【解决方案1】：

在下面的示例中展示了如何制作向导，该示例仅限于两个视图（FirstView 和 SecondView），它是使用记事本完成的，还有待测试。

索引视图

@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", "HomeController")',
        type: "GET",
        data:{model:JSON.Parse(@Html.Raw(Json.Encode(FirstModel)))},
        success: function (response, status, 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", ShowSecondView());      

     function ShowSecondView() {      
        $.ajax({
        url: '@Url.Action("SecondViewAction", "HomeController")',
        type: "GET",
        data:{model:JSON.Parse(@Html.Raw(Json.Encode(SecondModel)))},
        success: function (response, status, xhr) {
             $('#WizardModalDiv').modal('hide');       
        },
        error: function (response) {
            alert(response.responseText);
        }
        });        
   }   

  </script>
</head>
<body>

<button id="SecondViewWizard" type="submit" data-toggle="modal">Next</button>

    ............

</body>

控制者

public class CommandeController : Controller
{
  public ActionResult Index()
  {
    return View("Index", MyModel);
  }

  public PartialViewResult FirstViewAction(MyModel model)
  {
    ............
    return PartialView("FirstView", FirstModel);
  }

  public PartialViewResult SecondViewAction()
  {
     ...........
     return PartialView("SecondView", SecondModel);
  }
}

真诚的

【讨论】：