Please enable Javascript to correctly display the contents on Dot Net Tricks!

Handling multiple submit buttons on the same form - MVC Razor

  Author : Shailendra Chauhan
Posted On : 16 Nov 2012
Total Views : 216,978   
Updated On : 23 Nov 2016
 

Sometimes you required to have more than one submit buttons on the same form in mvc razor. In that case, how will you handle the click event of different buttons on your form?

In this article, I am going to expose the various ways for handling multiple buttons on the same form. Suppose you have a user signup form like as below:

In the above fig. we have Save, Submit & Cancel buttons. Suppose on Save button click you are saving data in the tempUser table & on Submit button you are saving data in RegUser table and more over on Cancel button click you are returning to home page. For handling all of the above buttons click we have the three methods as mention below:

Method 1 - Submit the form for each button

In this way each submit button will post the form to server but provides the different values - Save, Submit and NULL respectively for the commands. On the basis of command name we can implement our own logic in the controller's action method.

MultipleCommand.cshtml

 @using (Html.BeginForm("MultipleCommand", "Home", FormMethod.Post, new { id = "submitForm" }))
{
 <fieldset>
 <legend>Registration Form</legend>
 <ol>
 <li>
 @Html.LabelFor(m => m.Name)
 @Html.TextBoxFor(m => m.Name, new { maxlength = 50 })
 @Html.ValidationMessageFor(m => m.Name)
 </li>
 <li>
 @Html.LabelFor(m => m.Address)
 @Html.TextAreaFor(m => m.Address, new { maxlength = 200 })
 @Html.ValidationMessageFor(m => m.Address)
 </li>
 <li>
 @Html.LabelFor(m => m.MobileNo)
 @Html.TextBoxFor(m => m.MobileNo, new { maxlength = 10 })
 @Html.ValidationMessageFor(m => m.MobileNo)
 </li>
 </ol>
 <button type="submit" id="btnSave" name="Command" value="Save">Save</button>
 <button type="submit" id="btnSubmit" name="Command" value="Submit">Submit</button> 
 <button type="submit" id="btnCancel" name="Command" value="Cancel" onclick="$('#submitForm').submit()">Cancel (Server Side)</button>
 </fieldset>
} 

Action Method in Controller

Method 2 - Introducing Second From

We can also introduce the second form for handling Cancel button click. Now, on Cancel button click we will post the second form and will redirect to the home page.

MultipleCommand.cshtml

 @using (Html.BeginForm("MultipleCommand", "Home", FormMethod.Post, new { id = "submitForm" }))
{
 <fieldset>
 <legend>Registration Form</legend>
 <ol>
 <li>
 @Html.LabelFor(m => m.Name)
 @Html.TextBoxFor(m => m.Name, new { maxlength = 50 })
 @Html.ValidationMessageFor(m => m.Name)
 </li>
 <li>
 @Html.LabelFor(m => m.Address)
 @Html.TextAreaFor(m => m.Address, new { maxlength = 200 })
 @Html.ValidationMessageFor(m => m.Address)
 </li>
 <li>
 @Html.LabelFor(m => m.MobileNo)
 @Html.TextBoxFor(m => m.MobileNo, new { maxlength = 10 })
 @Html.ValidationMessageFor(m => m.MobileNo)
 </li>
 </ol>
 <button type="submit" id="btnSave" name="Command" value="Save">Save</button> 
 <button type="submit" id="btnSubmit" name="Command" value="Submit">Submit</button> 
 <button type="submit" id="btnCancelSecForm" name="Command" value="Cancel" onclick="$('#cancelForm').submit()"> Cancel (Server Side by Second Form)</button>
 </fieldset>
}
@using (Html.BeginForm("MultipleButtonCancel", "Home", FormMethod.Post, new { id = "cancelForm" })) { } 

Action Method in Controller

Method 3 - Introducing Client Side Script

We can also use javascript or jquery for handling Cancel button click. Now, on Cancel button click we will directly redirect to the home page. In this way, there is no server side post back and this is the more convenient way to handle the cancel button click.

MultipleCommand.cshtml

 <button type="submit" id="btnSave" name="Command" value="Save">Save</button> 
<button type="submit" id="btnSubmit" name="Command" value="Submit">Submit</button>
<button name="ClientCancel" type="button" onclick=" document.location.href = $('#cancelUrl').attr('href');">Cancel (Client Side)</button>
<a id="cancelUrl" href="@Html.AttributeEncode(Url.Action("Index", "Home"))" style="display:none;"></a>
What do you think?

I hope you will enjoy these tricks while programming with MVC Razor. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome. You can download demo project in MVC4 from below link.



ABOUT AUTHOR

Shailendra Chauhan
Author, Architect, Corporate Trainer and Microsoft MVP

He is the author of some of most popular e-books which encompass technical Interview on Node.js Interview Questions and Answers, ASP.NET MVC Interview Questions and Answers, AngularJS Interview Questions and Answers and LINQ Interview Questions and AnswersKnow more...

Free Interview Books
 
COMMENTS (1)

Nice article.... Just one thought. Can't we use formaction and formmethod attributes on HTML5? I believe the formaction attribute indicates the form's action whereas the formpost attribute indicates the form submition method. By this way, we implement multiple submit buttons on the same form.

3 AUG
ASP.NET Core with Angular4 Development (Online)

07:00 AM - 9:00 AM IST(+5:30 GMT)

Know More
29 JUL
Xamarin Forms : Build Cross-platform Apps (Classroom)

09:00 AM - 11:00 AM IST(+5:30 GMT)

Know More
24 JUL
ASP.NET MVC with Angular4 Development (Online)

07:00 AM - 09:00 AM IST(+5.30 GMT)

Know More
22 JUL
Angular2 and Angular4 Development (Online)

08:00 AM - 10:00 AM IST(+5.30 GMT)

Know More
22 JUL
ASP.NET MVC with Angular4 Development (Classroom)

09:30 AM - 11:00 AM IST (+5:30GMT)

Know More
22 JUL
MEAN Stack 2 Development (Classroom)

04:00 PM - 05:30 PM IST(+5:30GMT)

Know More
22 JUL
Angular2 and Angular4 Development (Online)

08:00 AM - 10:00 AM IST(+5.30 GMT)

22 JUL
ASP.NET MVC with Angular4 Development (Classroom)

09:30 AM - 11:00 AM IST (+5:30GMT)

22 JUL
MEAN Stack 2 Development (Classroom)

04:00 PM - 05:30 PM IST(+5:30GMT)

20 JUL
Hadoop Development cum Administration (Online)

07:00 AM - 09:00 AM IST(+5:30 GMT)

17 JUL
NodeJS with Angular4 Development (Online)

08:00 PM - 09:30 PM IST(+5.30 GMT)

15 JUL
ASP.NET MVC with Angular4 Development (Online)

03:30 PM - 05:30 PM IST(+5.30 GMT)

1 JUL
ASP.NET MVC with Angular4 Development (Classroom)

08:00 AM - 09:30 AM IST

1 JUL
MEAN Stack 2 Development (Classroom)

11:00 AM - 12:30 PM IST(+5:30 GMT)

30 JUN
Xamarin Forms : Build Cross-platform Apps (Online)

09:30 PM - 11:00PM IST(+5:30GMT)

6 JUN
ASP.NET MVC with Angular4 Development (Online)

09:00 PM-11:00 PM IST(+5.30 GMT)

20 MAY
NodeJS with Angular4 Development (Classroom)

05:00 PM - 07:00 PM

2 MAY
ASP.NET Core Development (Online)

07:00 AM - 09:00 AM IST(+5.30 GMT)

BROWSE BY CATEGORY
 
 
LIKE US ON FACEBOOK
 
+