服务器端Blazor验证不更新UI
我有一个表示表单的Blazor组件，它需要在提交之前执行一些昂贵的验证，以确保服务器上数据点的唯一性。我试着用这个文档作为灵感：https://learn.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-3.1
似乎更好的文档是在Microsoft文档路线图：https://github.com/dotnet/AspNetCore.Docs/issues/17377上。
我的组件看起来如下：
<EditForm Model="@form" OnValidSubmit="@Submit">
<InputText @bind-Value="form.DataPoint" />
<ValidationMessage For="() => form.DataPoint" />
<button type="submit">Go!</button>
</EditForm>
@code {
private Form form = new Form();
private EditContext editContext;
protected override void OnInitialized()
{
editContext = new EditContext(form);
}
private async Task Submit()
{
var isValid = editContext.Validate() && await ServerValidate(editContext);
if (isValid)
{
// do stuff
}
}
private async Task<bool> ServerValidate(EditContext editContext)
{
var form = (Form)editContext.Model;
var validationErrors = new ValidationMessageStore(editContext);
var isDataPointCollision = await SomeService.CheckUniqueness(form.DataPoint);
if (isDataPointCollision)
{
var field = new FieldIdentifier(form, nameof(Form.DataPoint));
validationErrors.Add(field, "This data point already exists, please type a different one");
editContext.NotifyValidationStateChanged();
return false;
}
return true;
}
}我的验证代码工作正常，检测冲突，防止表单提交。但是，UI并没有按照预期使用<ValidationMessage [...] />组件进行更新。根本不发生UI更新，也没有显示验证消息。我也尝试过这个组件：
<ValidationSummary Model="@form" />都没有用。
服务器上或客户端JS上都没有错误。
我是用这种方法撞错了树，还是错过了某个地方的连接？有更好的方法来完成我想做的事吗？
回答 3
Stack Overflow用户
发布于 2020-04-13 18:35:28
创建(并更新)一个没有附加到UI表单的EditContext。
将第一行改为(注:无模型)：
<EditForm EditContext="editContext" OnValidSubmit="Submit">您的其余代码可以保持原样，不需要StateHasChanged()或任何东西。
在链接到的第一个文档页上，搜索"_editContext"
Stack Overflow用户
发布于 2020-04-13 17:16:52
验证后调用StateHasChanged：
private async Task Submit()
{
var isValid = editContext.Validate() && await ServerValidate(editContext);
if (isValid)
{
// do stuff
}
StateHasChanged();
}注意:或者在editContext.NotifyValidationStateChanged()中调用它，如果您可以访问那里的组件。
Stack Overflow用户
发布于 2020-04-22 07:02:55
亨克的回答是正确的。几个新的
- 将
<DataAnnotationsValidator />和<ValidationSummary />添加到<EditForm>下面，用于模型注释驱动的单个字段验证，并在需要的情况下形成汇总错误消息(除每个字段上的表单外)。 - 一旦将消息添加到字段(
validationErrors.Add(field, "This data point already exists, please type a different one");)，该消息将持续存在，而未来的Submit将被忽略为无效。 - 只有
OnInvalidSubmit()会在此时触发，因为上面的验证错误及其与OnValidSubmit()的配对。需要清除错误，以便进行正常处理。 - 我只找到了一种强力的方法来清除错误，那就是使用
ClearError()方法重新初始化EditContext
public void ClearErrors()
{
_editContext = new EditContext(form);
isSubmitButtonDisabled = false;
showClearErrors = false;
}然后，我将其连接到一个按钮中，在showClearErrors=true时显示该按钮并禁用Submit按钮。如果有更好的方法来消除错误，我会全神贯注的。
https://stackoverflow.com/questions/61191793
复制相似问题
腾讯云开发者
