Hi friends, In this tutorial, we are going to see how to handle multiple submit buttons on a single view in ASP.NET MVC. If you are working on a Web Application then this is a very common situation that you need to handle multiple submit button on a single page. Let’s see this using an example

How to handle multiple submit buttons on a single view in ASP.NET MVC:

The common question for all beginners who have just started working with ASP.NET MVC is how to handle multiple submit buttons on the View Page. There are many scenarios where we need to handle multiple submit buttons on the single view. For example, on the same view, we need to save the record using the Save button and there is another called Update which can be used to Update the record. In my situation, I am using two buttons Save and Cancel. With Save, button user can add Employee details or Cancel the operation using the Cancel buttons. Let’s see how can we handle multiple submit buttons on the single view using the different approaches.

First of all, Create an Empty ASP.NET MVC application called MultipleSubmitDemo.

Multiple Submit Button

Choose Empty Template and Click on the MVC checkbox and Click OK.

Multiple Submit Button

Right Click on the Model folder and Create a Class Employee. Write the following code in Employee Class.

Right Click on the Controller folder and Create a controller called HomeController. The HomeController class with default code is created.

Right Click on the Index action method and create a View called Index. Create a strongly typed view using the Employee Model class as shown in the below image.

Multiple Submit Button

After adding the View default code you will see which is generated by MVC scaffolding template.

Approach 1: Using the different name attributes.for submit button:

Modify the Index.cshtml code by the below one.

You can see from the above code that we have two buttons called Save and Cancel as

Both buttons have different name attribute as Save and Cancel.

Now we need to modify the HomeController in order to add a Post method. The HomeController should look like this.

Approach 2: Using submit buttons with the same value of name attribute.

Now what I am going to do is to make the name attibute of submit button same. So the Index

You can observe from the above code that the name attributes of the submit buttons  are same.

Change the Post in the HomeController from the below code..

You can see from the above code that the post method accepts two paramters, The first parameter is the Employee object which holds the data entered in the Textbox and the second parameter is the name of submit button. The second parameter is checked for the value of the submit button. .

Approach 3: Using HTML5 formaction and formmethod attributes-

HTML5 supports two important attributes called formaction and formmethod. The attribute can be set on the submit button. Where the formaction attribute specifies the action which is the name of the action method in the corresponding controller class and formmethod specifies the form submission method.

Now replace the Index file code from the below code.

Replace the following code in HomeController.

Appraoch 4: Using Jquery

We can also set target Controller and Action using Jquey and submit the form. To submit the form using jquery we need to add the following javascript markup into the View.

Now our Index.cshtml file should look like this.

and  the HomeController would be:

Output:

The output for the above 4 approaches is same.

Multiple Submit Button

View More:

Conclusion:

I hope you would love this post. Please don’t hesitate to comment for any technical help. Your feedback and suggestions are important to me.

Thank You.

Leave a Comment