Blazor EditForm связать из списка

Question

Я новичок на страницах Blazor. Я пытаюсь создать страницу для редактирования данных клиентов. У объекта customer есть список телефонных номеров (строка), потому что у большинства есть стационарный и мобильный телефон. Я не могу найти способ поместить это в форму редактирования. Я пытался использовать foreach l oop, но это не может с этим связано. Я также попытался использовать локальную копию в l oop и привязать к ней. Это работает, но я не могу получить изменения после нажатия кнопки отправки. Что я делаю неправильно ? Как правильно это сделать? Кажется, я не могу найти учебник, который охватывает это.

Я заново создал свою страницу до минимума, который делает то же самое:

Это мой класс Клиента

public class Customer
    {
        public string Name { get; set; }
        // arbitrary extra fields
        public List<string> phoneNumber { get; set; }
    }
}



 public class CustomerService
    {
        Customer jeff;

        public CustomerService()
        {
            jeff = new Customer
            {
                Name = "Jeff",
                phoneNumber = new List<string> { "123456", "654321" },
            };
        }

        public Customer getCustomer()
        {

            return jeff;
        }

        public void setCustomer(Customer cust)
        {
            jeff = cust;
        }
    }

И моя страница

<EditForm Model="@customer" OnSubmit="@submitChanges">

    <InputText id="name" @bind-Value="@customer.Name" /><br/>
    <!-- How do i link the multiple phonenumbers-->

    @foreach(string phone in customer.phoneNumber)
    {
        //this does not compile
        //<InputText @bind-Value="@phone"/>

        //this compiles but i can't find how to acces the data afterward ???
        string temp = phone;
        <InputText @bind-Value="@temp"/>

    }


    @for(int i=0;i<customer.phoneNumber.Count();i++)
    {
        //this compiles but chrashed at page load
        // <InputText @bind-Value="@customer.phoneNumer[i]"/>
    }




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


</EditForm>



@code {        

    Customer customer;

    protected override void OnInitialized()
    {
        customer = _data.getCustomer();

    }

    private void submitChanges()
    {
        _data.setCustomer(customer);
    }

}

Answer 1

@ Wolf, сегодня я прочитал о ObjectGraphDataAnnotationsValidator , который используется вместо компонента DataAnnotationsValidator

Для проверки всего объекта связанной модели график, включающий свойства коллекции и сложного типа

Акцент на включение collection . Следовательно, я искал образец, реализующий коллекцию в EditForm, но не смог найти. После некоторых усилий мне это удалось. Вот код:

@page "/"
@using Microsoft.AspNetCore.Components.Forms
@using System.ComponentModel.DataAnnotations;

<EditForm Model="@customer" OnSubmit="@submitChanges">
    <DataAnnotationsValidator />
    <p>
        <InputText id="name" @bind-Value="customer.Name" /><br />
    </p>
    @foreach (var phone in customer.phones)
    {
        <p>
            <InputText @bind-Value="phone.PhoneNumber" /> 
        </p>

     }

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

    </EditForm>

 <div>
    <p>Edit  customer</p>

    <p>@customer.Name</p>
    @foreach (var phone in customer.phones)
    {
        <p>@phone.PhoneNumber</p>

    }

</div>
@code {

Customer customer;



protected override void OnInitialized()
{
    customer = new Customer();

}
private void submitChanges()
{
    // _data.setCustomer(customer);
}

public class Customer
{
    public string Name { get; set; } = "jeff";
    //[ValidateComplexType]
    public List<Phone> phones { get; } = new List<Phone>() { new Phone 
     {PhoneNumber = "123456" }, new Phone {PhoneNumber = "654321" }};
}

public class Phone
{
    public string PhoneNumber { get; set; }
}

}

Надеюсь, это поможет ...