Blazor and FluentValidation

Viewed 1002

I've been tinkering with Blazor and FluentValidation as a learning process, but can't seem to get even a "Hello World!" to work.

I started a new project and added Fluent via NuGet, with a very basic data class, validator and index razor page.

No validation messages appear. I just get the dreaded "An unhandled exception has occurred. See browser dev tools for details." at the botton of the page. Please help me get this working.

using FluentValidation;
namespace TestFluent.Data
{
    public class Employee
    {
        public string Name { get; set; }
    }

    public class EmployeeValidator:AbstractValidator<Employee>
    {
        public EmployeeValidator()
        {
            RuleFor(n => n.Name).NotEmpty().WithMessage("Please enter a name");
            RuleFor(n => n.Name).MaximumLength(30).WithMessage("Name must be 30 characters or less");
        }
    }
}

and the Index.razor:

@page "/"
@using TestFluent.Data;

<h3>Header</h3>
<EditForm Model="@emp" OnValidSubmit="@HandleSubmit">
    <FluentValidationValidator />
    <ValidationSummary />
    <div class="form-group">
        <label class="col-form-label">Name:</label>
        <div class="col-md-6">
            <InputText @bind-Value="@emp.Name"></InputText>
            <ValidationMessage For="@(() => emp.Name)" />
        </div>
    </div>
    <button class="btn btn-success" type="submit">Save</button>
    <p><label>@msg</label></p>
</EditForm>

@code {
    string msg = "";
    Employee emp = new Employee();

    void HandleSubmit()
    {
        msg = "Success!";
    }
}

Edit: I followed this video https://www.youtube.com/watch?v=DQxsQu9yg20

Dev tools error:

[2020-08-16T01:20:44.379Z] Error: System.MissingMethodException: Method not found: 'System.Threading.Tasks.Task`1<FluentValidation.Results.ValidationResult> FluentValidation.IValidator.ValidateAsync(System.Object, System.Threading.CancellationToken)'.
    
           at Blazored.FluentValidation.EditContextFluentValidationExtensions.ValidateModel(EditContext editContext, ValidationMessageStore messages, IServiceProvider serviceProvider, IValidator validator)

   at System.Runtime.CompilerServices.AsyncMethodBuilderCore.Start[TStateMachine](TStateMachine& stateMachine)

   at Blazored.FluentValidation.EditContextFluentValidationExtensions.ValidateModel(EditContext editContext, ValidationMessageStore messages, IServiceProvider serviceProvider, IValidator validator)

   at Blazored.FluentValidation.EditContextFluentValidationExtensions.<>c__DisplayClass2_0.<AddFluentValidation>b__0(Object sender, ValidationRequestedEventArgs eventArgs)

   at Microsoft.AspNetCore.Components.Forms.EditContext.Validate()

   at Microsoft.AspNetCore.Components.Forms.EditForm.HandleSubmitAsync()

   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
1 Answers

FluentValidation does not provide integration with Blazor out of the box, but there are several third party libraries you can use to do this:

and mine:

Based on the error:

System.MissingMethodException: Method not found: 'System.Threading.Tasks.Task`1<FluentValidation.Results.ValidationResult> FluentValidation.IValidator.ValidateAsync(System.Object, System.Threading.CancellationToken)'

I guess you are referencing an older version of FluentValidation nuget that is not compatible with newer Blazored.FluentValidation nuget.

These errors occurs, when there is a breaking change of those dependencies. In this case IValidator.ValidateAsync(System.Object)' has been changed to .IValidator.ValidateAsync(System.Object, System.Threading.CancellationToken = default)'.

According to author, such changes to FluentValidation should be avoided in the future, see https://github.com/FluentValidation/FluentValidation/issues/1915

Related