Blazor EditForm 从列表绑定

Question

Blazor EditForm 从列表绑定

5

我正在尝试创建一个编辑客户数据的页面。

客户对象拥有电话号码列表（字符串），因为大多数人都有固定电话和手机。我无法找到一种将其放入编辑表单中的方法。我尝试使用foreach循环，但它无法绑定到此数据。我也尝试在循环中使用本地副本并绑定到该副本。这可以工作，但是我无法在提交按钮被按下后检索更改。我做错了什么？正确的做法应该是什么？我似乎找不到任何涵盖此内容的教程。

我已经将我的页面重新创建为最小的版本，以实现相同的功能：

这是我的Customer类：

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);
    }
}

- Wolf

2个回答

0

use     
word-break: break-all;
word-wrap: break-word;
white-space: initial;

- Deepak

1

请记住，Stack Overflow 不仅旨在解决当前的问题，还要帮助未来的读者找到类似问题的解决方案，这需要理解底层代码。对于我们社区中的初学者而言，这尤其重要，因为他们可能不熟悉语法。鉴于此，您能否编辑您的答案，包括您正在做什么以及为什么您认为这是最佳方法的解释？ - Jeremy Caney

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- enet · Accepted Answer

@Wolf，今天我看到了关于ObjectGraphDataAnnotationsValidator的介绍，它被用来代替DataAnnotationsValidator组件。

可以验证绑定模型的整个对象图，包括集合和复杂类型属性

重点在于包括集合。因此，我搜索了一个实现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; }
}

}

希望这可以帮到您...