Post
Ask Question

Multiple Submit Buttons In ASP.NET MVC

Multiple Submit button in Asp.Net MVC

In this article, we will be discussing various ways of handling Submit button in asp.Net MVC.

Below are the different ways

  • Multiple Forms
  • JQuery
  • Action Name Selector Attribute

Now let’s elaborate one by one.

Multiple Forms

With this approach, we can create multiple forms and each form will have different methods in the action  attribute of form as shown below, 

  1. @ {  
  2.     ViewBag.Title = "Home Page";  
  3. } < form action = "Home"  
  4. method = "post" > < input type = "submit"  
  5. value = "Add"  
  6. name = "Add" / > < /form> < form action = "Home"  
  7. method = "post" > < input type = "submit"  
  8. value = "Remove"  
  9. name = "Remove" / > < /form>  

Now in the above example we have create two separate forms. First form is calling Add and second form is calling Remove.

JQuery

With this approach, we can use  jQuery  post methods for each call as shown below, 

  1. <script src="~/Scripts/jquery-1.10.2.js"></script>  
  2. <script>  
  3.     function Add() {  
  4.         $.post("Add", null, Fun1);  
  5.     }  
  6.   
  7.     function Remove() {  
  8.         $.post("Remove", null, Fun1);  
  9.     }  
  10.   
  11.     function Fun1(data) {  
  12.         alert(data);  
  13.     }  
  14. </script> <input type="submit" value="Add" name="Add" onclick="Add()" /> <input type="submit" value="Remove" name="Remove" onclick="Remove()" />  

Now in the above example we have created Add() and Remove() which is calling Fun1(). Fun1() is  showing  received data in alert message. However  Onlcick of  Add submit button  we are calling Add() and Remove submit button is calling Rmove().

Action Name Selector Attribute

ActionNameSelectorAttribute is an attribute which that affects the selection of an action method.

In this we need to implement IsValidName by inheriting  ActionNameSelectorAttribute  as shown below, 

  1. public class AddRemoveButton: ActionNameSelectorAttribute {  
  2.     public string Name {  
  3.         get;  
  4.         set;  
  5.     }  
  6.     public override bool IsValidName(ControllerContext controllerContext, string actionName, MethodInfo methodInfo) {  
  7.         var value = controllerContext.Controller.ValueProvider.GetValue(Name);  
  8.         if (value == null) return false;  
  9.         return true;  
  10.     }  
  11. }  

Now in the above example, we have created property Name. And overridden  IsValidName().

We are validating values of Valueprovider with the Name property. If the value is null then we are returning false else we are returning true.

Now we have to call AddRemoveButton on action methods as shown below,

  1. public class HomeController: Controller {  
  2.     [AddRemoveButton(Name = "Add")]  
  3.     public ActionResult Add() {  
  4.             return Content("Add clicked");  
  5.         }  
  6.         [AddRemoveButton(Name = "Remove")]  
  7.     public ActionResult Remove() {  
  8.         return Content("Remove clicked");  
  9.     }  
  10. }  

Now in the above example we have added AddRemoveButton by paasing name of actionmethods in name property.


Similar Articles