Скачать или смотреть How to Properly Bind Url Parameters and Form Data in Razor Pages

Discover how to send `Url` parameters such as email and token to your Razor Page's OnPost handler. Follow our detailed guide for effective implementation and troubleshooting!
---
This video is based on the question https://stackoverflow.com/q/64947516/ asked by the user 'Steve' ( https://stackoverflow.com/u/1084357/ ) and on the answer https://stackoverflow.com/a/64947576/ provided by the user 'Fabio' ( https://stackoverflow.com/u/7211131/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Razor - to post Url parameters and form data

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Properly Bind Url Parameters and Form Data in Razor Pages

Razor Pages are a great feature in ASP.NET Core, offering a simple way to build web applications. However, sending parameters through the URL and binding them correctly to your forms can sometimes be tricky. One common dilemma developers face is how to pass Url parameters, like an email address and token, to a Razor page's OnPost handler without getting ModelState Invalid.

In this post, we will explore the problem, provide a detailed solution, and share best practices to ensure you can effectively bind your Url parameters in Razor Pages.

Understanding the Problem

When using Razor pages, you might have a route like this:

[[See Video to Reveal this Text or Code Snippet]]

You want to capture the email and token from the URL and send them through a form upon submission. However, you might run into issues, such as ModelState being invalid, which prevents the form data from being processed successfully.

In the existing setup, the following code attempts to populate these properties but fails:

[[See Video to Reveal this Text or Code Snippet]]

These inputs don't directly match the model's properties, leading to difficulties in binding.

The Solution

The key to resolving this issue lies in correctly binding the Url parameters to the properties of your view model. The main step is to ensure that you prefix the names of your hidden input fields with your ViewModel's property name. Here’s how you can fix the bindings:

Update Hidden Input Bindings

You need to modify the hidden input fields in your Razor page form to include the ViewModel prefix like so:

[[See Video to Reveal this Text or Code Snippet]]

This change means that your form data will now map correctly to the ResetPasswordViewModel properties when the form is submitted.

Example of Updated Form

Here’s what the updated form should look like:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By ensuring the hidden fields are properly prefixed with the VModel name, you facilitate accurate model binding during form submissions. This adjustment should prevent the ModelState Invalid error and allow your OnPost method to receive the correct data.

Key Takeaway

Always prefix your input names in forms that bind to a ViewModel with the ViewModel's name. This is a crucial step in keeping your Razor pages clean and functional!

Now, implement these changes in your project, and you should see an improvement in how your parameters are handled. Happy coding!