What is the best way to send post to register together with the child elements?

Question

I am creating an Asp.net application with customer registration. I am creating the Create page, which has the client’s own registration fields. However, the customer can have multiple phones. Soon, my Viewmodel has the following structure:

public class ClienteViewModel
{
    public ClienteViewModel()
    {
        Id = Guid.NewGuid();
    }

    [Key]
    public Guid Id { get; set; }

    [Required(ErrorMessage = "O nome é requerido")]
    [Display(Name = "Nome")]
    [StringLength(80, MinimumLength = 5, ErrorMessage = "{0} deve ter no mínimo 5 e no máximo 80 caracteres.")]
    public string Nome { get; set; }


    [Required(ErrorMessage = "A Data de Nascimento é requerida")]
    [Display(Name = "Data de Nascimento")]
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}")]
    public DateTime DataNascimento { get; set; }
}

However, how can I send this phone list in Controller in a structure like this? I could use Ajax with partialView, but then I would have to have the ID (the client registered first). I would like to know the best way to do something similar to the screen below:

   [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Create(ClienteViewModel clienteViewModel)

Answer 1

Simply put in your class ClienteViewModel a field that will receive the collection of phones cited in your question public string[] Telefones { get; set; }:

public class ClienteViewModel
{
    public ClienteViewModel()
    {
        Id = Guid.NewGuid();
    }

    [Key]
    public Guid Id { get; set; }

    [Required(ErrorMessage = "O nome é requerido")]
    [Display(Name = "Nome")]
    [StringLength(80, MinimumLength = 5")]
    public string Nome { get; set; }


    [Required(ErrorMessage = "A Data de Nascimento é requerida")]
    [Display(Name = "Data de Nascimento")]
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}")]
    public DateTime DataNascimento { get; set; }

    public string[] Telefones { get; set; }
}

soon after this change of your model I noticed that it was created dynamically these text boxes in your View and for phone information to be brought in you need to follow a nomenclature of nome do campo and chave de índice that each element created, example:

<div class="form-group" id="">
  <label asp-for="Telefones" class="control-label"></label>
  <input asp-for="Telefones[0]" class="form-control" />
  <span asp-validation-for="Telefones" class="text-danger"></span>
</div>

<div class="form-group" id="">
  <label asp-for="Telefones" class="control-label"></label>
  <input asp-for="Telefones[1]" class="form-control" />
  <span asp-validation-for="Telefones" class="text-danger"></span>
</div>

that is, in the example has the fields Telefones[0] and Telefones[1] that means the field name and its index starting from 0 up to the total number of phones you so want to send to your class object ClienteViewModel.

Then, reaffirming when creating the fields dynamically need to follow the name of the field and in square brackets your index number starting from the number 0.