sandeep sandeep - 4 years ago 524
Javascript Question

JQuery Steps in MVC6 - The correct IActionResult is not getting called in the controller on form submit

I have a Wizard capturing user information in multiple steps.

My view

<form id="form" action="#" class="wizard-big">
<h1>Type</h1>
<fieldset>
//..getting customer info Step 1
</fieldset>

<h1>Profile</h1>
<fieldset>
//..getting customer info Step 2
</fieldset>

<h1>Address</h1>
<fieldset>
//..getting customer info Step 3
</fieldset>

<h1>Finish</h1>
<fieldset>
//..getting customer info Step 4
</fieldset>
</form>


JQuery Script

$("#wizard").steps();
$("#form").steps({
bodyTag: "fieldset",
onStepChanging: function (event, currentIndex, newIndex) {
// Always allow going backward even if the current step contains invalid fields!
if (currentIndex > newIndex) {
return true;
}


var form = $(this);

// Clean up if user went backward before
if (currentIndex < newIndex) {
// To remove error styles
$(".body:eq(" + newIndex + ") label.error", form).remove();
$(".body:eq(" + newIndex + ") .error", form).removeClass("error");
}

// Disable validation on fields that are disabled or hidden.
form.validate().settings.ignore = ":disabled,:hidden";

// Start validation; Prevent going forward if false
return form.valid();
},
onStepChanged: function (event, currentIndex, priorIndex) {

// Suppress (skip) "Warning" step if the user is old enough and wants to the previous step.
if (currentIndex === 2 && priorIndex === 3) {
$(this).steps("previous");
}
},
onFinishing: function (event, currentIndex) {
var form = $(this);

// Disable validation on fields that are disabled.
// At this point it's recommended to do an overall check (mean ignoring only disabled fields)
form.validate().settings.ignore = ":disabled";

// Start validation; Prevent form submission if false
return form.valid();
},
onFinished: function (event, currentIndex) {
var form = $(this);

// Submit form input
form.submit();
}
}).validate({
errorPlacement: function (error, element) {
element.before(error);
},
rules: {

}
});


My controller methods

public IActionResult CreateSteps() //This is getting called on clicking the finish button generated by the Steps
{
return View();
}


[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult CreateSteps(Customer cust) //I want this to be called
{
if (ModelState.IsValid)
{
_context.Customer.Add(cust);
_context.SaveChanges();
return RedirectToAction("Index");
}
return View(cust);
}


The correct function is called by clicking this

But I want that Finish button should call the correct function

Answer Source

You should update your form tag's action property value to point to CreateSteps action method.

<form asp-action="CreateSteps" asp-controller="Home" id="form" class="wizard-big">
  <h1>Type</h1>
  <!-- Your existing code goes here -->
</form>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download