4

Recentemente, fiz uma pergunta sobre o meu problema, mas ficou meio difícil de entender, aqui vou tentar resumir o meu problema.

Estou usando ASP.NET MVC.

Tenho 2 tabelas: Autores e Livros, onde 1 Autor tem muitos Livros.

Quando for criar o Autor e quiser adicionar mais um Livro, tenho um botão que cria meus campos via jQuery, so que quando eu for salvar, o meu Controller pega apenas o 1º nome, os demais nomes que eu adicionei por jQuery não são adicionados corretamente.

Então vamos a tela para cadastrar autor (exemplo):

     <div class="col-xs-12 col-md-4">
        @Html.LabelFor(model => model.Nome)
        @Html.EditorFor(model => model.Nome)
    </div>
    <div class="col-xs-12 col-md-4">
        @Html.LabelFor(model => model.NomeLivro)
        @Html.EditorFor(model => model.NomeLivro)
    </div>

    //DIV PARA RECEBER OS NOVOS CAMPOS
    <div id="divAddLivro"></div>

Aí tenho meu botão para a chamada jQuery:

    <button id="btnAddLivro">Adicionar Livro</button>

meu jQuery:

            $("#btnAddLivro").click(function () {
            $("#divAddLivro").append(''+
                        '<div class="col-xs-12 col-md-4">'+
                        '    @Html.LabelFor(model => model.Nome)'+
                        '    @Html.EditorFor(model => model.Nome)'+
                        '</div>'+
                        '<div class="col-xs-12 col-md-4">'+
                            '    @Html.LabelFor(model => model.NomeLivro)'+
                            '    @Html.EditorFor(model => model.NomeLivro)'+
                        '</div>' +
                '</div>');
            });

MODEL AUTOR

public class Autor
{
    [Key]
    public int IdAutor { get; set; }

    public string Nome { get; set; }

    public ICollection<Livro> Livros{ get; set; }

}

MODEL LIVRO

public class Livro
{
    [Key]
    public int IdLivro { get; set; }

    public string Nome { get; set; }

    public int IdAutor { get; set; }

    public ICollection<Autor> Autores { get; set; }

}
3
  • O que você está utilizando para a parte web? Asp.net MVC, WebForms, Angular, etc, etc, etc... Poderia postar o código de como está fazendo isso?
    – Randrade
    Commented 4/12/2015 às 12:10
  • 1
    ok @Randrade vou especificar
    – Furlan
    Commented 4/12/2015 às 12:11
  • @Randrade alterei a pergunta, obrigado
    – Furlan
    Commented 4/12/2015 às 12:19

1 Resposta 1

7

Desta forma que você está fazendo não irá funcionar mesmo. Você está manipulando apenas html, mas o servidor não entende que você está passando uma lista de livros para o controller.

Para isso, o mais recomendado é utilizar o pacote BeginCollectionItem.

Para utilizar, instale o memso pelo NuGet com o este comando:

Install-Package BeginCollectionItem

Feito isso, vamos as modificações em seu projeto.

Você não postou os seus Models, então irei supor que você já possui a lista de Autores para cada livro.

Em seu controller precisamos criar uma Action para retornar um novo autor. Para isso, adicione essa Action em seu controller Autores.

 public ActionResult GetNewAutor()
    {
        var autor = new Autor()

        return PartialView("_Autor", autor );
    }

Nesta Action estamos criando um novo autor e retornando uma PartialView com o mesmo. Sua PartialView será a mesma coisa que o código que você utilizou no append, em sua pergunta. Ficará assim:

@model Projeto.Autor//Altere isso

@using (Html.BeginCollectionItem("Livros"))//O nome da sua lista
{
    <div class="col-xs-12 col-md-4">
    @Html.LabelFor(model => model.Nome)
    @Html.EditorFor(model => model.Nome)
    </div>
    <div class="col-xs-12 col-md-4">
      @Html.LabelFor(model => model.NomeLivro)
      @Html.EditorFor(model => model.NomeLivro)
    </div>
}

O nome Autores desta parte @using (Html.BeginCollectionItem("Livros")) deve ser o mesmo nome da virtual public virtual ICollection<Livros> Livros{get;set;} em seu Model Autores.

Em sua view, vamos alterar a forma de "duplicar" o campo, utilizando uma requisição ajax para o controller.

<script>
    $('#btnAddLivro').click(function () {
        $.ajax({
            url: '@Url.Action("GetNewAutor", "Autores")',
            type: 'POST',
            success: function (data) {
                $('#new-autor').append(data);
            }
        });
    });

</script>

Nesta requisição estamos adicionando um outro autor em seu código (realizando a requisição no controller).

Note que nesta parte $('#new-autor').append(data); estamos fazendo o append() da PartialView() para a div com o id="new-autor". Então basta criar uma div vazia com esse id onde quer que os inputs sejam adicionados, desta forma:

<div id="new-autor"></div>

Fazendo isso, ao mandar salvar, você terá uma lista de autores em seu Model.

9
  • Caso não entenda, forneça as informações de seu cotnroller e Models que adéquo a resposta para você.
    – Randrade
    Commented 4/12/2015 às 13:49
  • obrigado pela sua resposta, vou tentar aqui, so um momento
    – Furlan
    Commented 4/12/2015 às 15:26
  • desculpe a demora pelo retorno, tive alguns problemas aqui, a lista de Autores para cada livro, eu coloco ela no model do Livro ou do Autor ?
    – Furlan
    Commented 7/12/2015 às 10:38
  • vc tem skype para nos falarmos melhor?
    – Furlan
    Commented 7/12/2015 às 10:43
  • No seu caso, um autor possui muitos livros, então o Model Autor terá uma lista de ICollection de livros.
    – Randrade
    Commented 7/12/2015 às 10:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .