ASP.NET MVC and Multiple Submit Buttons

Posted by: Malcolm Sheridan , on 5/16/2011, in Category ASP.NET MVC
Views: 168755
Abstract: The following article demonstrates how to differentiate multiple submit buttons in the same form with MVC.

Every website has a form on it. If there aren’t please show me! Most of the time a form performs a single action; posting data. Sometimes you want a form to contain multiple submit buttons. There are reasons for doing this which I won’t get into, but doing this seems hard at first, but once you understand how to do it, you’ll know it’s really quite easy. This article has been split into two articles as this one focuses on submitting a form the traditional way; without JavaScript. I’m using MVC 3 in this article.

For this example I’m using this form.

mvc-sample-form

One form, two submit buttons. The PostData action accepts givenName and surname.

 

mvc-postdata-action

The form will work as expected. Both submit buttons submit the form. There’s no way to differentiate which button submitted the form. The way to do this is to give the submit buttons a name. That way their values will be sent in the form’s data. Just like any successful control, if it doesn’t have a name, it won’t get submitted.

asp.net-mvc-sample-form

Now you need to update the action to accept the extra parameters.

mvc-form-update-action

This way you know exactly which submit button was pressed. From there you can route the flow of the application anyway you like. For this example I’m simply showing the user which button they pressed.

This is a simple example, but one that when you first think about how to do it, might not come to you straight away. I’ll focus on a different variation of this next week.

The entire source code of this article can be downloaded over here

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @malcolmsheridan


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by SDuarte on Monday, May 16, 2011 12:28 PM
There's another solution for this, you give both buttons the same name (for example "MyButton") and change the action to accept a String parameter with the same name as the button (for example public ActionResult PostData2(string MyButton)). When the form is sent This parameter will value be equal to the value of the button that was pressed, so you can check which one was used with something like if(MyButton == "Submit Me!){ do something } if(MyButton == "No Submit Me!"){do something else}
With this method you can add as many buttons as you want without having to add more parameters to the action.
Comment posted by Bryan Migliorisi on Monday, May 16, 2011 4:07 PM
This approach creates unnecessary clutter.  Check out my answer to this issue on StackOverflow which gives a much cleaner solution: http://stackoverflow.com/questions/5702549/asp-net-mvc3-razor-with-multiple-submit-button/5708496#5708496
Comment posted by Malcolm Sheridan on Monday, May 16, 2011 6:24 PM
@Bryan
That's a nice approach too.  I wanted to keep this simple, so passing in a string instead of a complex object was the solution for me.

@SDuarte
That's a nice approach too.  

Thanks for sharing the info guys.
Comment posted by Tero Teelahti on Thursday, June 9, 2011 12:15 AM
If you really want to route the application logic differently on the server, why not just create two different action methods, one for each button? It is almost trivial to write and ActionMethodSelectorAttribute to do that. I have demonstrated it here: http://teelahti.fi/blog/selecting-mvc-action-method-based-on-the-button-clicked
Comment posted by sergey on Sunday, August 14, 2011 6:15 AM
Take a look at this implementation:
http://nuget.org/List/Packages/MultipleSubmitButton
Comment posted by rakeshfrom1985 on Sunday, October 16, 2011 2:58 PM
Nice Post
Comment posted by Joao Prado on Friday, December 2, 2011 3:43 PM
Dude,

You save me a lot of headache. Thanks for the tip.
Comment posted by Chhaya Singh on Tuesday, December 27, 2011 3:56 AM
nice Post...it was very helpful.. thanks
Comment posted by Jhon on Thursday, January 26, 2012 11:08 AM
Nice Tips....i could apply this code for my details     save |save and new | save and exit | exit ;)
Comment posted by tyre on Monday, March 5, 2012 11:33 PM
fgsdfgd
Comment posted by Steven Bey on Friday, March 9, 2012 6:25 AM
This could be simplified by using the same name for the two buttons and then having a single parameter on the action method.  However, in practice, you would be using the value to then branch your code to cancel/delete/preview/save/etc., which would probably be in different methods.  I have written a blog post that shows you how to do that, using an implementation of the ActionNameSelectorAttribute (http://stevenbey.com/archive/2012/02/18/enable-multiple-submit-buttons-in-asp-net-mvc.aspx).
Comment posted by siva sankar on Saturday, May 5, 2012 8:48 AM
Really nice posting !! :)
Comment posted by Kishore NEthala on Monday, May 28, 2012 2:41 PM
TQ .. saved my day..
Comment posted by sqd on Tuesday, June 12, 2012 6:54 PM
xfs
Comment posted by Brett on Thursday, July 12, 2012 10:59 AM
Many of the sites I've programmed don't have <form> elements or Submit buttons.  They're informational.  CreatedByBrett.com is a good example:  it has plenty of content but no need for forms.
Comment posted by Debasis on Tuesday, August 28, 2012 7:20 AM
a++
Comment posted by Amita on Wednesday, September 26, 2012 11:29 PM
Thanks a lot! This was very helpful indeed :)
Comment posted by Rahul Kamboj on Thursday, January 24, 2013 12:40 AM
Nice, short precise article... wow..

Thanks
Comment posted by ramesh on Friday, January 25, 2013 1:14 AM
dsddd
Comment posted by ramesh on Friday, January 25, 2013 1:14 AM
dsddd
Comment posted by ramesh on Friday, January 25, 2013 1:14 AM
dsddd
Comment posted by iktibas on Wednesday, March 6, 2013 9:20 PM
ya baki entel baki
Comment posted by Malcolm Sheridan DICK IN AHOLE BUDDY on Thursday, June 6, 2013 8:41 PM
ROFL CAN WE SAY WHAT A PIECE OF CRAPOLA ARTICLE
SERIOUS WHO EVER POSTED THIS WORTHLESS TRASH NEED TO GET HIS UNIT INCHER OUT OF THE MUSLIMS GOATS AHOLE
Comment posted by Manish on Friday, July 26, 2013 1:45 AM
I worked for me
http://www.mixedresponse.com/Blog/Details/3
Comment posted by Mukul Lanke on Friday, April 11, 2014 6:25 AM
Thanks !!! This was exactly something I was looking for !!
Thank You Very Much !!
Comment posted by san on Monday, June 2, 2014 1:32 AM
thanks a lot !! simple and effective.. without tweaking with the existing system functions... saved my day.. thanks again.. :)

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel