Post
Ask Question

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
  1. Start Visual Studio
  2. 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.

    Handle Multiple Submit Buttons In Same Form In MVC

  3. Select MVC and click on the ok button.

    Handle Multiple Submit Buttons In Same Form In MVC

  4. Once you are done with new application creation, your folder structure looks like below screen snippet.

    Handle Multiple Submit Buttons In Same Form In MVC
Step 2
 
Add three buttons for different types of export options in Index.cshtml.
  1. @{  
  2.     ViewBag.Title = "Home Page";  
  3. }  
  4.   
  5. <div class="jumbotron">  
  6.     <form action="" method="post">  
  7.         <h1>Handke Multiple button in MVC</h1>  
  8.         <button type="submit" value="ExportToExcel" name="action">  
  9.             <i class="far fa-file-excel"></i> Export To Excel  
  10.         </button>  
  11.         <button type="submit" value="ExportToCsv" name="action">  
  12.             <i class="fas fa-file-csv"></i> Export To Csv  
  13.         </button>  
  14.         <button type="submit" value="ExportToPdf" name="action">  
  15.             <i class="far fa-file-pdf"></i> Export To Pdf  
  16.         </button>  
  17.     </form>  
  18. </div>  
  19.   
  20. <div class="row">  
  21.     <div class="col-md-4">  
  22.         <h2>Getting started</h2>  
  23.   
  24.     </div>  
  25.     <div class="col-md-4">  
  26.         <h2>Get more libraries</h2>  
  27.   
  28.     </div>  
  29.     <div class="col-md-4">  
  30.         <h2>Web Hosting</h2>  
  31.   
  32.     </div>  
  33. </div>  
 Step 3
 
Add all post methods in HomeController.cs
  1. using LazyLoadingDemo.CustomAttribute;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.Linq;  
  5. using System.Web;  
  6. using System.Web.Mvc;  
  7.   
  8. namespace HandleMultipleButtonInMVC.Controllers  
  9. {  
  10.     public class HomeController : Controller  
  11.     {  
  12.         public ActionResult Index()  
  13.         {  
  14.             return View();  
  15.         }  
  16.   
  17.         [HttpPost]  
  18.         public ActionResult ExportExcel()  
  19.         {  
  20.             ViewBag.Message = "You have clicked on Export to excel";  
  21.   
  22.             return View();  
  23.         }  
  24.   
  25.         [HttpPost]  
  26.         public ActionResult ExportCSV()  
  27.         {  
  28.             ViewBag.Message = "You have clicked on Export to csv";  
  29.   
  30.             return View();  
  31.         }  
  32.   
  33.         [HttpPost]  
  34.         public ActionResult ExportPDF()  
  35.         {  
  36.             ViewBag.Message = "You have clicked on Export to pdf";  
  37.   
  38.             return View();  
  39.         }  
  40.     }  
  41. }  
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. 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Reflection;  
  5. using System.Web;  
  6. using System.Web.Mvc;  
  7.   
  8. namespace HandleMultipleButtonInMVC.CustomAttribute  
  9. {  
  10.     [AttributeUsage(AttributeTargets.Method, AllowMultiple = false, Inherited = true)]  
  11.     public class AllowMultipleButtonAttribute : ActionNameSelectorAttribute  
  12.     {  
  13.         public string Name { get; set; }  
  14.         public string Argument { get; set; }  
  15.   
  16.         public override bool IsValidName(ControllerContext controllerContext, string actionName, MethodInfo methodInfo)  
  17.         {  
  18.             var isValidName = false;  
  19.             isValidName = controllerContext.HttpContext.Request[Name] != null &&  
  20.                 controllerContext.HttpContext.Request[Name] == Argument;  
  21.   
  22.             return isValidName;  
  23.         }  
  24.     }  
  25. }  
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. 
  1. using LazyLoadingDemo.CustomAttribute;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.Linq;  
  5. using System.Web;  
  6. using System.Web.Mvc;  
  7.   
  8. namespace HandleMultipleButtonInMVC.Controllers  
  9. {  
  10.     public class HomeController : Controller  
  11.     {  
  12.         public ActionResult Index()  
  13.         {  
  14.             return View();  
  15.         }  
  16.   
  17.         [HttpPost]  
  18.         [AllowMultipleButton(Name = "action", Argument = "ExportToExcel")]  
  19.         public ActionResult ExportExcel()  
  20.         {  
  21.             ViewBag.Message = "You have clicked on Export to excel";  
  22.   
  23.             return View();  
  24.         }  
  25.   
  26.         [HttpPost]  
  27.         [AllowMultipleButton(Name = "action", Argument = "ExportToCsv")]  
  28.         public ActionResult ExportCSV()  
  29.         {  
  30.             ViewBag.Message = "You have clicked on Export to csv";  
  31.   
  32.             return View();  
  33.         }  
  34.   
  35.         [HttpPost]  
  36.         [AllowMultipleButton(Name = "action", Argument = "ExportToPdf")]  
  37.         public ActionResult ExportPDF()  
  38.         {  
  39.             ViewBag.Message = "You have clicked on Export to pdf";  
  40.   
  41.             return View();  
  42.         }  
  43.     }  
  44. }  
 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.
Handle Multiple Submit Buttons In Same Form In MVC
      
Let's have a check for a button click Export To Excel on which the method gets executed.
 
Handle Multiple Submit Buttons In Same Form In MVC
 
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,


Similar Articles