Suitable for Blazor webassembly?

[mkopara]

Is this project suitable for Blazor Webassembly? I'm trying to follow instruction, but I am unable to get it to work

[Akinzekeel]

I'm using it in Blazor WASM without any issues. Can you provide more details about the problem you're having?

[cquick]

I've been trying to get it to work in Blazor WASM as well, but I'm getting an exception saying a method is not found. I've build a model, an abstract validator for the model, and I'm using the model in a component used on the page which passes the model as a parameter to the component. Here are some examples of my code:

Model:
`public class Period:BaseModel, ICreatedModified
{
public Period() : base()
{
Created=DateTimeOffset.Now;
Modified=DateTimeOffset.Now;
Folders = new List<Folder>();
}

    public DateTime? PeriodStart { get; set; }
    public DateTime? PeriodEnd { get; set; }
    public string Name { get; set; }
    public List<Folder> Folders { get; set; }
    public DateTimeOffset? Created { get; set; }
    public DateTimeOffset? Modified { get; set; }
}`

Validator:
public class PeriodValidator:AbstractValidator<Period> { public PeriodValidator() { RuleFor(p => p.Name).NotEmpty().MaximumLength(50).MinimumLength(5); RuleFor(p => p.PeriodStart).NotEmpty().LessThanOrEqualTo(p => p.PeriodEnd); RuleFor(p => p.PeriodEnd).NotEmpty(); RuleFor(p => p.ItemId).NotEmpty(); } }

Host Page (abbreviated):
`@page "/budget/{id}"
@Inject HttpClient http
@Inject NavigationManager nav

@if (IsLoaded)
{
<PeriodEditorDialog Period="@SelectedPeriod"
ShowDialog="@_showPeriodDialog"
CloseAndAbandonChanges="OnCancelPeriod"
SaveChanges="OnSavePeriod"></PeriodEditorDialog>
}
else
{
<LoadingPanel ShowLoading="@_isLoading"></LoadingPanel>
}

@code {
Budget _budget;
bool _isLoading = true;
protected bool IsLoaded => _budget != null;
bool _showPeriodDialog = false;
Guid _selectedPeriodId = Guid.Empty;

protected override async Task OnInitializedAsync()
{
    await LoadBudget();
}

private async Task LoadBudget()
{
    var result = await http.GetFromJsonAsync<Budget>($"api/budget/{Id}");
    _budget = result;
}

Period SelectedPeriod => _selectedPeriodId != Guid.Empty
    ? _budget.Periods.FirstOrDefault(p => p.ItemId.Equals(_selectedPeriodId))
    : new Period();

protected void OnAddPeriod()
{
    _showPeriodDialog = true;
}

protected void OnEditPeriod(Guid id)
{
    _selectedPeriodId = id;
    _showPeriodDialog = true;
}

protected async Task OnSavePeriod(Period updatedPeriod)
{
/* code omitted */
}

protected void OnCancelPeriod()
{
    _selectedPeriodId = Guid.Empty;
    _showPeriodDialog = false;
}

[Parameter]
public string Id { get; set; }`

Editor Dialog Component:
`@if (ShowDialog)
{
<div class="period-editor-dialog">
<EditForm Model="@period">
<FluentValidator/>
<div class="dialog">
<div class="dialog-title">Period Information</div>
<div class="dialog-body">
<div class="mb-3">
<label for="periodName" class="form-label">Period Name</label>
<InputText id="periodName" DisplayName="Period Name"
@bind-Value="Period.Name"
class="form-control"></InputText>
<ValidationMessage For="() => Period.Name"></ValidationMessage>
</div>
<div class="mb-3">
<label for="periodStart" class="form-label">Period Start</label>
<InputDate id="periodStart" DisplayName="Period Start"
@bind-Value="Period.PeriodStart"
class="form-control"></InputDate>
<ValidationMessage For="() => Period.PeriodStart"></ValidationMessage>
</div>
<div class="mb-3">
<label for="periodEnd" class="form-label">Period End</label>
<InputDate id="periodEnd" DisplayName="Period End"
@bind-Value="Period.PeriodEnd"
class="form-control"></InputDate>
<ValidationMessage For="() => Period.PeriodEnd"></ValidationMessage>
</div>
</div>
<div class="dialog-actions">
<button type="button" class="btn btn-secondary" @OnClick="@OnClickCancel">Cancel</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</EditForm>
</div>
}

@code {
[Parameter]
public bool ShowDialog { get; set; }

[Parameter]
public Period Period { get; set; }

[Parameter]
public EventCallback CloseAndAbandonChanges { get; set; }

[Parameter]
public EventCallback<Period> SaveChanges { get; set; }

protected async Task OnClickCancel()
{
    Period = new Period();
    await CloseAndAbandonChanges.InvokeAsync();
}

public async Task SubmitFormAsync()
{
    await SaveChanges.InvokeAsync(Period);
}

}
`

Finally, in my startup I have used the FluentValidation.DependencyInjection to add the validators.
`public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");

        builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

        builder.Services.AddValidatorsFromAssemblyContaining<Period>();

        await builder.Build().RunAsync();
    }
}`

The error:
crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Method not found: System.Collections.Generic.IList1<FluentValidation.Results.ValidationFailure> FluentValidation.Results.ValidationResult.get_Errors() System.MissingMethodException: Method not found: System.Collections.Generic.IList1<FluentValidation.Results.ValidationFailure> FluentValidation.Results.ValidationResult.get_Errors()
at System.Runtime.CompilerServices.AsyncMethodBuilderCore.Start[<ValidateModel>d__25](<ValidateModel>d__25& stateMachine)
at Microsoft.AspNetCore.Components.Forms.FluentValidator.ValidateModel(EditContext editContext, ValidationMessageStore messages)
at Microsoft.AspNetCore.Components.Forms.FluentValidator.<>c__DisplayClass24_0.<AddValidation>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)