Блог

У нас есть форма запроса, которая может добавлять или удалять поля заинтересованных сторон на основе ввода.

Если пользователь нажмет кнопку «Добавить заинтересованную сторону», он добавит новый объект заинтересованной стороны в коллекцию заинтересованных сторон, а затем заполнит новую строку полей заинтересованных сторон в форме. StakeHolderFirstName, StakeholderLastName и StakeholderEmail.

Мы также предоставляем возможность удалить ранее добавленную заинтересованную сторону из формы. Каждая строка полей заинтересованных сторон в форме содержит кнопку, которая удаляет эту заинтересованную сторону из коллекции заинтересованных сторон.

Все поля заинтересованных сторон помечены как обязательные, используя стандартное пространство имен DataAnnotations, включенное в .Net Core Framework.

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.

Результат: исходный Стейкхолдер1 удален. Заинтересованная сторона 2 становится заинтересованной стороной 1. Заинтересованная сторона 3 становится заинтересованной стороной 2.

Сообщение о проверке, которое раньше появлялось на стейкхолдере2, теперь находится на Стейкхолдере1, как и ожидалось.

Однако класс css, который выделяет поле КРАСНЫМ цветом (неверно измененный элемент управления формой), остался в Stakeholder2.

Сначала я подумал, что это может быть как-то связано с тем, что идентификаторы элементов не обновляются должным образом при удалении заинтересованной стороны, но я проверил, что идентификаторы действительно верны после обновлений. Это странно, потому что он выбирает правильное поле для сообщения проверки. Он просто не обновляет класс css для выделения правильных полей как допустимых / недопустимых.

Это довольно простая форма, я не делаю ничего продвинутого или не использую какие-либо сторонние элементы управления. Есть идеи? Это проблема с фреймворком?

Попробуйте это: в коде, который повторяет список заинтересованных сторон, для каждой заинтересованной стороны, какой бы она ни была, скажем, компонент добавляет атрибут директивы @key со значением самого заинтересованного лица.

Вот пример кода для описания приведенных выше слов:

Этот код должен быть в форме запроса, где вы создаете список компонентов заинтересованных сторон…

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

        
    }

   @code
   {
       private List<Stakeholder> stakeHolders;
     
   }
  

Прочитайте об атрибуте @key директивы здесь