c# - 使用 Blazor 进行客户端验证
问题描述
我有一个 EditForm,它将 AnimalList 作为具有动物列表的模型。我在动物对象上使用数据注释。在前端,我能够将动物名称列表显示为下拉 + 文本输入组合并将对象添加到该列表中。因此,您将选择一个动物名称并为该动物分配一个友好的名称。即我选择“Giraffe”,然后给它一个友好的长颈鹿名字,比如“Brian”。然后单击添加更多会将空白默认值添加到列表中并可以继续等。我尝试使用数据注释在每一行的文本输入字段上进行一些客户端验证,如果我将友好名称留空,我应该收到一条消息说该字段是必需的。最好在我在文本字段内单击并离开之后(我认为是 onBlur?)。
我觉得这应该是标准的,但我觉得使用列表会使标准验证变得更加困难。
如果我输入一些文本,点击离开,然后删除所述文本并点击离开,我会得到验证,这并不理想。更重要的是,当我单击提交时,我觉得表单应该验证然后不提交,因为应该有消息,但这也不起作用并且提交得很好。我已经尝试过 context.validate 并且它的回报是真的?
我应该在这里查看某种自定义验证还是应该可行?
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; }
}
解决方案
按照我的建议,我将其分解为表格列表。
注意:我在页面后面使用了代码。
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);
}
}
推荐阅读
- vue.js - 如何在vue中为一条记录只调用一次api?
- python - 单击左键单击条目tkinter python时删除文本?
- python-3.x - 如何计算尝试次数直到正确的用户输入/仅当用户输入等于 randint 时才更改 randint
- flutter - 如何修复 A RenderFlex 右侧溢出 99889 像素?
- mysql - 如何在mysql 8.0.24社区服务器的my.cnf中配置log_bin和log_bin_index?
- scala - scala中Union函数的求值顺序
- python - 使用tensordot无法重新创建具有“交错”输出索引的一行einsum函数?
- javafx - 尽管已链接,但 Anchor Pane 仍为空
- rust - 如何在 Petgraph 中获得确定性拓扑排序?
- django - Django ArrayField 在其中创建三个字符域?