sometimes you faced sitution like more than one submit buttons on the same form in mvc razor. At that time, how we will handle the click event of each and every buttons on your form?
To overcome this problem I am going to explain the various techniques for handling multiple buttons on the same form in MVC. Suppose you have a user Login form like as below:
In the above fig. we have Signup,SignIn and cancel buttons. Suppose on Signup button click you have to open Signup window & on SingnIn button click you have to open Login window and 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:
In this way each submit button will post the form to server but provides the different values Like SighIn, Signup,Cancel and NULL respectively for the commands.so by using this command argument we can easily implement our own logic in the controller's action method.
Export Gridview to Excel :- Gridview to Excel
Insert,Update,Delete in ModalPopup CRUD operation in ModalPopup
Read and Write in Text File in asp.Net Read and Write File in Asp.Net
First Create the view Form with Multiple Button in Home Folder like below
MultipleCommand.cshtml:-
@model Mvc4_Multiple_Submit_Button.Models.RegistrationModel
@{
ViewBag.Title = "Handling Multiple Command
Buttons";
}
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<h2>
User's Signup
Form</h2>
@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>
<button type="submit" id="btnCancelSecForm" name="Command" value="Cancel" onclick="$('#cancelForm').submit()">
Cancel
(Server Side by Second Form)</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>
</fieldset>
}
@using (Html.BeginForm("MultipleButtonCancel", "Home", FormMethod.Post, new { id = "cancelForm" })) { }
now in Homecontroller include the MultipleCommand Method to handle the multiple button
HomeController.cs:-
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.Mvc;
using
Mvc4_Multiple_Submit_Button.Models;
namespace
Mvc4_Multiple_Submit_Button.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult MultipleCommand()
{
return View();
}
[HttpPost]
public ActionResult MultipleCommand(RegistrationModel mReg, string
Command)
{
if (Command == "Save")
{
//TO DO : for Save button Click
}
else if (Command == "Submit")
{
//TO DO : for Submit button Click
}
else
{
//TO DO : for Cancel button Click
return RedirectToAction("Index");
}
return View();
}
[HttpPost]
public ActionResult MultipleButtonCancel()
{
//TO DO : for Cancel button Click
return RedirectToAction("Index");
}
}
}
nice post......
ReplyDelete