Registration open for April 2018 batches of ASP.NET MVC and Design Patterns instructor-led online courses. Conducted by Bipin Joshi on weekends. Register today ! Click here for more details.

Four Ways of Handling Multiple Submit Buttons in ASP.NET MVC

A common beginner question is - How to handle multiple submit buttons in
ASP.NET MVC?

In web forms this is quite straightforward because all you need to do is
write the Click event handler of the respective buttons. However, in ASP.NET MVC
you need to rely on the plain HTML and / or JavaScript to deal with the
situation. To that end this article illustrates four ways of handling multiple
submit buttons.

The following code uses a simple Customer model class that looks like this:

As you can see the BeginForm() helper specifies the action name to be
ProcessForm, controller name to be Home and the form method to be POST. To
display a data entry textboxes EditorForModel() helper is used. You can very
well use helpers such as TextBoxFor() and LabelFor() if you so wish.

There are two submit buttons - one with name attribute set to save and the
other with name of cancel. When you click a particular button, its name and
value is sent to the server. The ProcessForm() action needs to grab these values
to detect which one was clicked.

Notice that the ProcessForm() action receives three parameters through model
binding. The first parameter is the Customer object that holds the values
entered in the textboxes. The save and cancel string parameters hold the value
of the respective buttons. These parameter names must match the names of the
butttons on the form. If a button is clicked, its value is received in the
action. Otherwise its value will be null. For example, if you click on the Save
button the save parameter will hold Save and the cancel parameter will hold
null.

The if blocks then check the value of save and cancel parameters and
accordingly set a ViewBag property. The ProcessForm() action returns Result
view. The markup of Result view is shown below:

As you can see the submit parameter is checked for its value. If you click
the Save button, submit parameter will be Save. If you click on Cancel button
the submit parameter will have alue of Cancel. The switch statement then checks
the values and does some processing specific to a button.

3. HTML5 formaction and formmethod attributes

In this technique you use the formaction and formmethod attributes introduced
in HTML5. These attributes can be set on the buttons under consideration. The
formaction attribute indicates the form's action whereas the formpost attribute
indicates the form submition method.

As you can see the formaction attribute of the save button submits to SaveForm() action whereas the
cancel button submits to the CancelForm() action. The formmethod attribute is
set to post for both the buttons.

The SaveForm() needs to accept only the Customer model object because this is
exclusively called by the save button. Similarly the CancelForm() action needs
to receive only the model object since it is invoked exclusively by the cancel
button.

4. jQuery / JavaScript code

If above techniques doesn't meet your requirements you can
always use jQuery or JavaScript to programatically set the form action. The
following markup shows how the modified form looks like:

This time the ID attribute of the buttons is set to save and cancel
respectively. This way you can easily access them in the jQuery code. The jQuery
code that wires the click event handlers for these buttons and sets the form
action dynamically is shown below:

The click event handler of the save button sets the action attribute of the
form to /home/saveform. This is done using the attr() method of jQuery. On the
same lines the click event handler of the cancel button sets the action to
/home/cancelform.

Which technique to use?

All the techniques discussed above are standard ways of dealing with multiple
submit buttons. So, the selection depends on developers choice and application
requirements. If your logic is such that a single action is doing multiple
things then technique #1 comes handy. An example of this technique can be seen
here that develops a
wizard with next and previous buttons. The second technique has a drawback that
if you change the value attribute then you need to adjust the switch statement
accordingly. Moreover, it may pose a problem in multilingual websites since you
are checking the value displayed on the buttons. So, this technique should be
avoided if you anticipate the button texts to change. If the target browser supports HTML5 (all
the leading browsers support these attributes) then using formaction and
formmethod attributes is recommended. This way you get a cleaner separatation of
the concerns and the code is more readable. If the form or the buttons
themselves are being generated on-the-fly then jQuery technique is handy because
things are changing dynamically.

Bipin Joshi is a software consultant, trainer, author and yoga mentor having 22+ years of experience in software development. He also conducts online courses on ASP.NET MVC, ASP.NET Core and Design Patterns. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced the Yoga way of life he also teaches Ajapa Yoga to interested individuals. To know more about him click here.