MVC razor form with multiple different submit buttons

Question

A Razor view has 3 buttons inside a form  All button s actions will need form values which are basically values coming input fields   Every time I click any of buttons it redirected me to default action  Can you please guide how I can submit form to different actions based on button press    I really appreciate your time  guidance and help

User · Answer

in the view   lt form action   Controller name action  method  Post gt     lt input type  submit  name  btn1  value  Ok    gt    lt input type  submit  name  btn1  value  cancel    gt    lt input type  submit  name  btn1  value  Save    gt   lt  form gt    in the action   string str  Request Params  btn1    if str   ok        if str   cancel        if str   save

User · Answer

This elegant solution works for number of submit buttons    Html Begin          Html code here    lt input type  submit  name  command  value  submit1    gt     lt input type  submit  name  command  value  submit2    gt       And in your controllers  action method accept it as a parameter   public ActionResult Create Employee model  string command        if command Equals  submit1                   Call action here              else                Call another action here

User · Answer

This answer will show you that how to work in asp net with razor  and  to control multiple submit button event  Lets for example we have two button  one button will redirect us to  PageA cshtml  and other will redirect us to  PageB cshtml         if  IsPost               if Request  btn   Equals  button A                        Response Redirect  PageA cshtml                    if Request  amp quot btn   Equals  button B                        Response Redirect  amp quot PageB cshtml amp quot                     lt form method  post  gt      lt input type  submit  value  button A  name  btn   gt       lt input type  submit  value  button B  name  btn   gt              lt  form gt

User · Answer

You  can use  JS   Ajax  For example  if you have any button you can  say it what it must do on click event  Here the code     lt input id  btnFilterData  type  button  value  myBtn  gt    Here your button in html  in the script section  you need to use this code  This section should be at the end of the document     lt script type  text javascript  gt      btnFilterData   click function          myFunc         lt  script gt    And finally  you need to add ajax function  In another script section  which should be placed at the begining of the document    function myFunc           ajax           type   GET           contentType   application json           url    myController myFuncOnController           data                   params  which you can pass to yu func                    success  function result             error  function  errorData

User · Answer

Didn t see an answer using tag helpers  Core MVC   so here it goes  for a delete action    On HTML    lt form action    method  post  role  form  gt   lt table gt   for  var i   0  i  lt  Model List Count    i           lt tr gt           lt td gt  Model List i  ItemDescription lt  td gt           lt td gt               lt input type  submit  value  REMOVE  class  btn btn-xs btn-danger                asp-controller  ControllerName  asp-action  delete  asp-route-idForDeleteItem   Model List i  idForDeleteItem    gt           lt  td gt       lt  tr gt     lt  table gt   lt  form gt    On Controller    HttpPost   action   idForDeleteItem     ActionName  Delete    public async Task lt IActionResult gt  DeleteConfirmed long idForDeleteItem           delete with param id goes here     Don t forget to use  Route   controller     BEFORE the class declaration - on controller

User · Answer

Simplest way is to use the html5 FormAction and FormMethod   lt input type  submit              formaction  Save             formmethod  post              value  Save    gt       lt input type  submit             formaction  SaveForLatter             formmethod  post              value  Save For Latter    gt       lt input type  submit             formaction  SaveAndPublish             formmethod  post             value  Save And Publish    gt    HttpPost  public ActionResult Save CustomerViewModel model          HttpPost  public ActionResult SaveForLatter CustomerViewModel model         HttpPost  public ActionResult SaveAndPublish CustomerViewModel model         There are many other ways which we can use  see this article ASP Net MVC multiple submit button use in different ways

User · Answer

This is what worked for me    formaction   Url Action  Edit      Snippet       lt input type  submit  formaction   Url Action  Edit    formmethod  post  value  Save  class  btn btn-primary    gt    lt input type  submit  formaction   Url Action  PartialEdit    formmethod  post  value  Select Type  class  btn btn-primary    gt     HttpPost           ValidateAntiForgeryToken          public ActionResult Edit  Quote quote                         code             HttpPost           ValidateAntiForgeryToken          public ActionResult PartialEdit Quote quote                         code             Might help some one who wants to have 2 different action methods instead of one method using selectors or using client scripts

User · Answer

In case you re using pure razor  i e  no MVC controller     lt button name  SubmitForm  value  Hello  gt Hello lt  button gt   lt button name  SubmitForm  value  World  gt World lt  button gt   if  IsPost         lt p gt  Request Form  SubmitForm   lt  p gt      Clicking each of the buttons should render out Hello and World

User · Answer

You could use normal buttons non submit   Use javascript to rewrite  at an  onclick  event  the form s  action  attribute to something you want and then submit it  Generate the button using a custom helper create a file  Helper cshtml  inside the App Code folder  at the root of your project      helper SubmitButton string text  string controller string action           var uh   new System Web Mvc UrlHelper Context Request RequestContext       string url    uh Action action  controller  null           lt input type button  onclick                                           function e                                                                                                          e  parent   attr  action     url      rewrite action url                                                      create a submit button to be clicked and removed  so that onsubmit is triggered                                                    var form   document getElementById   e  parent   attr  id                                                        var button   form ownerDocument createElement  input                                                       button style display    none                                                      button type    submit                                                      form appendChild button  click                                                        form removeChild button                                                                                                             this   value   text   gt      And then use it as    Helpers SubmitButton  Text for 1st button   ControllerForButton1   ActionForButton1    Helpers SubmitButton  Text for 2nd button   ControllerForButton2   ActionForButton2         Inside your form

User · Answer

Try wrapping each button in it s own form in your view      using  Html BeginForm  Action1    Controller             lt input type  submit  value  Button 1    gt          using  Html BeginForm  Action2    Controller             lt input type  submit  value  Button 2    gt

User · Answer

The cleanest solution I ve found is as follows   This example is to perform two very different actions  the basic premise is to use the  value to pass data to the action   In your view    using  Html BeginForm  DliAction    Dli   FormMethod Post  new   id    mainForm            if  isOnDli                 lt button name  removeDli  value   result WeNo  gt Remove From DLI lt  button gt            else                lt button name  performDli  value   result WeNo  gt Perform DLI lt  button gt            Then in your action       public ActionResult DliAction string removeDli  string performDli                if  string IsNullOrEmpty performDli                                               else if  string IsNullOrEmpty removeDli                                                return View            This code should be easy to alter in order to achieve variations along the theme  e g  change the button s name to be the same  then you only need one parameter on the action etc  as can be seen below   In your view    using  Html BeginForm  DliAction    Dli   FormMethod Post  new   id    mainForm                  lt button name  weNo  value   result WeNo  gt Process This WeNo lt  button gt            lt button name  weNo  value   result WeNo  gt Process A Different WeNo This Item lt  button gt      Then in your action       public ActionResult DliAction string weNo                   Process the weNo             return View

User · Answer

As well as  Pablo s answer  for newer versions you can also use the asp-page-handler tag helper   In the page    lt button asp-page-handler  Action1  type  submit  gt Action 1 lt  button gt   lt button asp-page-handler  Action2  type  submit  gt Action 2 lt  button gt    then in the controller       public async Task OnPostAction1Async             public async Task OnPostAction2Async

User · Answer

You could also try this    lt input type  submit  name  submitbutton1  value  submit1    gt   lt input type  submit  name  submitbutton2  value  submit2    gt    Then in your default function you call the functions you want   if  Request Form  submitbutton1      null           Code for function 1   else if Request Form  submitButton2      null            code for function 2

[c#] MVC razor form with multiple different submit buttons?

Examples related to c#

Examples related to asp.net-mvc

Examples related to asp.net-mvc-4

Examples related to razor