Блог

В проекте blazor я использовал Editform and Fluentvalidation , а также пояс для инструментов.Блейзор.Горячие клавиши для сочетания клавиш (ctrl s) для отправки формы При нажатии ctrl s вызывается метод отправки (), но если в форме есть ошибка, она не отображает ошибки. На самом деле вызывается только метод, а не форма отправки. Какое решение вы предлагаете для этой проблемы?

 <EditForm Model="@model" OnValidSubmit="Submit">
            <FluentValidationValidator />
         ...
          <button type="submit" >save</button>
        </EditForm>

@code
{
 [Parameter] public CategoryInfo model { get; set; } = new();
 private async Task Submit()
    {
        var validator = new CategoryValidator();
        var result = validator.Validate(model);
        if (result.IsValid)
        {
            ...
        }
    }
}
 

Вот рабочий одностраничный компонент, демонстрирующий код, необходимый для реализации отправки формы <CTL>S . Я использовал DataAnnotationsValidator его для простоты. Существуют встроенные комментарии, объясняющие методы.

 @page "/"
@implements IDisposable
@using Toolbelt.Blazor.HotKeys
@using System.ComponentModel.DataAnnotations;

<h3>EditForm</h3>

<EditForm EditContext="this._editContext" OnValidSubmit="ValidSubmitForm" OnInvalidSubmit="InvalidSubmitForm">
    <DataAnnotationsValidator />
    <div class="p-2">
        <span>Value (100-200):</span>
        <InputNumber @bind-Value="_model.Value" />
        <ValidationMessage For="() => _model.Value"/>
    </div>
    <div class="m-2 p-2">
        <button class="btn btn-success" type="submit">Submit</button>
    </div>
</EditForm>
<div class="m-2 p-2">
    <span>@message</span>
</div>
<div class="m-2 p-2">
    <button class="btn btn-danger" type="button" @onclick="SubmitFormExternally">Submit Form Externally</button>
</div>


@code {
    private string message;

    private Model _model = new Model();

    [Inject] private HotKeys hotKeys { get; set; }

    private HotKeysContext _hotKeysContext;

    EditContext _editContext;

    // Explicitly setup the Edit context so we have a reference to it
    protected override void OnInitialized()
    {
        _editContext = new EditContext(_model);
        _hotKeysContext = this.hotKeys.CreateContext()
         .Add(ModKeys.Ctrl, Keys.S, SubmitFormCtlS, "Submit form");

    }

    // Invalid handler
    private Task ValidSubmitForm()
    {
        message = $"Valid Form Submitted at :{DateTime.Now.ToLongTimeString()}";
        return Task.CompletedTask;
    }

    // Valid Handler
    private Task InvalidSubmitForm()
    {
        message = $" Invalid Form Submitted at :{DateTime.Now.ToLongTimeString()}";
        return Task.CompletedTask;
    }

    // Method to call from external button
    // Works and component updates as it's a Blazor Component event
    // emulates the private HandleSubmitAsync method in EditForm
    private async Task SubmitFormExternally()
    {
        if (_editContext.Validate())
            await this.ValidSubmitForm();
        else
            await this.InvalidSubmitForm();
    }

    // Method to call from shortcut key
    // The shortcut key mechanism does't wrap the call in a Blazor Component event
    // So we wrap the code within one
    // The code emulates the private HandleSubmitAsync method in EditForm
    private async Task SubmitFormCtlS()
    {
        var task = Task.CompletedTask;
        if (_editContext.Validate())
            task = this.ValidSubmitForm();
        else
            task = this.InvalidSubmitForm();
        this.StateHasChanged();
        if (!task.IsCompleted || task.IsCanceled)
        {
            await task;
            this.StateHasChanged();
        }
    }

    public void Dispose()
    {
        _hotKeysContext.Dispose();
    }

    // Quick Model Class
    public class Model
    {
        [Range(100, 200, ErrorMessage = "Must be between 100 and 200")]
        public int Value { get; set; } = 0;
    }
}