动态删除字段时字段验证呈现的 Blazor 问题答案

【问题标题】：Blazor issue with field validation rendering when dynamically removing fields动态删除字段时字段验证呈现的 Blazor 问题
【发布时间】：2021-02-11 01:35:42
【问题描述】：

我们有一个请求表单，可以根据输入添加或删除利益相关者字段。

如果用户单击“添加利益相关者”按钮，它将向利益相关者集合添加一个新的利益相关者对象，然后在表单上填充新的利益相关者字段行。 StakeHolderFirstName、StakeholderLastName 和 StakeholderEmail。

我们还提供了从表单中删除之前添加的利益相关者的功能。表单上的每一行利益相关者字段都包含一个按钮，用于从利益相关者集合中删除该利益相关者。

使用 .Net Core Framework 中包含的标准 DataAnnotations 命名空间将所有 Stakeholder 字段标记为必需。

Stakeholder.cs

    using System.ComponentModel.DataAnnotations;
    
    ...

    [Required(ErrorMessage = "First Name is required.")]
    public string FirstName { get; set; }
    
    [Required(ErrorMessage = "Last Name is required.")]
    public string LastName { get; set; }
    
    [Required(ErrorMessage = "Email Address is required.")]
    public string Email { get; set; }

在大多数情况下，所有这些都按预期工作。虽然我很困惑，但我们遇到了一个极端情况。

第 1 步：与三个利益相关者一起提交表格并提供有效数据

结果：表单已验证，未显示验证消息，涉众字段以绿色突出显示

第 2 步：清除利益相关者 2 的数据

结果：表格反映利益相关者 2 缺少数据并且字段是必需的，字段现在以红色突出显示

第 3 步：删除利益相关者 1 的行。

结果：原来的 Stakeholder1 被删除。利益相关者 2 成为利益相关者 1。利益相关者 3 成为利益相关者 2。

如预期的那样，用于显示在 StakeHolder2 上的验证消息现在出现在 Stakeholder1 上。

但是，突出显示字段 RED（表单控件修改无效）的 css 类仍保留在 Stakeholder2 上。

起初我认为这可能与移除涉众时元素 ID 未正确更新有关，但我验证更新后 ID 确实正确。这很奇怪，因为它为验证消息选择了正确的字段。它只是没有更新 css 类以将正确的字段突出显示为有效/无效。

这是一个非常基本的表单，我没有做任何高级操作或使用任何第三方控件。有任何想法吗？这是框架的问题吗？

【问题讨论】：

标签： blazor .net-core-3.1

【解决方案1】：

试试这个：在迭代利益相关者列表的代码中，在每个利益相关者处，无论它是什么，比如说一个组件添加带有利益相关者本身值的 @key 指令属性。

下面是描述上述词语的代码示例：

此代码应在请求表单中，您可以在其中创建列表 StakeHolder 组件...

    @foreach( var holder in stakeHolders)
    {
        <StakeHolder @key="holder" Data="holder"></StakeHolder>

        
    }

   @code
   {
       private List<Stakeholder> stakeHolders;
     
   }

阅读@key指令属性here

【讨论】：