Fala galera!

Hoje vamos ver uma forma bem simples de enviar models com sub-listas utilizando Razor.

Vamos imaginar que temos um modelo parecido com esse:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
  itens: [
    {
      Nome: 'Leonardo'
    },
    {
      Nome: 'José'
    }
  ]
}

Para que o nosso Controller consiga receber os dados da lista itens, é necessário que seja enviado dessa forma via http:

1
itens[x].nome = Leonardo

Onde x é um identificador alfa-númerico.

Para colocar esses itens na página de uma forma que o browser envie corretamente para o nosso serviço, precisamos definir o x:

1
2
3
@for(int i = 0; i < 10; i++) {
  <input type="text" name="Itens[@i].Nome" />
}

Existe uma biblioteca chamada BeginCollectionItem que faz todo esse gerenciamento, gerando os identificadores no formato de um Guid, e para utilizar ele é algo relativamente simples. Basicamente você faz algo assim:

1
2
3
4
@using(Html.BeginCollectionItem("Itens"))
{
  @Html.EditorFor(x => x.Nome)
}

Para ajudar ainda mais, eu fiz um exemplo utilizando um cadastro de produtos com uma lista de comentários, utilizando o BeginCollectionItem e ajax.

Código fonte do exemplo:

https://github.com/leonardohof/PoC-NestedListsModelBinding</a>

Link para a biblioteca:

https://www.nuget.org/packages/BeginCollectionItem/</a>

Até a próxima =)