Post
Ask Question

Submitting A Form To Different Action Methods In ASP.NET MVC

There are different ways to indicate the action method to which we want to submit our form. I am going to explain these methods here. You can find the following working examples here.
 

Submit button inside the form (default behavior)

 
This is the most common scenario, we have one submit button inside the form. When we submit the form, it posts back to form’s submit action,
  1. @using (Html.BeginForm("Enroll", "Home", FormMethod.Post))      
  2. {      
  3.     <div class="form-group">      
  4.         @Html.LabelFor(m => m.Name)      
  5.         @Html.TextBoxFor(model => model.Name, new {@class="form-control"})       
  6.     </div>      
  7.          
  8.     // form is postback to /Home/Enroll      
  9.     <input type="submit" value="Enroll" class="btn"/>      
  10. }  

Submit button outside the form

 
If your submit button is outside the form, you can use the form attribute to indicate the form that should be used for postback,
  1. @using (Html.BeginForm("Enroll", "Home", FormMethod.Post, new { id = "myFrom" }))      
  2. {      
  3.     <div class="form-group">      
  4.         @Html.LabelFor(m => m.Name)      
  5.         @Html.TextBoxFor(model => model.Name, new {@class="form-control"})       
  6.     </div>      
  7. }    
  8.       
  9. // submit button is outside the form, it would postback to form's postback action: /Home/Enroll      
  10. <input type="submit" value="Enroll (outside)" form="myFrom" class="btn"/>  

Multiple submit buttons, posting back to different action methods

 
If you have more than one submit button and you want each button to postback to a different action, then use formaction attribute on your button,
  1. @using (Html.BeginForm("Enroll", "Home", FormMethod.Post))        
  2. {        
  3.     <div class="form-group">        
  4.         @Html.LabelFor(m => m.Name)        
  5.         @Html.TextBoxFor(model => model.Name, new {@class="form-control"})         
  6.     </div>        
  7.             
  8.     // your main submit button will post back to: /Home/Enroll (default behavior)        
  9.     <input type = "submit" value="Enroll" class="btn"/>        
  10.     // your Delete button will post back to: /Home/Delete        
  11.     <input type = "submit" value="Delete" formaction="@Url.Action("Delete")" formmethod="post" class="btn" />        
  12. }    

Wrapping Up

 
It's a good idea to always use to the default behaviour (submit button inside the form) but unfortunately in the real world, there are scenarios where we cannot stick to the default behaviour, as an example, when designing Shopless, we came accross a scenario where we had to include 2 different forms on the page with only one submit button... we had no choice but to drift away from the default behaviour... but in general we tried to stick to the first option where ever we could as it's simple to understand both for the user and developers.