Posting a form and redirecting to action ASP.NET MVC

Question

I have a navigation bar that uses JQuery to move between 4 stages of signup process.

However I need to make sure everything is working with JS disabled.

So I have these 4 link images at the bottom of the page and I need so that if one is clicked it posts to the current action so I can save all the form data and then redirect to the next stage.

The redirect is easy enough as I will just pass a parameter in the route or form but I don't know how to post the method using just action links.

I could put 4 different submit buttons with different classes for the image backgrounds etc but this feels wrong.

Any ideas?

Answer 1

Without Javascript, a simple link can't submit via POST. You have to use a submit button to do it. Fortunately, HTML provides an easy way to do the image-submit-button:

<input type="image" src="http://url/to/image" alt="Step 1" id="btnStep1" />

You can always add jQuery handling for the Javascript-able:

$('#btnStep1').click(function(){...});

Answer 2

You can have multiple submit buttons on your form:

<input type="submit" name="step1" value="Step 1"/>
<input type="submit" name="step2" value="Step 2"/>
<input type="submit" name="step3" value="Step 3"/>

and in your action:

public ActionResult Action(FormCollection form)
{
    if (!string.IsNullOrEmpty(form["step1"]))
    {
        // Step 1 button was clicked
    } 
    else if (!string.IsNullOrEmpty(form["step2"]))
    {
        // Step 2 button was clicked
    }
    else if (!string.IsNullOrEmpty(form["step3"]))
    {
        // Step 3 button was clicked
    }
    ...
}

Answer 3

You can use an attribute which I found on the net which handles multiple buttons on the same form. This will determine which action is executed on the controller. So, you could have 4 actions on the controller and the correct one is executed depending on which button was clicked irrespective of where it's called.

So little example; markup ...

<input type="submit" name="action" value="step1"/>
<input type="submit" name="action" value="step2"/>
<input type="submit" name="action" value="step3"/>
<input type="submit" name="action" value="step4"/>

Then in the controller ...

    [HttpPost]
    [MultiButton(MatchFormKey = "action", MatchFormValue = "step1")]
    public ActionResult Step1(/* parameters */) { ... }

    [HttpPost]
    [MultiButton(MatchFormKey = "action", MatchFormValue = "step2")]
    public ActionResult Step2(/* parameters */) { ... }

    [HttpPost]
    [MultiButton(MatchFormKey = "action", MatchFormValue = "step3")]
    public ActionResult Step3(/* parameters */) { ... }

    [HttpPost]
    [MultiButton(MatchFormKey = "action", MatchFormValue = "step4")]
    public ActionResult Step4(/* parameters */) { ... }

You can then click between any step in the sign up process (probably once validation is done and you've gone through each first) with relative ease.

Hope this helps someone. I've just clocked the question post date but thought I'd post this anyway :-)