Handling Multiple Submit Buttons on the Same Form in ASP.Net MVC

Sometimes you may need to handle multiple submit buttons on the same form as as in the following screen shot.


                                       Figure 1: Multiple buttons

In the preceding figure we have the three buttons Login, Register and Cancel. Here each button has different functionality. In this way each submit button will post a form to the server but will provide different values of each button.

Procedure

1. Create a controller with one action method that accepts two parameters, one is for the model and the other is for determining the status of the button click.
   

   [HttpPost]
    public ActionResult Index(Login model, string command)
    {
        if (command=="Login")
        {
            // do stuff
            return RedirectToAction("Home");
        }
        else if (command=="Register")
        {
            // do stuff
            ViewBag.msg = "You have Clicked Register button";
            return View();
        }
   
        else if (command=="Cancel")
        {
            // do stuff
            ViewBag.msg = "You have Clicked Cancel Button";
            return View();
        }
        else
        {
            return View();
        }
   }

   In the preceding code snippet, assume you clicked on the Login button, then the command parameter will have the values Login, null, null respectively.
   
   
2. Create a View for the preceding controller.
   

   @model MvcMultipleSubmitButtons.Models.Login
   @{
       ViewBag.Title = "Index";
   }
   <h2>
   Handling multiple submit buttons in MVC </h2>
   <h5 style="color: Red">@ViewBag.msg</h5>
   <form action="Home/Index" id="myform" method="post" >
   //here action name is Index, controller name is Home. So the action path is Home/Index
       <table>
           <tr>
               <td>
                   UserName
               </td>
               <td>
                   :
               </td>
               <td>@Html.TextBoxFor(m => m.userName)
               </td>
               <td>
                   @Html.ValidationMessageFor(m => m.userName)
               </td>
           </tr>
           <tr>
               <td>
                   Password
               </td>
               <td>
                   :
               </td>
               <td>@Html.TextBoxFor(m => m.password)
               </td>
               <td>
                   @Html.ValidationMessageFor(m => m.password)
               </td>
           </tr>
       </table>
       <br/>
   
           <div style="padding-left: 80px;">
         <input type="submit" id="Login" value="Login" name="Command" title="Login" />
               <input type="submit" id="Register" value="Register" name="Command" title="Register" />
               <input type="submit" value="Cancel" name="Command" title="Cancel" />
   
       </div>
   </form>

   You can declare the form tag in another way as in the following:
   

   @using(Html.BeginForm("Index","Home",FormMethod.Post))
   {
      //here action name is Index, controller name is Home and form method is post.
   }

   Note: there is a relation between button name and action method parameter. For example, the button name is “Command”, the action parameter name should be “command”.
   
   
                                                                    Figure 2
   
   You can have different names for each button. So in that case you need to handle it as in the following:
   

   <input type="submit" id="Login" value="Login" name="Command1" title="Login" />
   <input type="submit" id="Register" value="Register" name="Command2" title="Register" />
   <input type="submit" value="Cancel" name="Command3" title="Cancel" />

   Controller
   

   public ActionResult Index(Login model, string command1, string command2, string command3)
   {
      // here command1 is for Login, command2 is for Register and command3 is for cancel
   }

3. Create a Model class with the name Login.
   

   public class Login
   {
       public string userName { get; set; }
       public string password { get; set; }
   }

Also the source code has been uploaded with this article, it may help you.

@Happy Coding.