Senden von Formulardaten für einen bestimmten Bootstrap-Assistenten Schritt

Question

Ich habe einen Bootstrap-Assistenten mit mehreren Schritten erstellt. Wenn ein Benutzer im zweiten Schritt des Assistenten auf die Schaltfläche "Speichern & weiter" klickt, möchte ich die eingegebenen Formulardaten in den zugrunde liegenden Datenspeicher übergeben, bevor ich zum dritten Schritt übergehe. Ich kann nicht scheinen, die Formularunterordnung zu arbeiten, die actionmethod auf dem Controller wird nicht genannt. Dies ist das Javascript auf der Seite, trifft es wird, aber die Controller-Aktion ist nicht

$("#scheduleReport").on("click", function() { 
 
      // Get the record's ID via attribute 
 
      //var id = $(this).attr('data-id'); 
 
      $('#frmAddSchedule').validate(); 
 
      $('#frmAddSchedule').submit(); 
 
     }); 
 

 
     $('#frmAddSchedule').on('submit', function (e) { 
 
      var $form = $(e.target); 
 
      if ($form.valid()) { 
 

 
       e.preventDefault(); 
 
       $.ajax({ 
 
        url: '@Url.Action("Create", "ReportScheduler")', 
 
        data: $form.serialize(), 
 
        async: true, 
 
        type: 'POST', 
 
        success: function (returnval) { 
 
         if (returnval.success == true) { 
 
          
 
          $("#schedulerGrid").igGrid("dataBind"); 
 
         } 
 
         if (returnval.success == false) { 
 
          //$form.parents('.bootbox').modal('hide'); 
 
          bootbox.alert({ title: '<div class="text-center text-danger"><i class="fa fa-exclamation-triangle"></i>&nbsp;&nbsp;ERROR</div>', message: returnval['responseText'] }); 
 
         } 
 
        }, 
 
        error: function (returnval) { 
 
         //$form.parents('.bootbox').modal('hide'); 
 
         bootbox.alert(returnval['responseText']); 
 
        } 
 
       }); 
 
      } 
 
     });

und die Controller-Aktion Methode

[HttpPost] 
    [ValidateAntiForgeryToken] 

    public async Task<ActionResult> Create([Bind(Prefix = "Schedule")]ReportScheduleViewModel item) 
    { 

gibt es irgendwelche 'best practices' um das zu tun? Was mache ich falsch ?

Answer 1

Nun, als Anfang kann ich Ihnen vielleicht mit dem Teil der Lage sein, die Controller-Aktion aufzurufen. Was die Frage "Best Practices" betrifft, haben Sie zu wenig Details gegeben. So

:

/** 
* On document ready. 
* 
* @return void 
*/ 
$(document).ready(function() { 
    activateScheduleReport(); 
    activateAddScheduleFormSubmit(); 
}); 

/** 
* Activate schedule report click event. 
* 
* @return void 
*/ 
function activateScheduleReport() { 
    $("#scheduleReport").on("click", function() { 
     // Get the record's ID via attribute 
     //var id = $(this).attr('data-id'); 
     validateAddScheduleForm(); 
     submitAddScheduleForm(); 
    }); 
} 

/** 
* Activate add schedule form submit. 
* 
* @return void 
*/ 
function activateAddScheduleFormSubmit() { 
    $('#frmAddSchedule').submit(function (e) { 
     var $form = $(this); 

     var ajax = $.ajax({ 
      async: true, // Please don't use this! :-) 
      method: 'post', 
      dataType: 'json', 
      url: '@Url.Action("Create", "ReportScheduler")', 
      data: $form.serialize() 
     }); 
     ajax.done(function (response, textStatus, jqXHR) { 
      if (response.success) { 
       $("#schedulerGrid").igGrid("dataBind"); 
      } else { 
       //$form.parents('.bootbox').modal('hide'); 
       bootbox.alert({ 
        title: '<div class="text-center text-danger"><i class="fa fa-exclamation-triangle"></i>&nbsp;&nbsp;ERROR</div>', 
        message: response.responseText 
       }); 
      } 
     }); 
     ajax.fail(function (jqXHR, textStatus, errorThrown) { 
      //$form.parents('.bootbox').modal('hide'); 
      bootbox.alert(textStatus + ' ' + errorThrown); 
     }); 
     ajax.always(function (response, textStatus, jqXHR) { 
      // Do whatever you want here... 
     }); 

     // Use this to prevent page refreshing. No need for preventDefault(). 
     return false; 
    }); 
} 

/** 
* Validate add schedule form. 
* 
* @return void 
*/ 
function validateAddScheduleForm() { 
    $('#frmAddSchedule').validate(); 
} 

/** 
* Submit add schedule form. 
* 
* @return void 
*/ 
function submitAddScheduleForm() { 
    $('#frmAddSchedule').submit(); 
} 

In der Aktion sollten Sie verwenden:

echo json_encode('whatever response string'); 

oder

echo json_encode(array(responseText: 'whatever response string')); 

Nota bene:

• Ich verwendete dataType: json. Sie können auch dataType: html verwenden. Wenn, dann Echo die Zeichenfolge oder das Array ohne die json_encode.
• Ich habe Ihre returnval in response umbenannt.
• Beobachten Sie die Parameter von Ajax fail(), z. B. von der alten error().
• Ich strukturierte den Js-Code in Funktionen.
• Als ich aus der PHP-Welt komme, habe ich echo zum Drucken und json_encode zum Kodieren im JSON-Format verwendet.

Viel Glück!

Answer 2

Am Ende habe ich den Isue herausgefunden, das Beispiel des Assistenten, das ich benutzt habe, hatte ein Formularelement (hatte es nicht bemerkt), das ich in meiner eigenen Form eingepackt hatte. Es funktioniert jetzt gut