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,

@using (Html.BeginForm("Enroll", "Home", FormMethod.Post))
{
<div class="form-group">
@Html.LabelFor(m => m.Name)
@Html.TextBoxFor(model => model.Name, new {@class="form-control"})
</div>
// form is postback to /Home/Enroll
<input type="submit" value="Enroll" class="btn"/>
}

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,

@using (Html.BeginForm("Enroll", "Home", FormMethod.Post, new { id = "myFrom" }))
{
<div class="form-group">
@Html.LabelFor(m => m.Name)
@Html.TextBoxFor(model => model.Name, new {@class="form-control"})
</div>
}
// submit button is outside the form, it would postback to form's postback action: /Home/Enroll
<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,

@using (Html.BeginForm("Enroll", "Home", FormMethod.Post))
{
<div class="form-group">
@Html.LabelFor(m => m.Name)
@Html.TextBoxFor(model => model.Name, new {@class="form-control"})
</div>
// your main submit button will post back to: /Home/Enroll (default behavior)
<input type = "submit" value="Enroll" class="btn"/>
// your Delete button will post back to: /Home/Delete
<input type = "submit" value="Delete" formaction="@Url.Action("Delete")" formmethod="post" class="btn" />
}

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.

4 Comments

Join the conversation! Your thoughts help the community grow.

Kyle Lee4y ago
In my case, even if the submit button was inside the form, the breakpoint inside the post action wasn't hit. After I forced it, e.g. <input type="submit" value="Save" class="btn btn-primary" formaction="@Url.Action("SaveMe")" formmethod="post" />, now it works. Thanks for saving my life!
Laxmidhar Sahoo7y ago
Hi A good navigation aproches descriptions
Sourav Kumar Das7y ago
Nice article.
Laxmidhar Sahoo7y ago
Thanks for a good article