How to handle multiple submit buttons on a single form – MVC Razor

In MVC, there is no click event like(Button_Click) for buttons, action is used to handle the post action of the buttons.

(There are various ways for handling multiple submit buttons on the same form but the best two are below)

Method 1: Handle all Submit Buttons post in one Action:

Example: Suppose we have to perform some mathematical operation like (Add, Substract, Multiply, Divide) with 2 numeric values.

For this case, we will create a form and add 2 TextBoxes and 4 submit buttons for each opeartion (Add, Substract, Multiply and Divide).

Model :
There are some properties in model.


public class Calculation
 {
 [Required]
 [Display(Name = "First Value")]
 public int FirstValue { get; set; }

[Required]
 [Display(Name = "Second Value")]
 public int SecondValue { get; set; }

 [Display(Name = "Result")]
 public int Result { get; set; }

public string ButtonName { get; set; }
 }

View :


@model MvcApplication1.Models.Calculation
@{
 Layout = null;
}
<!DOCTYPE html>
<html>
<head>
 <title>Index</title>
</head>
<body>
 @using (Html.BeginForm("ButtonPostAction", "Calculation", FormMethod.Post))
{
 <div style="width:100%;float:left">
 <div style="width:20%;text-align:right;float:left">
 Enter first numeric value:
 </div>
 <div style="float:left">
 @Html.TextBoxFor(m => m.FirstValue, new { maxlength = 7 })
 </div>
 </div>
 <br/>
 <div style="width:100%;float:left">
 <div style="width:20%;text-align:right;float:left">
 Enter second numeric value:
 </div>
 <div style="float:left">
 @Html.TextBoxFor(m => m.SecondValue, new { maxlength = 7 })
 </div>
 </div>
 <br/>
 <div style="width:100%;float:left">
 <div style="width:20%;text-align:right;float:left">
 Result:
 </div>
 <div style="float:left">
 @Html.TextBoxFor(m => m.Result, new { maxlength = 14 })
 </div>
 </div>
 <br/>
 <div style="width:100%;float:left">
 <div style="width:10%;text-align:right;float:left">
 &nbsp;
 </div>
 <div style="float:left">
 <input type="submit" id="btnAdd" name="ButtonName" value="Add"/>
 </div>
 <div style="float:left">
 <input type="submit" id="btnSubstract" name="ButtonName" value="Substract"/>
 </div>
 <div style="float:left">
 <input type="submit" id="btnMultiply" name="ButtonName" value="Multiply"/>
 </div>
 <div style="float:left">
 <input type="submit" id="btnDivide" name="ButtonName" value="Divide"/>
 </div>
 </div>
 }
</body>
</html>

Controller :
In Controller, there is only one action “ButtonPostAction” to handle post action of all submit buttons.


public class CalculationController : Controller
 {
 public ActionResult Index(Calculation objCalculation)
 {
 return View(objCalculation);
 }
 public ActionResult ButtonPostAction(Calculation objCalculation)
 {
 if (!string.IsNullOrWhiteSpace(objCalculation.ButtonName))
 {
 //For handling different submit button Action
 switch (objCalculation.ButtonName.Trim())
 {
 case "Add":
 {
 objCalculation.Result = objCalculation.FirstValue +
 objCalculation.SecondValue;
 break;
 }
 case "Substract":
 {
 objCalculation.Result = objCalculation.FirstValue -
 objCalculation.SecondValue;
 break;
 }
 case "Multiply":
 {
 objCalculation.Result = objCalculation.FirstValue *
 objCalculation.SecondValue;
 break;
 }
 case "Divide":
 {
 objCalculation.Result = objCalculation.FirstValue /
 objCalculation.SecondValue;
 break;
 }
 default:
 {
 break;
 }
 }
 }
 return RedirectToAction("Index", "Calculation", objCalculation);
 }

}

Method 2: Handle all Submit Button post in separate Action:

Model :
There are some properties in Calculation and SubmitButtonAttribute class which is used to handle the Submit Button Attributes like Name, Value.


public class Calculation
 {
 [Required]
 [Display(Name = "First Value")]
 public int FirstValue { get; set; }

[Required]
 [Display(Name = "Second Value")]
 public int SecondValue { get; set; }

 [Display(Name = "Result")]
 public int Result { get; set; }

public string ButtonName { get; set; }
 }

public sealed class SubmitButtonAttribute : ActionMethodSelectorAttribute
 {

#region Properties
 public string Name { get; set; }
 public string Value { get; set; }
 #endregion Properties
 #region ActionMethodSelectorAttribute members
 public override bool IsValidForRequest(ControllerContext objControllerContext,
 System.Reflection.MethodInfo objMethodInfo)
 {
 return objControllerContext.HttpContext.Request.Form[Name] == Value;
 }
 #endregion ActionMethodSelectorAttribute members

}

View :


@model MvcApplication1.Models.Calculation
@{
 Layout = null;
}
<!DOCTYPE html>
<html>
<head>
 <title>Index</title>
</head>
<body>
 @using (Html.BeginForm("ButtonPostAction", "Calculation", FormMethod.Post))
{
 <div style="width:100%;float:left">
 <div style="width:20%;text-align:right;float:left">
 Enter first numeric value:
 </div>
 <div style="float:left">
 @Html.TextBoxFor(m => m.FirstValue, new { maxlength = 7 })
 </div>
 </div>
 <br/>
 <div style="width:100%;float:left">
 <div style="width:20%;text-align:right;float:left">
 Enter second numeric value:
 </div>
 <div style="float:left">
 @Html.TextBoxFor(m => m.SecondValue, new { maxlength = 7 })
 </div>
 </div>
 <br/>
 <div style="width:100%;float:left">
 <div style="width:20%;text-align:right;float:left">
 Result:
 </div>
 <div style="float:left">
 @Html.TextBoxFor(m => m.Result, new { maxlength = 14 })
 </div>
 </div>
 <br/>
 <div style="width:100%;float:left">
 <div style="width:10%;text-align:right;float:left">
 &nbsp;
 </div>
 <div style="float:left">
 <input type="submit" id="btnAdd" name="AddButton" value="Add"/>
 </div>
 <div style="float:left">
 <input type="submit" id="btnSubstract" name="SubstractButton" value="Substract"/>
 </div>
 <div style="float:left">
 <input type="submit" id="btnMultiply" name="MultiplyButton" value="Multiply"/>
 </div>
 <div style="float:left">
 <input type="submit" id="btnDivide" name="DivideButton" value="Divide"/>
 </div>
 </div>
 }
</body>
</html>

Controller :
In Controller, there are 4 action “AddAction”, ”SubstractAction”, ”MultiplyAction”, ”DivideAction” to handle post action of Add, Substract, Multiply, Divide buttons respectively.


public class CalculationController : Controller
 {
 public ActionResult Index(Calculation objCalculation)
 {
 return View(objCalculation);
 }

[ActionName("ButtonPostAction")]
 [SubmitButton(Name = “AddButton", Value = "Add")]
 public ActionResult AddAction(Calculation objCalculation)
 {
 objCalculation.Result = objCalculation.FirstValue + objCalculation.SecondValue;
 return RedirectToAction("Index", "Calculation", objCalculation);
 }

[ActionName("ButtonPostAction")]
 [SubmitButton(Name = "SubstractButton", Value = "Substract")]
 public ActionResult SubstractAction(Calculation objCalculation)
 {
 objCalculation.Result = objCalculation.FirstValue - objCalculation.SecondValue;
 return RedirectToAction("Index", "Calculation", objCalculation);
 }

[ActionName("ButtonPostAction")]
 [SubmitButton(Name = "MultiplyButton", Value = "Multiply")]
 public ActionResult MultiplyAction(Calculation objCalculation)
 {
 objCalculation.Result = objCalculation.FirstValue * objCalculation.SecondValue;
 return RedirectToAction("Index", "Calculation", objCalculation);
 }

[ActionName("ButtonPostAction")]
 [SubmitButton(Name = "DivideButton", Value = "Divide")]
 public ActionResult DivideAction(Calculation objCalculation)
 {
 objCalculation.Result = objCalculation.FirstValue / objCalculation.SecondValue;
 return RedirectToAction("Index", "Calculation", objCalculation);
 }
 }

Above example is so simple, only for learning purpose. You can create the complex code through this way.

Written By: Ankur Rawat, ASP.Net Developer, Mindfire Solutions

Advertisements

Posted on October 24, 2013, in MVC and tagged , , , , , , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: