Popular blog tags

Four Ways Of Handling Multiple Submit Buttons in the same form

Published

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

 

 

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.

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();  
     }  
}  

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> 

or

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.  
} 

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" />  
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  
}