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>
