Having multiple submit button in a form is very common scenario in any application we develop. For instance, we may have an input form with large number of input fields which will have Save (or Save as Draft) and Submit button in the same Form. By default, when we have multiple Submit buttons all buttons will post the data to single action method. In this article, let’s see how to change this behaviour to post to different action methods when we have multiple submit button in a form in Asp.Net MVC application.
Though we can do this in multiple ways, here we will discuss 2 primary methods, using HTML 5 formaction and another by using an ActionNameSelectorAttribute.
- Using HTML 5 Formaction Attribute
HTML 5.0 introduced a new attribute to submit buttons called formaction and formmethod to deal with having multiple buttons in single form. The button element takes the URL to post in formaction attribute and posts the form to appropriate action methods.
Refer the below view and action method code.
Edit.cshtml
@using (Html.BeginForm("edit", "Employee", FormMethod.Post))
{
<div class="form-horizontal">
@* Removed for brevity *@
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" name="Edit" formaction="@Url.Action("edit")" formmethod="post" class="btn btn-default" />
<input type="submit" value="Submit" name="Edit" formaction="@Url.Action("edit_submit")" formmethod="post" class="btn btn-default" />
</div>
</div>
</div>
}
Action Methods
[HttpPost]
public ActionResult edit(Employee empModel)
{
}
[HttpPost]
public ActionResult edit_submit(Employee empModel)
{
}
- Using Custom Attribute based on ActionNameSelectorAttribute
This is a very usual and most commonly used method to call different action method when we have multiple submit button under a form. On an action method, we can check the value of the button that posted the form from Request object’s FormCollection object. Based on that, we can execute the intended action in a single action method for the multiple submit button. The below code assumes the button name is Edit.
[HttpPost]
public ActionResult edit(Employee empModel)
{
if(Request["Edit"] == "Save")
{
//Save
}
else if(Request["Edit"] == "Submit")
{
//Submit
}
else
{
//Default Submit
}
}
Though this works perfectly, the code is not a standard one. As per Single Responsibility principle, any component should have a single responsibility. So, the implementation can be further simplified by adding a custom attribute based on ActionNameSelectorAttributeatrribute but still use the Request FormCollection to identify the button posted the form.
Add a class in the project and derive it from ActionNameSelectorAttribute and expose 2 properties for passing button name and value. Refer the below code.
[AttributeUsage(AttributeTargets.Method, AllowMultiple = false, Inherited = true)]
public class MultipleFormSubmitAttribute : ActionNameSelectorAttribute
{
public string MatchButtonName { get; set; }
public string MatchButtonValue { get; set; }
public override bool IsValidName(ControllerContext controllerContext, string actionName, MethodInfo methodInfo)
{
return controllerContext.HttpContext.Request[MatchButtonName] != null &&
controllerContext.HttpContext.Request[MatchButtonName] == MatchButtonValue;
}
}
The attribute returns true if the posted form contains the name of the button and it has the value passed to it. Refer the below code which uses the above attribute.
Edit.cshtml
@using (Html.BeginForm("edit", "Employee", FormMethod.Post))
{
<div class="form-horizontal">
@* Removed for brevity *@
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" name="Edit" class="btn btn-default" />
<input type="submit" value="Submit" name="Edit" class="btn btn-default" />
</div>
</div>
</div>
}
Action Method
[HttpPost]
[MultipleFormSubmit(MatchButtonName = "Edit", MatchButtonValue ="Save")]
public ActionResult edit(Employee empModel)
{
}
[HttpPost]
[MultipleFormSubmit(MatchButtonName = "Edit", MatchButtonValue = "Submit")]
public ActionResult edit_submit(Employee empModel)
{
}
The edit() action will be called when the posted form collection contains button with “Save” as value and edit_submit() action will be called when the form collection contains button with “Submit” as value.
Thus, with this little article we understood how to use multiple submit button in a single form in Asp.Net MVC applications.
Happy coding!!