Using forms for user input

This guide builds on the third step of the Getting Started tutorial, Passing Data to child component, Adding Navigation, and Managing Data. This section walks you through adding a form-based checkout feature to collect user information as part of checkout.

Define the checkout form model

This step shows you how to use the pre-built <EditForm> tag of Blazor Server. By combining the <EditForm> tag with the System.ComponentModel.DataAnnotations package you will have a form with validators and state managers.

Create the form model

You will need a form model for each form. Start by going to the Data folder and add CheckoutInfo.cs as follow.

using System.ComponentModel.DataAnnotations;

namespace OnlineShopBlazorServer.Data
{
    public class CheckoutInfo
    {
        [Required(ErrorMessage = "Name is required.")]
        public string Name { get; set; }
        [Required(ErrorMessage = "We need the address to deliver the product.")]
        public string Address { get; set; }
    }
}

The System.ComponentModel.DataAnnotations includes various validators like Required, Phone, StringLength, MaxValue, and much more. This can be combined together by adding the attributes above the validating property.

[Required(ErrorMessage = "Name is required.")]
public string Name { get; set; }

For example, you just set that Name property must not null and the message "Name is required" will show when the user input an empty name.

Create the checkout form

Use the following steps to add a checkout form to the checkout page.

1. In the Checkout.razor file, add the pre-built component EditForm and the code to submit the form in the @code{} section.

@using Data;

<EditForm Model="CheckoutInfo" OnValidSubmit="SubmitAsync">
    <button type="submit">Submit</button>
</EditForm>

@code {
    private CheckoutInfo CheckoutInfo = new();

    private async Task SubmitAsync()
    {
        
    }
}

2. Bind the property of CheckoutInfo to the EditForm component.

<EditForm Model="CheckoutInfo" OnValidSubmit="SubmitAsync">
    <DataAnnotationsValidator></DataAnnotationsValidator>
    <div>
        <label class="col-form-label" for="name">Name:</label>
        <InputText id="name" class="form-control" @bind-Value="CheckoutInfo.Name"></InputText>
        <ValidationMessage class="form-control" For="()=>CheckoutInfo.Name"></ValidationMessage>
    </div>

    <div>
        <label class="col-form-label" for="address">Address:</label>
        <InputText id="address" class="form-control" @bind-Value="CheckoutInfo.Address"></InputText>
        <ValidationMessage class="form-control" For="()=>CheckoutInfo.Address"></ValidationMessage>
    </div>

    <div>
        <button class="btn btn-primary" type="submit">Submit</button>
    </div>
</EditForm>

3. Update the SubmitAsync method to display the user information.

private async Task SubmitAsync()
{
    await JsRuntime.InvokeVoidAsync("alert", $"Thank you {CheckoutInfo.Name}, we will deliver to {CheckoutInfo.Address}.");
}

After putting a few items in the cart, users can review their items, enter their information and submit their order.

What's next

You have a complete online shopping website with a product catalogue, a shopping cart, and a checkout feature.

Continue to the "Deployment" section to move to local development, or a cloud service.