Inserindo e removendo itens da coleção ASP.NET MVC Parte 1 (Tutorial + Código)

Conforme prometido no post anterior, neste tutorial vou mostrar como criar um Helper para manipular coleções. 

Para começar caso você ainda não tenha feito, leia o post anterior que mostrar como eliminar os índices em coleções no ASP.NET MVC. Vou utilizar como exemplo as classes Pessoa (Person) e Telefones(Phone) onde pessoa pode ter 1 ou mais telefones, deve ser criada uma view separada para edição dos telefones isso é possível utilizando o Editor Templates do ASP.NET MVC.

Para utilizar você deve criar uma pasta chamada EditorTemplates, dentro da pasta você adiciona uma view com o mesmo nome do Model, que neste exemplo é Phone. Crie a view conforme o exemplo abaixo:

A divs que envolvem os campo não são obrigatórias.

Na view de criação, do modelo Person, você deve referenciar o editor dos telefones, conforme exemplo abaixo: 

Vamos agora a criação do Helper. Crie uma classe static com o nome de  HtmlHelpers. Dentro dessa classe crie um método conforme o exemplo abaixo:

Esse será o método responsável por adicionar mais um campo. Esse método é uma extenção da classe HtmlHelper, e recebe como parâmetros o nome que deve aparecer no link, o contêiner onde o novo campo será incluído, o nome da coleção e o tipo da coleção.

Na 1ª linha é criada uma instancia da coleção utilizando o tipo da mesma.

Na 2ª linha cria-se a view que será adicionada. Essa linha faz uma chamada para o método JsEnconde, que serve para fazer ajustes no html gerado, o código desse método é um pouco extenso e como o código será disponibilizando não vou mostrar ele aqui.

Na 3ª linha é feito um replace para adicionar o nome correto da propriedade ao campo.  

Na 4ª linha é criado a chamada da função Javascript que será a responsável por de fato adicionar o novo campo.

Conforme vimos acima o campo será adicionado via Javascript, para isso crie um script e adicione a seguinte função:

Voltando ao helper, adicione as linhas a seguir:

Nas linhas acima é feita a criação do elemento link, recebendo como parâmetros o nome do link e a chamada para a função Javascript. 

Na view faça referência ao helper e ao model.

Logo após faça a chamada do helper. Observe que o parâmetro referente ao contêiner nada mais é que o id de onde será adicionado os novos campos.

Na 2ª parte vou demostrar o procedimento para remover e as validações dos novos campos.

O projeto completo está aqui: https://github.com/rafaelguinho/AddRemove