Join Jess Chadwick for an in-depth discussion in this video Automatically populating objects with request data, part of ASP.NET Core: Razor Pages.
- [Instructor] Now that I've shown you how to write code on the server that can process an HTTP post request, it's time to see how to access to the data that's posted in that request. Luckily, Razor Pages makes this incredibly easy with a feature called model binding which you can activate by simply applying the BindProperty attribute to any property on your page model. With this property in place, Razor Pages will iterate over each of the properties of the object and attempt to match the name of each property with the name of a value in the request.
When it finds a match, it will assign the value from the request to that property automatically. Then by the time the OnPost method is called, these properties will have been populated and ready to use. The key is in making sure the field names and property names on the model match. And guess what? That's already taken care of by the asp-for helpers that I added to the form previously. Since I used the asp-for tag helper to generate the input fields in this form and pointed them at the fields on the recipe property of my page model, the tag helper will ensure that the form field names remain consistent and the model binding works properly.
The easiest way to really appreciate the power of model binding is to just see it in action. So, I'll set a debug break point on the OnPost method and then run the site in debug mode with F5. Then I can try and save a change to one of the existing recipes. For instance, I can change the name of this recipe from Birthday Cake for Fido to Doggy Cake. Then I can save the changes and when the form is posted back to the server, the recipe will be populated with the form inputs that I just posted.
I could even see the updated name that I entered Doggy Cake. All that's left now is to actually save the updated recipe to the database which I'll do in the OnPost method. First, I'll be sure that the ID of the recipe is the same one from the URL by assigning it the value from the ID property. Then I'll save the updated recipe asynchronously by passing it to the SaveAsync method on the recipe service.
And since this SaveAsync method will update the ID property on the recipe object, when I'm creating a new recipe, I'll update the redirect page call to read the ID right from this recipe object. With this in place, I can run the site. Try to change the name of the recipe from Birthday Cake for Fido to Doggy Cake again. And this time when I save the changes, I can see from the fact that I've been redirected to the recipe's detail page and that the name has been changed that my update to the database has been successful.
Notice that the image for the recipe is missing now though. I expected that to happen because I didn't add the image field to my form. So, when Razor Pages tried to find the value for that image property and didn't find any fields in the request name image, it overwrote the value of the recipe's image property to null. Don't worry though. Not only will I show you how to fix this problem, I'm going to challenge you to fix it first at the end of this chapter.
So, start thinking about how you might do that.
- Creating a new application
- Setting up pages
- Rendering dynamic content
- Reusing markup with layouts
- Increasing the maintainability of pages
- Processing data
- Validating input
- Securing an application