Forms without script – learn C# (K2, lesson 42)

What you learn in this lesson

build a form with EditForm, FormName and [SupplyParameterFromForm] that works without JavaScript with static SSR

validate input at the edge with DataAnnotationsValidator and show messages at the field with ValidationMessage

explain what the antiforgery token does that EditForm adds by itself

redirect after saving with Post-Redirect-Get

write domain errors from the model’s Result next to the right field

link error messages to their field for screen readers

create and edit contacts in the Kladde

The Kladde shows contacts, but you can create or edit them only through the API. In this lesson, it gets two forms: “New contact” and a contact’s page, where you edit the contact. Both work like the booking form from lesson 2.1.3: The browser sends a POST, and the server validates, saves and answers. It doesn’t need a script for that. What’s new is that Blazor takes a lot of work off your hands: the fields, the validation, the messages and the protection against forged forms.

A form with static SSR

With static SSR, there’s no component between two requests that waits for a click (lesson 2.5.1). So a form works as in HTML: The browser sends the fields with a POST to the page’s address. Blazor creates the page anew for this request, puts the submitted values in a property of the page and then calls the method that processes the form. After that, it renders the page, and the browser gets it as the response.

For Blazor to know which form is meant and where the values belong, it needs three things:

EditForm instead of <form>. The component renders the <form method="post">, connects the fields to a model and calls OnValidSubmit when all the checks have passed.
FormName: a name that makes the form unique on the page.
[SupplyParameterFromForm] on the property that takes in the submitted values.

What you learn in this lesson

A form with static SSR

This lesson belongs to course K2