Reputation: 53
I'm trying to make a page to edit customer data.
The customer object has a list of phonenumbers(string) , because most have a landline and cellphone. I can't seem to find a way to put this into an editform. I tried using a foreach loop, but it can't bind to this. I also tried to use a local copy in the loop and bind to that. That works, but i can't retrieve the changes after the submit button is pressed. What am i doing wrong ? What is the proper way to do this ? I can't seem to find any tutorial that covers this.
I have recreated my page to the minimal that does the same thing:
This is my Customer class
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;
}
}
And my page
<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);
}
}
Upvotes: 5
Views: 8193
Reputation: 1
use
word-break: break-all;
word-wrap: break-word;
white-space: initial;
Upvotes: 0
Reputation: 45764
@Wolf, today I've read about the ObjectGraphDataAnnotationsValidator which is used instead of the DataAnnotationsValidator component
To validate the bound model's entire object graph, including collection- and complex-type properties
Emphasis on including collection. Consequently, I searched for a sample implementing a collection in EditForm, but could not find. After exerting some efforts I succeeded to do that. Here's the code:
@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; }
}
}
Hope this helps...
Upvotes: 6