ASP.NET MVC 3 Multiple Submit Inputs in One Form

Question

I am currently having an issue with multiple action buttons being in the same form.

The first button would perform verification while the second button would save profile. The third would simple redirect the user out of the page, but they are still required to go through controller some tracking purposes. Last button is delete. Because they are placed together and I do need ModelBinding passed through POST, it's impossible to separate them into multiple forms.

Currently, in order to differentiate which action is being clicked, I have a hidden input in my form and onclick, javascript would update the hidden input so that it will be passed back to the controller.

The reason I did this was because for some weird reasons, FormCollection doesn't want to hold my submit values. I tried accessing buttons in controller via

formCollection["verify"] 

But it turns out to be null. Both id and name of the input submit is set to verify.

I also tried a lot of other suggestions like this and this but to no avail. Is there a better approach to my problem without using javascript to alter hidden inputs?

Answer 1

The best approach is to have separate actions handling the different button calls as explained in this article.

If you want to have one ugly action doing all the stuff then you could give your submit buttons names:

@using (Html.BeginForm()) {     ... input fields for the model      <button type="submit" name="btn" value="verify">Verify data</button>     <button type="submit" name="btn" value="save">Save data</button>         <button type="submit" name="btn" value="redirect">Redirect</button> } 

You don't need any hidden fields or javascript. And then in your controller action you would check for the value of the btn parameter (which obviously will be part of you view model):

[HttpPost] public ActionResult Foo(MyViewsModel model) {     if (model.Btn == "verify")     {         // the Verify button was clicked     }     else if (model.Btn == "save")     {         // the Save button was clicked     }      else if (model.Btn == "redirect")     {         // the Redirect button was clicked     }      else     {         // ??? throw     }      ... } 

Of course if you follow my advice and separate your actions (as outlined in the article):

@using (Html.BeginForm("Action", "Home")) {     ... input fields for the model      <input type="submit" name="verify" value="Verify data" />     <input type="submit" name="save" value="Save data" />     <input type="submit" name="redirect" value="Redirect" /> } 

and then:

[HttpParamAction] [HttpPost] public ActionResult Verify(MyViewModel model) {     ... }  [HttpParamAction] [HttpPost] public ActionResult Save(MyViewModel model) {     ... }  [HttpParamAction] [HttpPost] public ActionResult Redirect(MyViewModel model) {     ... } 

which is a far cleaner code which doesn't violate the Single Responsibility Principle.