Handle multiple forms in asp net core razor pages

this is part 17 of Razer pages tutorial in this video we'll discuss how to handle multiple forms in an asp.net core Razer page let's understand this with an example consider this edit Razer page we use this to edit an existing employee details to load this page the browser issues a get request to handle the sketch requests a speed or net core laser pages framework looks for a method that is named on get in the corresponding page model class after the employee data is loaded obviously we can make changes to it and when we click the Update button the browser issues a post request to handle this post requests is p.net core razor pages framework looks for a method that is named on post again in the corresponding page model class asp.net core razor pages framework uses a naming convention to find the appropriate handler method in the corresponding page model class the word on is prefixed to the request verb so for the get request it looks for on get and for post it looks for on post similarly for put on third at the moment on this edit razor page we have a single form things slightly change when we have multiple forms on a given razor page we have two forms here form one for updating employee notification preferences and form two for updating employee data at the moment on our edit razor page we only have the Edit form we want this notification preferences form as well to start with we need two properties in the corresponding page model class this is our edit page model class in addition to these two properties employee and photo we need another two public properties let's start with a boolean property I'm going to name this notify and let's decorate this with pine property attribute we discuss the significance of this attribute in our previous videos in the series in addition to notify we need another string property let's call this message in a bit we'll see how we are going to make use of these two properties and then in our display template we want this notification preferences form so the heading here is notification preferences so let's include an h1 for that and the text is notification preferences after the h1 element we want a form and when we submit this form we want to issue a post request so let's say the method attribute to post inside this form we want this checkbox receive email notification when my details change so let's include an input element and bind this input element to this notify boolean property we have included in the page model class so for that let's use ASP - for tag helper and then specify the name of the property notify for styling let's use the bootstrap class form - check - input to display this text receive email notification when my details change let's include a label and then bind it again to notify property for styling let's use form - check - label woodshop class and then this is the text that we want inside the label and then again for styling let's wrap the input element and the label with the development and then use the bootstrap class form check below the check box and label we want this button update notification preferences this is a submit button so let's include a button of type submit and let's use the bootstrap BTN and BTN primary classes for styling the text on the button is update notification preferences in the page model class I'm going to include a handler method and let's name it on post update notification preferences this is going to be a public method returns void now when this button update notification preferences is click we want this handler method to be called and we want this handler method to set this message public property dynamically depending on the value of this boolean notify property and remember this property is bound to this checkbox so if this checkbox is checked then the value of this property is true otherwise false and depending on this property value we want to set this public message property and here is the code for that if notify property is true we are setting the message property to thank you for turning on notifications otherwise we are setting it to you have turned off email notifications next we want to display the value that we have in this message property just below this update notification preferences button let's do that using a bootstrap alert to get the bootstrap alert we use a div element along with these to bootstrap classes alert and alert - primary in the alert let's display the value that we have in the message property we don't want to display this alert all the time we only want to display it when the message property is not null or empty at the moment on our edit raiser page we have these two forms let's separate these two forms using a horizontal row so just after the closing form tag let's include an HR element here now when this button is clicked update notification preferences we want this handler method to be called on post update notification preferences similarly when we click this update button on a form - we want this on post method to be called to specify this we use a SP - Paige - handler tag helper notice on form one we have set it to update notification preferences this on post prefix here is optional whether we include it or not will have the same behavior and when we submit is form two we want this on post method to be called so we have set SP - Paige - handler - on post let's quickly make these two changes on the first form let's add a spy - page handler - update notification preferences on the second form let's set it to on post and then run our project in debug mode at the moment we are on the home page let's navigate to employees list page click Edit on one of the employees and then let's place breakpoints on the to handle methods on post and on post update notification preferences and then let's click this button notice as expected this handle method is executed on post update notification preferences and when we continue execution we have another reference exception that's because this employee property on the model is now to fix this notice in the URL we have the ID of the employee that we are editing as a road parameter so let's stop debugging include ID parameter on this method model binding in asp.net core is going to automatically map the value from the URL to this parameter we'll then use this ID parameter to retrieve the respect to employee details and then store them in this employee property which our display template is bound to to retrieve the respective employee details we will use this injected employee repository on this we have get employee method to this we pass the incoming ID and then whatever details we get let's store it in the employee property and then let's run our project again in debug mode at the moment we don't have this checkbox checked when we click update notification preferences our handler method is hit as expected when we continue the execution we see the message you have turned off email notifications when I check this checkbox and then click this button we see a different message now on the other hand when we edit this data on this employee edit form and then when we click this update button notice our own post handler method is hit and when we continue the execution the data is updated and we are redirected to the employees list page notice you can see employee name is updated as expected now if you're wondering how does the framework know which has a method to execute well if you look at the URL it's passed as a query string parameter by default by default the handle name is passed in the URL as a query string parameter if you want to pass it as a route parameter instead all you have to do is include a placeholder for route parameter in the display template as you can see right here so let's quickly make this change first let's stop debugging this handler parameter is optional so let's include a question mark and then run our project again notice now the name of the handler is passed in the URL as a road parameter but when I click this Update button we don't see the handler name that's because we are redirected to a different page in this case to the employees list page so when this kind of a redirection happens and if you want to see the name of the handler then launch browser developer tools by pressing f12 and then let's click Edit on this employee scroll all the way down and then click the Update button notice the initiator column here you can see our hands a name on post in the URL as a wrote parameter that's it in this video thank you for listening

Channel: kudvenkat

Views: 35,164

Keywords: asp.net core razor pages multiple forms, asp.net core razor pages two forms, asp.net core razor pages multiple submit buttons, asp-page-handler not working, asp-page-handler post, asp-page-handler example, asp.net core razor pages handler methods, razor pages multiple forms, razor page multiple submit buttons, razor pages named handler, asp.net core multiple submit buttons, asp.net core razor multiple submit buttons, asp.net core multiple forms on one page

Id: -6PE4p4gUYQ

Length: 10min 17sec (617 seconds)

Published: Fri Jan 10 2020