Как работать с формой, в которой есть следующая и предыдущая кнопки с помощью одной кнопки отправки - PullRequest
Новая
       48

Как работать с формой, в которой есть следующая и предыдущая кнопки с помощью одной кнопки отправки

0 голосов
/ 10 ноября 2019

У меня есть всплывающее окно с вопросами для пользователя, когда пользователь отвечает на первый вопрос и нажимает следующий, появится второй вопрос и т. Д. Я хочу отправить эту форму, как только пользователь ответит на все эти вопросы, и щелкнитепоследняя следующая кнопка, могу ли я обработать это с помощью одной кнопки отправки?

1 Ответ

0 голосов
/ 11 ноября 2019

В следующем примере, демонстрирующем, как создать мастер, пример ограничен двумя представлениями (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);
  }
}
...