Handle Multiple Form Submit Buttons in ASP.NET Core MVC - ASP.NET 6 MVC

hi there in this video we will see how we can handle multiple form submit buttons in an asp.net mvc application if you like this video please hit the like button and subscribe to the channel to get more content like this one so i have a clean asp.net mvc application in which i have the home controller and the index action method i also have created a view model in which i just have one property so i will display this property in the get method first so i will create the model is equal to new home view model and i will import the references from the models folder and as you know it only has one property so i will say name is equal to samir and i will change the property and i will capture the values when the form is submitted i will capture the values in a post method so i will create a http post method which is public i action result let's call it index and actually let's call it update so let's read the first button as the update button and we will later on add another button and we want to see how we can handle multiple form submit buttons in the same form so i will call this update and i will pass the home view model and i will call it model and i will see what value it's coming back with so i will say name is equal to model dot name and finally i can just return redirect to action or whatever you want to do it over here i'm just returning it back to the index so with that i can now come to the view and we can display the input property so i will create a form first and i will come back to the form later on but inside the form i will create a div and give it a class of margin bottom hyphen 3 bootstrap class and give it a label with the class of form hyphen label and let's call this name after that we have value for a name so let's display that inside the input element so input element of type text and let's remove the name and value attributes and let's assign the value coming back from the model so i will first create the model inside the view so add model comes from the project so multiple uh the name is multiple form submit buttons that's the name of the project models folder home view model and now inside the input element we can say this is asp hyphen 4 that's the asp hyphen 4 attribute and it's for the name property now by doing that we are displaying the name property inside the input element let's also give it a bootstrap class which is form hyphen control and after this input element we will create a div again with the class of margin bottom hyphen 3 and we will create a submit button so button by default its type is summit but we will just still mention it which is submit and the name is update let's also give it a class which is a bootstrap class btn space btn hyphen primary so now as you know if we will press this button to submit the form this form gets submitted and we can now define where it has to go to which action method will it respond to so asp hyphen controller is a home controller and asp hyphen action method when this is submitted we'll go to the update method so now i can come back to the controller and have a breakpoint over here so that we can read the updated values of names and we will come to know that it comes to the post method over here so i'll start my application the application is running and by default you can't see anything over here because even though i've created the model i haven't passed this through so i will pass this and hot reload my application and now it's coming back as whatever value i defined over here so now we can change this value and submit the form let's say i type my full name and then press the update button to submit the form it comes back to the update action method which is a post method and the updated value comes as my full name which is sami seni so we know that the single submit button which is the form button is working fine so now it's time to handle uh or create another button inside the same form and see how we can handle multiple buttons in the same form so i will stop my application now we want to create a new new button because we want a different functionality for that button so basically when the user clicks on that button let's say it's the delete button we basically want to delete the information of that form right so we will create another method so public i action result let's just say if that functionality was delete and this is again a post method so http post because we are submitting the form and again we will try to see if the value of the model uh of the form is coming back to the code behind and uh if we are able to utilize these values and do whatever you want to do over here so i will copy the same information and paste it here but in your case you would have a different implementation you know different to this method over here again i will put a break point so that i can see if the value of this name is now the updated value of the form so we have the action method defined uh now we want to create another button which is you know the motif of this video so we want to have another button let's say that is also of type submit and the class is btn btn hyphen danger it's a red color button and to the first one i will just give a margin to the end so m e hyphen 3 so that we have some space in between this will uh be called delete so that when the uh this button is pressed it will go to the controller so that we can delete the details whatever we are showing over here or something like that so this at the moment if i run the application i'll just explain it to you we now have two buttons on the screen and in this form and let's just change the value to my full name and you remember if you press the update button it comes to the update method and that's fine let's continue it now we have another button called the delete button but it should go to the delete method but if i click it at the moment it still comes to the update method which is wrong it should come to the delete method so we have to fix that so i'll stop the application and come back to the index method and index uh razer sorry index.cshtml and we have the asp hyphen controller and asp hyphen action attributes on the form let's take that out for now and let's use the buttons to define where they will point to when the button is clicked and the form is submitted so let's say after the class i'll enter this in a new line i'll say asv hyphen controller and we only have one controller so i'll say home but when the update button is clicked it should go to the update action method so asp hyphen action is equal to the update method and it's the same method as we had on the form but now the button is defining the end endpoint of the post method on similar terms we can copy this and we can also define the uh the end point of the delete button so we will say it's pointing to the asp hyphen controller which is the home controller and the action method it has it is pointing to should be the delete action method because we have that inside the home controller over here so with that small change let's start the application again to test it so with that change we are updating the value of the name let's click the update button and it still comes to the update method as always and the name is the updated value so we know that the form is carrying all the new values back to the code so that's fine i'll just continue this one and now let's say you wanted to delete this form or something so i'm using the delete button submit the form but this time it comes to the delete method the delete method which is also a post method it comes there with all the information of that model and it's similar because we never changed it so let's just change the result again to say you have some different information and if i click the delete button the name is now the updated information and the form is submitted but it now comes to the delete action so you can have different implementations uh responding to different uh form buttons so now with dotnet six there's you know the when we used to check uh if this button is the update button or the user wanted to click the delete button and based on that we you know wanted different functionality yeah now you can have you know different action methods separated out so that you can clearly define the implementation based on each button action so you can see how easy it was to handle multiple form submit buttons in an asp.net mvc application i hope you like this video if you did please hit the like button and subscribe to the channel and i will see you all in the next video

Channel: Sameer Saini

Views: 9,198

Keywords: asp net mvc, asp net core, form submission asp, asp.net mvc, asp.net core mvc form tutorial, multiple submit buttons in mvc, multiple submit buttons in a single form mvc, submit button asp.net mvc

Id: YYjCgsIQr3I

Length: 10min 31sec (631 seconds)

Published: Sun Sep 18 2022