6 Working with forms: Tag helpers

 

This chapter covers

  • Building forms with tag helpers
  • Controlling input types with data annotations
  • Populating select lists with server-side code
  • Working with check boxes and radio buttons in forms
  • Uploading files to the server

The last chapter covered how model binding takes form input and binds it to handler parameters and public properties in Razor Pages. You learned that the key to ensuring successful binding is ensuring that the name of the binding source matches that of the binding target. Up to now, you have generated the name of your form controls manually. This potentially error-prone approach doesn’t move you much beyond fishing around in the Request.Form collection for your posted values.

In Razor Pages applications, forms are where tag helpers shine. You have already seen their role in client- and server-side validation with the validation tag helpers. This chapter will explore how to generate forms to collect data from users and work with the model-binding system. You will see how they can be used to ensure control names work smoothly with binding target names. The following tag helpers are available for form building:

  • Form
  • Form action
  • Label
  • Input
  • Select
  • Option
  • Textarea

Each tag helper targets the HTML element it is named after, except the form action tag helper, which targets buttons and input elements that have their type attribute set to submit or image.

6.1 The form and form action tag helpers

6.2 Input and label tag helpers

6.2.1 Understanding the input types

6.2.2 Using data annotation attributes to control presentation

6.3 The select tag helper

sitemap