Multiple submit button in ASP.Net MVC is the common and mostly asked question in interview. In this article we will try to see different ways to use the Multiple submit button in a form and what is the best way to use multiple submit button. What we are going to try:
1. HTML5 FormAction and FormMethod attribute in submit buttons
HTML5 introduced new attributes FormAction and FormMethod, we can use this method to define the action name and form method like get, post, edit etc. See the HTML code, every single submit button have two extra attributes named FormAction and FormMethod, both the attribute is case insensitive so we can use either in upper or lower or in mis-mode. We have three Action Methods Save, SaveForLatter and SaveAndPublish, all are of type POST:
@using (Html.BeginForm())
{
.......................
<input type="submit"
formaction="Save"
formmethod="post"
value="Save" />
<input type="submit"
formaction="SaveForLatter"
formmethod="post"
value="Save For Latter" />
<input type="submit"
formaction="SaveAndPublish"
formmethod="post"
value="Save And Publish" />
}
All the three controller action methods, see the code of HTML and Controller action methods, this is the simplest way to use multiple submit button in ASP.Net MVC:
[HttpPost]
public ActionResult Save(CustomerViewModel model) {...}
[HttpPost]
public ActionResult SaveForLatter(CustomerViewModel model){...}
[HttpPost]
public ActionResult SaveAndPublish(CustomerViewModel model){...}
2. Multiple Submit Buttons With Action Selector Attribute
Best way of multiple submit button use on a page is to override the ActionSelectorAttribute and decorate the action in controller with attribute and that's it. Specially I love this trick after 1st option which we already saw, because we can write once and use as many time as we want, just decorate the action and done. Let's write the Action Selector Attribute code:
public class MyActionSelectorAttribute : ActionNameSelectorAttribute
{
public string ActionName { get; set; }
public override bool IsValidName(ControllerContext controllerContext, string actionName, MethodInfo methodInfo)
{
var isValid = false;
var provider = controllerContext.Controller.ValueProvider.GetValue(this.ActionName);
if(provider != null)
{
controllerContext.Controller.ControllerContext.RouteData.Values[actionName] = this.ActionName;
isValid = true;
}
return isValid;
}
}
Now let's create three action buttons on the page
@using (Html.BeginForm())
{
......
<input type="submit"
name="Save"
value="Save" />
<input type="submit"
name="SaveForLatter"
value="Save For Latter" />
<input type="submit"
name="SaveAndPublish"
value="Save And Publish" />
}
Note every button have a name attribute, which is the name of the action in controller to call on submit.
Now let's see the controller action methods
[HttpPost]
[MyActionSelector(ActionName = "Save")]
public ActionResult Save(CustomerViewModel model){...}
[HttpPost]
[MyActionSelector(ActionName = "SaveForLatter")]
public ActionResult SaveForLatter(CustomerViewModel model){...}
[HttpPost]
[MyActionSelector(ActionName = "SaveAndPublish")]
public ActionResult SaveAndPublish(CustomerViewModel model){...}
3. Multiple Submit Buttons With Different Name
In this trick we use the multiple submit buttons with different name and in controller action method we accept them as parameter and check which one is clicked, let's see with code, in HTML we can define the action name and controller name and FormMethod Post, see the HTML page code
@using (Html.BeginForm("Save", "Customer", FormMethod.Post))
{
...................
...................
<input type="submit"
name="Save"
value="Save" />
<input type="submit"
name="SaveForLatter"
value="Save For Latter" />
<input type="submit"
name="SaveAndPublish"
value="Save And Publish" />
}
As we can see we use the Save action method in controller Customer, whatever the button will click, that will post to the same action method Save and we are also accepting extra values say button name and check which one is clicked, see the code which will be easy to understand:
[HttpPost]
public ActionResult Save(CustomerViewModel model, string Save, string SaveForLatter, string SaveAndPublish)
{
if (!string.IsNullOrEmpty(Save))
this.SaveCustomer(model);
else if (!string.IsNullOrEmpty(SaveForLatter))
this.SaveForLatter(model);
else if (!string.IsNullOrEmpty(SaveAndPublish))
this.SaveAndPublish(model);
return View(model);
}
private bool SaveCustomer(CustomerViewModel model){...}
private bool SaveForLatter(CustomerViewModel model){...}
public bool SaveAndPublish(CustomerViewModel model){...}
4. Multiple Submit Buttons With Same Name & Different Value
In this trick we will use the same name for all the Submit Buttons and different values and post to a single action method in controller and check the value of the button and take action accordingly:
HTML Code is same as above in case 3, see this:
@using (Html.BeginForm("Save", "Customer", FormMethod.Post))
{
....................
<input type="submit"
name="submit"
value="Save" />
<input type="submit"
name="submit"
value="Save For Latter" />
<input type="submit"
name="submit"
value="Save And Publish" />
}
In controller we use a string parameter say string submit and check the value of the button in HTML we used, see this:
[HttpPost]
public ActionResult Save(CustomerViewModel model, string submit)
{
if (submit == "Save")
this.SaveCustomer(model);
else if (submit == "Save For Latter")
this.SaveForLatter(model);
else if (submit == "Save And Publish")
this.SaveAndPublish(model);
return View(model);
}
private bool SaveCustomer(CustomerViewModel model){...}
private bool SaveForLatter(CustomerViewModel model){...}
public bool SaveAndPublish(CustomerViewModel model){...}
5. Multiple Submit Buttons with jQuery/JavaScript
If you love to use jQuery/JavaScript then this option is for you, because it is also very simple to use. On click we will set the form action by using jQuery in this post. On document ready we will register the click event of different buttons see the HTML and JavaScript:
@using (Html.BeginForm())
{
...................
<input type="submit"
id="btnSave"
value="Save" />
<input type="submit"
id="btnSaveForLatter"
value="Save For Latter" />
<input type="submit"
id="btnSaveAndPublish"
value="Save And Publish" />
}
See we use the ID for every button to write the click even by using these Ids, here is the JavaScript:
<script>
$(document).ready(function () {
$("#btnSave").click(function () {
$("form").attr("action", "/Customer/Save");
});
$("#btnSaveForLatter").click(function () {
$("form").attr("action", "/Customer/SaveForLatter");
});
$("#btnSaveAndPublish").click(function () {
$("form").attr("action", "/Customer/SaveAndPublish");
});
});
</script>
Keep controller action methods normal:
[HttpPost]
public ActionResult Save(CustomerViewModel model) {...}
[HttpPost]
public ActionResult SaveForLatter(CustomerViewModel model){...}
[HttpPost]
public ActionResult SaveAndPublish(CustomerViewModel model){...}
We saw different ways of using multiple submit button in a form, I don't want to discuss which one is best, I try to give all the possible ways which I know. It's up to you, which one you like to use and you may have your own reason like simplisity or pattern, enjoy it!
|
Having 13+ years of experience in Microsoft Technologies (C#, ASP.Net, MVC and SQL Server). Worked with Metaoption LLC, for more than 9 years and still with the same company. Always ready to learn new technologies and tricks.
|
| By Ali Adravi On 08 Oct, 17 Viewed: 6,837 |
In many cases we need to use read only text box so user cannot edit the value but readonly textbox will lost its value after postback. Let’s say you have a read only text box to set date by using ajax calendar so after post back date will be lost, other case might be you are setting some value in... By Ali Adravi On 24 Apr 2013 Viewed: 4,219
There are ways to call a web service method JavaScript, for more detail you can see [how to retrieve data from database using JavaScript in asp.net][1], but is there any way to call a normal method from JavaScript? And the answer is No; show how we can call a code behind method from JavaScript,... By Jonathan King On 08 Apr 2013 Viewed: 12,445
Most of the times we need to use GridView control to show tabular data in our asp.net application. We simply write procedure to search the records and bind them with GridView and show 10 to 20 records per page. Have you ever thought that why you are fetching all the records and show only 10 to 20... By Ali Adravi On 16 Feb 2013 Viewed: 8,387
A nice feature with ASP.Net is the model binding, it reduced our code and effort to bind our well know controls like GridView, DataList, Repeater etc. So let’s see how we can bind our old controls in new and easy way. Let’s see how we bind the our grid before 4.5 1. We write the code to get... By Mike .Net On 17 Jan 2013 Viewed: 3,200
In asp.net there is not control to select multiple files and upload them once with progress bar, so we will use a small third party DLL to achieve this functionality. We will use Flajaxian FileUploader, you can download it from [http://www.flajaxian.com][1] We will create three different images... By Hamden On 12 Jul 2012 Viewed: 6,546