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

Question

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 1

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>