ASP.NET Core Blazor Forms

Forms are a fundamental part of most web applications, allowing users to input data. Blazor provides a powerful and integrated way to handle forms and user input.

Introduction to Blazor Forms

Blazor allows you to create and manage forms using standard HTML elements combined with Blazor's data binding and event handling capabilities. The core concepts revolve around:

Input Components: Blazor provides built-in input components (e.g., InputText, InputNumber, InputCheckbox) that simplify data binding and validation.
Data Binding: Easily bind form input values to C# properties in your component.
Event Handling: Respond to user interactions like form submission or input changes.
Validation: Implement client-side and server-side validation to ensure data integrity.

Basic Form Structure

A typical Blazor form involves:

A C# class to hold the form data (a model).
A Blazor component with a <form> element.
Input elements bound to properties of the model.
An event handler for form submission.

Example: A Simple Contact Form Model


public class ContactFormModel
{
    public string Name { get; set; }
    public string Email { get; set; }
    public string Message { get; set; }
}

Example: Blazor Component with a Form


@page "/blazor/forms/example"
@using YourApp.Models // Assuming ContactFormModel is in this namespace

Contact Us


    

    
        
            Name:
            
            
        

        
            Email:
            
            
        

        
            Message:
            
            
        

        
    


@code {
    private ContactFormModel contactModel = new ContactFormModel();

    private void HandleValidSubmit()
    {
        // Process the form data here.
        // For example, send an email, save to database, etc.
        Console.WriteLine($"Name: {contactModel.Name}");
        Console.WriteLine($"Email: {contactModel.Email}");
        Console.WriteLine($"Message: {contactModel.Message}");

        // Optionally, clear the form or redirect.
        contactModel = new ContactFormModel();
    }
}

Key Blazor Form Components and Features

`<EditForm>` Component

The <EditForm> component is the primary container for forms in Blazor. It manages the form's state, validation, and submission events.

Model: Specifies the C# object that holds the form's data.
OnValidSubmit: An event that is triggered when the form is submitted and all validation rules pass.
OnInvalidSubmit: An event triggered when the form is submitted but validation fails.

Input Components

Blazor provides several input components that simplify binding to different data types:

InputText: For text input.
InputNumber<T>: For numeric input (e.g., InputNumber<int>, InputNumber<double>).
InputDate<T>: For date and time input.
InputCheckbox: For boolean values.
InputSelect<TValue>: For dropdown selection.
InputTextArea: For multi-line text input.

These components use the @bind-Value directive for two-way data binding.

`<ValidationSummary>` and `<ValidationMessage>`

These components are used to display validation errors:

<ValidationSummary>: Displays a summary of all validation errors.
<ValidationMessage For="...">: Displays validation errors for a specific form field.

Server-Side vs. Client-Side Validation

Blazor supports both client-side and server-side validation. For client-side validation, you typically use the Data Annotations library with the DataAnnotationsValidator component.

Note on Validation: For robust validation, it's recommended to decorate your model properties with Data Annotations (e.g., [Required], [EmailAddress], [StringLength]) and include the <DataAnnotationsValidator /> within your <EditForm>.

Handling Form Submission

The OnValidSubmit event handler is where you implement the logic to process the submitted form data. This could involve:

Saving data to a database.
Sending an email.
Calling an API.
Navigating the user to another page.

Custom Input Components

For more complex input scenarios, you can create your own custom Blazor input components by inheriting from InputBase<T>.