Handle Multiple Submit Buttons in the Same Form in MVC

Introduction

This article explains how to handle multiple submit buttons in a single view in MVC. Sometimes we need multiple submit buttons in the same form, but by default, MVC supports a single post method. Let's say I have a scenario where we need to add more than one button to get a different type of export functionality, such as Export To Excel, Export To CSV, Export To PDF.

If the user clicks on any button, then it will hit the same post method that we added in our form action post. However, as per our need, we need to call different post methods for different types of export functionality. So here, we need to write logic to handle multiple buttons in a single form in MVC. In this article, we are going to explain step by step how to handle multiple submit buttons using custom attributes. Let's start with step 1, creating a new application.

Step 1 - Create a new application in MVC

Start Visual Studio
Go to "File" then click on "New" and then click on "Project" and select "ASP.NET Web Application Template" as below and give an application name as per your requirements.
Select MVC and click on the ok button.
Once you are done with new application creation, your folder structure looks like below screen snippet.

Step 2

Add three buttons for different types of export options in Index.cshtml.

@{
ViewBag.Title = "Home Page";
}
<div class="jumbotron">
<form action="" method="post">
<h1>Handke Multiple button in MVC</h1>
<button type="submit" value="ExportToExcel" name="action">
<i class="far fa-file-excel"></i> Export To Excel
</button>
<button type="submit" value="ExportToCsv" name="action">
<i class="fas fa-file-csv"></i> Export To Csv
</button>
<button type="submit" value="ExportToPdf" name="action">
<i class="far fa-file-pdf"></i> Export To Pdf
</button>
</form>
</div>
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
</div>
<div class="col-md-4">
<h2>Get more libraries</h2>
</div>
<div class="col-md-4">
<h2>Web Hosting</h2>
</div>
</div>

Step 3

Add all post methods in HomeController.cs

using LazyLoadingDemo.CustomAttribute;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace HandleMultipleButtonInMVC.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult ExportExcel()
{
ViewBag.Message = "You have clicked on Export to excel";
return View();
}
[HttpPost]
public ActionResult ExportCSV()
{
ViewBag.Message = "You have clicked on Export to csv";
return View();
}
[HttpPost]
public ActionResult ExportPDF()
{
ViewBag.Message = "You have clicked on Export to pdf";
return View();
}
}
}

Step 4 - Create a custom attribute to handle multiple submit buttons

Here I have created a custom attribute that will validate the action method name and argument from which the button request gets hit.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using System.Web;
using System.Web.Mvc;
namespace HandleMultipleButtonInMVC.CustomAttribute
{
[AttributeUsage(AttributeTargets.Method, AllowMultiple = false, Inherited = true)]
public class AllowMultipleButtonAttribute : ActionNameSelectorAttribute
{
public string Name { get; set; }
public string Argument { get; set; }
public override bool IsValidName(ControllerContext controllerContext, string actionName, MethodInfo methodInfo)
{
var isValidName = false;
isValidName = controllerContext.HttpContext.Request[Name] != null &&
controllerContext.HttpContext.Request[Name] == Argument;
return isValidName;
}
}
}

Step 5 - Decorate all three methods with CustomeAttribute as we created above

As in the below code, we need to pass two parameters to this custom attribute like Name and Argument which will validate the action method name against the argument from which the method request comes. It returns true when both are matched, otherwise, it will return false. This will help to execute the method which is clicked by the user.

using LazyLoadingDemo.CustomAttribute;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace HandleMultipleButtonInMVC.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
[AllowMultipleButton(Name = "action", Argument = "ExportToExcel")]
public ActionResult ExportExcel()
{
ViewBag.Message = "You have clicked on Export to excel";
return View();
}
[HttpPost]
[AllowMultipleButton(Name = "action", Argument = "ExportToCsv")]
public ActionResult ExportCSV()
{
ViewBag.Message = "You have clicked on Export to csv";
return View();
}
[HttpPost]
[AllowMultipleButton(Name = "action", Argument = "ExportToPdf")]
public ActionResult ExportPDF()
{
ViewBag.Message = "You have clicked on Export to pdf";
return View();
}
}
}

Step 6 - Check all three buttons one by one

Click on Export to Excel

Let's click on the Export To Excel button and start debugging. First, it will hit the Allowmultiplebutton attribute and it will validate the action method name and argument. If the validate method returns true then the respective method executes. Here in our case, this attribute returns true so ExportExcel() method will execute. Let's have a snippet for the live debugging screen.

Handle Multiple Submit Buttons In Same Form In MVC

Once the above validation returns true, then it will execute the respective method. In the above case argument, "ExportToExcel" matches for method ExportExcel() so this method will execute.

Let's have a check for a button click Export To Excel on which the method gets executed.

In the same way, if users click on the other two buttons it will follow the same process. If the user clicks on export to CSV, then it will execute ExportCSV() method and when the user clicks on Export To PDF, then it will execute the ExportPDF() method.

Summary

I hope this will help the user to manage multiple buttons on a single view or single form in MVC. This way, the developer can develop a common custom attribute which will be useful in the entire project and can manage it in an easier way without writing more lines of code and conditions to handle multiple buttons.

Thanks for reading.

Here few more articles, If wish to read,

4 Comments

Join the conversation! Your thoughts help the community grow.

Jack Yasgar4y ago
Also wrote a blog post about detecting which button is pushed in MVC when there are multiple button options. It's a little bit less involved than the above code. https://jackyasgar.net/c-mvc-detect-which-button-was-clicked/
Dirk Lehmann4y ago
If you got other [httpPost] methodes in the controller without [AllowMultipleButton] entry you get following ERROR Message: The current request for action 'Index' on controller type 'HomeController' is ambiguous between the following action methods:
- Jignesh Kumar4y ago
  Dirk Lehmann AllowMultipleButton attribute is used only when you want to put more then one button on same view. If you are using one more button to make it work you need to decorate with [AllowMultipleButton]. By degault MVC support only one button on single view.
Alcides Melo6y ago
Does not work in .net Core. :/