ASP.Net Core - Blazor Server App - Form Validation

Screenshot from the tutorial

ASP.NET Core Blazor Server App: Form Validation in Under 3 Minutes

In the world of web development, form validation is crucial for ensuring that user input is correct, secure, and usable. Blazor, a framework from Microsoft for building interactive web UIs using C#, simplifies this process with its powerful capabilities. In this post, we’ll explore how to implement form validation in a Blazor Server app, inspired by a recent YouTube tutorial.

What is Blazor?

Before we dive into form validation, let's briefly understand what Blazor is. Blazor is a framework for building interactive web applications using C# instead of JavaScript. There are two hosting models for Blazor: Blazor Server and Blazor WebAssembly. In this tutorial, we’ll focus on Blazor Server, which runs on the server side and communicates with the client via SignalR.

Setting Up Your Blazor Server App

To get started, you'll need to create a new Blazor Server application. You can do this using Visual Studio or the .NET CLI. Here’s how to create a new project using the .NET CLI:

dotnet new blazorserver -o MyBlazorApp
cd MyBlazorApp
dotnet run

Once your application is running, navigate to https://localhost:5001 in your web browser.

Implementing Form Validation

Step 1: Create a Model

First, you'll need a model class to represent the data structure of your form. Let's create a simple Person model with validation attributes.

using System.ComponentModel.DataAnnotations;

public class Person
{
    [Required(ErrorMessage = "Name is required.")]
    [StringLength(100, ErrorMessage = "Name can't be longer than 100 characters.")]
    public string Name { get; set; }

    [Required(ErrorMessage = "Email is required.")]
    [EmailAddress(ErrorMessage = "Invalid email format.")]
    public string Email { get; set; }
}

Step 2: Create a Form in a Razor Component

Next, create a new Razor component called PersonForm.razor. This is where we will build our form and implement validation.

@page "/personform"
@using System.ComponentModel.DataAnnotations

<h3>Person Form</h3>

<EditForm Model="@person" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div>
        <label>Name:</label>
        <InputText @bind-Value="person.Name" />
        <ValidationMessage For="@(() => person.Name)" />
    </div>

    <div>
        <label>Email:</label>
        <InputText @bind-Value="person.Email" />
        <ValidationMessage For="@(() => person.Email)" />
    </div>

    <button type="submit">Submit</button>
</EditForm>

@code {
    private Person person = new Person();

    private void HandleValidSubmit()
    {
        // Handle the form submission logic here
        Console.WriteLine($"Name: {person.Name}, Email: {person.Email}");
    }
}

Step 3: Add Navigation to Your Form

To access your form, add a link to the NavMenu.razor file:

<NavLink class="nav-link" href="personform">
    <span class="oi oi-plus" aria-hidden="true"></span> Person Form
</NavLink>

Step 4: Run Your Application

Now that everything is set up, run your application again. Navigate to the /personform route you just created. You'll see your form with validation messages.

Step 5: Testing Validation

Try submitting the form without filling in the fields. You should see validation messages indicating what needs to be corrected. This helps ensure that users provide the correct information before submission.

Conclusion

Form validation is an essential part of creating user-friendly web applications. With Blazor Server, implementing this feature is straightforward and efficient. By leveraging data annotations and Blazor's built-in validation components, you can easily enhance user experience and ensure data integrity.

For further learning, explore more complex validation scenarios, such as custom validation logic or integrating with backend services. Happy coding!

For more details, feel free to check the video tutorial here.

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios