如何使 Blazor 的编辑窗体使用数据批注？

Question

在 Blazor WebAssembly 中创建一个新项目后，我只需修改index.razor即可创建如下所示的简单EditForm：

@page "/"
@using System.ComponentModel.DataAnnotations
@using EditFormValidation.Models
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<EditForm EditContext="context" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<InputText @bind-Value="adresse.Adresse1" />
<ValidationMessage For="(() => adresse.Adresse1)" />
<InputText @bind-Value="adresse.Adresse2" />
<ValidationMessage For="(() => adresse.Adresse2)" />
<InputText @bind-Value="adresse.Email" />
<ValidationMessage For="(() => adresse.Email)" />
<button type="submit">Save</button>
</EditForm>
@code{
public class Adresse
{
[Required]
public string Adresse1;
[Required]
public string Adresse2;
[Required]
[EmailAddress]
public string Email;
}
Adresse adresse = new Adresse();
EditContext context;
protected override void OnInitialized()
{
base.OnInitialized();
context = new EditContext(adresse);
}
private void HandleValidSubmit()
{
Console.WriteLine("Submit...");
}
private void HandleInvalidSubmit()
{
Console.WriteLine("Invalid Submit...");
}
}

没有验证摘要，没有消息，当我按"保存"时，HandleValidSubmit是调用的。只有输入文本上的样式才会变为绿色，而文本则在里面。

我的解决方案在这里

Answer 1

首先，删除此代码：

protected override void OnAfterRender(bool firstRender)
{
base.OnAfterRender(firstRender);
context.Validate();
}

执行以下操作：

• 添加方法名称HandleValidSubmit如下所示：

  private void HandleValidSubmit()
  {
  Console.WriteLine("Submit...");
  }
  

每当单击要添加到编辑表单的提交按钮时，都会调用此方法

<button type="submit">Save</button>

您还应该将一个名为 OnValidSubmit 的属性添加到您的 EditForm，并为其分配值"HandleValidSubmit">

当您按下"提交"按钮时，将触发 OnValidSubmit 事件， 并且模型有效，并且执行事件处理程序 HandleValidSubmit 并将文本"提交...">

以下是完整的相关代码片段：

<EditForm EditContext="context" OnValidSubmit="HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<InputText @bind-Value="adresse.Adresse1" />
ValidationMessage For="@(() => adresse.Adresse1)" />
<button type="submit">Save</button>
</EditForm>
@code{
private void HandleValidSubmit()
{
Console.WriteLine("Submit...");
}
}

注意：除非您提供 Adresse2 和 Email 的值，否则永远不会调用 HandleValidSubmit，因为您的模型不会通过验证。您可以通过将两个字段的标签元素添加到编辑表单中来做到这一点

注意：模型类应为每个属性使用 get 和 set 访问器进行定义，并且末尾不应使用分号。

public class Adresse
{
[Required]
public string Adresse1  { get; set; }
[Required]
public string Adresse2  { get; set; }
[Required]
[EmailAddress]
public string Email  { get; set; }
}

希望这有帮助...

Answer 2

模型的成员必须是属性。