使用 Blazor 进行客户端验证

Question

我有一个 EditForm，它将 AnimalList 作为具有动物列表的模型。我在动物对象上使用数据注释。在前端，我能够将动物名称列表显示为下拉菜单 + 文本输入组合，并将对象添加到该列表。因此，您将 select 一个动物名称并为该动物指定一个友好的名称。即我 select “长颈鹿”，然后给它一个友好的长颈鹿名字，比如“布赖恩”。然后单击“添加更多”会将空白默认值添加到列表中并可以继续等。我正在尝试使用数据注释在每一行的文本输入字段上进行一些客户端验证，因为如果我将友好名称留空，我应该会收到一条消息，说明该字段是必需的。最好是在我在文本字段内单击并离开后（我认为是 onBlur？）。

我觉得这应该是标准的，但我觉得使用列表会使标准验证变得更加困难。

如果我输入一些文本，点击离开，然后删除所述文本并点击离开，我会得到验证，这并不理想。更重要的是，当我点击提交时，我觉得表单应该验证然后不提交，因为应该有消息，但这也不起作用并且提交就好了。我试过 context.validate 并且它 returns 是真的吗？

我应该在这里查看某种自定义验证还是应该这样做？

AddAnimals.Razor 代码：

<Css />

<h3>Add your animals</h3>

<EditForm Class="login-form" Model="@AnimalList" OnValidSubmit="SaveAnimals">
    <DataAnnotationsValidator/>

    @if (!string.IsNullOrEmpty(Error))
    {
        <Notification Type="@NotificationType.Error" Message="@Error" />
    }

    <div class="form-group">
        <div class="form-row">
            <div class="col-6">
                <label for="Select">Select Animal</label>
            </div>
            <div class="col">
                <label>Animal Name</label>
            </div>
        </div>
        <ul>
            @foreach (var animalSelection in AnimalList.SelectedAnimals)
            {
                <li>
                    <div class="form-row">
                        <div class="col-6">
                            <select class="form-control" @bind="animalSelection.AnimalName">
                                <option value="" disabled selected hidden>Select...</option>
                                @foreach (var name in AnimalNames)
                                {
                                    <option value="@name">@name</option>
                                }
                            </select>
                        </div>
                        <div class="col">
                            <InputText  class="form-control" @bind-Value="animalSelection.FriendlyName" />
                            <ValidationMessage For="@(() => animalSelection.FriendlyName)" />
                        </div>
                    </div>
                </li>
            }
        </ul>
    </div>
    <div class="form-group">
        <button type="button" class="btn" @onclick="AddMoreAnimals">+ Add More</button>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary">Continue</button>
    </div>
</EditForm>

@code {

    [Parameter]
    public AnimalList AnimalList { get; set; } = new AnimalList();

    [Parameter]
    public List<string> AnimalNames { get; set; } = new List<string>();

    public string Error { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            AnimalNames = AnimalsService.GetAnimals();
            await GetAnimalList();
            if (AnimalList.SelectedAnimals.Count < 1)
            {
                AddMoreAnimals();
            }
            StateHasChanged();
        }
    }

    private async Task GetAnimalList()
    {
        AnimalList.SelectedAnimals = await AnimalsService.GetAnimals();
    }

    private void AddMoreAnimals()
    {
        AnimalList.AddDefault();
    }

    private async void SaveAnimals(EditContext context)
    {
        AnimalList.TrimList();

        foreach (var animal in AnimalsList.SelectedAnimals)
        {
            var response = await AnimalsService.AddAnimal(animal);
            if (response.IsError)
            {
                Error = response.Error;
                StateHasChanged();
                break;
            }
            else
            {
                Error = string.Empty;
            }
        }
    }
}

动物列表

    public class AnimalList
    {
        public List<Animal> SelectedAnimals { get; set; }

        public AnimalList()
        {
            SelectedAnimals = new List<Animal>();
        }

        public void AddDefault()
        {
            SelectedAnimals.Add(new Animal());
        }

        public void TrimList()
        {
            //Trim away possible unused rows
            SelectedAnimals.RemoveAll(
                item => string.IsNullOrEmpty(item.FriendlyName) && 
                    string.IsNullOrEmpty(item.AnimalName));
        }
    }

动物

    public class Animal
    {
        [Required(ErrorMessage = "Animal selection is required")]
        public string AnimalName { get; set; }
        
        [Required(ErrorMessage = "You must enter a name for your Animal")]
        [DisplayFormat(ConvertEmptyStringToNull = true)]
        public string FriendlyName { get; set; }
    }

Answer 1

不使用 OnValidSubmit 也不使用 OnInvalidSubmit，只使用 OnSubmit

<EditForm Class="login-form" Model="@AnimalList" OnSubmit="SaveAnimals">

在 SaveAnimal 中，查看列表

private async void SaveAnimals(EditContext context)
{
    bool valid = context.Validate();
    AnimalList.SelectedAnimals.ForEach(x =>
    {
        var field=FieldIdentifier.Create((() => x.FriendlyName));
        context.NotifyFieldChanged(field);
        if (valid)
            valid = context.GetValidationMessages(field)
                       .FirstOrDefault(x => !String.IsNullOrEmpty(x)) == null;

    });
    if (valid)
        Console.WriteLine("Save Animals");
}

Answer 2

我按照我的建议将其分解为表格列表。

注意：我使用了页面后面的代码。

AnimalsPage.razor

@page "/animals"

<h3>Add your animals</h3>
<CascadingValue Value="this">
    @foreach (var animal in this.animals)
    {
        <AnimalEditForm @key="animal" Animal="animal" />
    }
</CascadingValue>
<button class="btn mr-1" @onclick="AddAnimalClicked">Add Animal</button>
@if (lastValidateResult)
{
    <button class="btn btn-success" @onclick="SaveAllClicked">Save All</button>
}
else
{
    <button class="btn btn-primary" @onclick="ContinueClicked">Continue</button>
}

AnimalsPage.razor.cs

public partial class AnimalsPage
{
    private void AddAnimalClicked(MouseEventArgs mouseEventArgs)
    {
        this.animals.Add(new Animal());
        this.lastValidateResult = false;
    }

    private void ContinueClicked(MouseEventArgs mouseEventArgs)
    {
        //Your "Trim" function
        List<Animal> emptyAnimals = this.animals.Where(a => a.AnimalName == default && a.AnimalType == default).ToList();
        emptyAnimals.ForEach(a =>
        {
            this.animals.Remove(a);
            this.animalForms.Remove(a);
            this.animalValidationResults.Remove(a);
        });

        this.animalForms.Values.ToList().ForEach(a => a.ShowValidations(true));
        StateHasChanged();
    }

    private void SaveAllClicked()
    {
        //.....
    }

    internal void ChildChangedState(Animal animal, bool result)
    {
        bool prev;
        if (!this.animalValidationResults.ContainsKey(animal))
        {
            prev = false;
            this.animalValidationResults[animal] = prev;
        }
        else
        {
            prev = this.animalValidationResults[animal];
            if (prev != result)
            {
                this.animalValidationResults[animal] = result;
                this.lastValidateResult = this.animalValidationResults.Values.All(a => a);
                StateHasChanged();
            }
        }
    }
    internal Dictionary<Animal, AnimalEditForm> animalForms = new Dictionary<Animal, AnimalEditForm>();
    private readonly Dictionary<Animal, bool> animalValidationResults = new Dictionary<Animal, bool>();
    private readonly List<Animal> animals = new List<Animal>();
    private bool lastValidateResult = false;
}

AnimalEditForm.razor

<EditForm Model="Animal">
    <DataAnnotationsValidator />
    @{if (validatorVisible) { { Validate(context); } } }
    <div class="form-row mb-1">
        <div class="col">
            <InputSelect  class="form-control" @bind-Value="Animal.AnimalType">
                <option value="" selected>Select...</option>
                @foreach (var animalType in animalTypes)
                {
                    <option value=@animalType>@animalType</option>
                }
            </InputSelect>
            <ValidationMessage For="@(() => Animal.AnimalType)" />
        </div>
        <div class="col">
            <InputText class="form-control" @bind-Value="Animal.AnimalName" />
            <ValidationMessage For="@(() => Animal.AnimalName)" />
        </div>
    </div>
</EditForm>

AnimalEditForm.razor.cs

public partial class AnimalEditForm
{
    [Parameter]
    public Animal Animal { get; set; }

    [CascadingParameter]
    public AnimalsPage AnimalsPage { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            AnimalsPage.animalForms[Animal] = this;
        }

        base.OnAfterRender(firstRender);
    }
    private IReadOnlyList<string> animalTypes => new[]
    {
        "Eagle",
        "Elephant",
        "Giraffe",
        "Hippopotamus",
        "Horse",
        "Koala",
        "Zebra"
    };

    public bool LastValidateResult { get; private set; }

    private bool validatorVisible = false;

    public void ShowValidations(bool show) => this.validatorVisible = show;

    public void Validate(EditContext editContext)
    {
        LastValidateResult = editContext.Validate();
        AnimalsPage.ChildChangedState(Animal, LastValidateResult);
    }

}

使用 Blazor 进行客户端验证

Client Side Validation using Blazor

c#

validation

data-annotations

blazor