Several Books for Author

Question

Recently I asked a question about my problem, but it got a little hard to understand, here I will try to summarize my problem.

I’m using ASP.NET MVC.

I have 2 tables: Autores and Livros, where 1 Autor has many Livros.

When you create the Autor and want to add one more Livro, I have a button that creates my fields via jQuery, only when I’m saving mine Controller takes only the first name, the other names I added by jQuery are not correctly added.

So let’s go to the screen to register author (example):

     <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>

There’s my jQuery call button:

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

mine 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 AUTHOR

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

    public string Nome { get; set; }

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

}

MODEL BOOK

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; }

}

Answer 1

This way what you are doing will not work at all. You are just manipulating html, but the server does not understand that you are passing a list of books to the controller.

For this, the most recommended is to use the package Begincollectionitem.

To use, install Nuget memso with this command:

Install-Package Begincollectionitem

Done this, let’s the modifications in your design.

You haven’t posted your Models, so I’ll assume you already have the list of Authors for each book.

In his controller we need to create a Action to return a new author. To do this, add this Action in your controller Authors.

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

        return PartialView("_Autor", autor );
    }

In this Action we are creating a new author and returning a PartialView with the same. Your PartialView will be the same thing as the code you used on append, in your question. It will look like this:

@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>
}

The name Authors of this part @using (Html.BeginCollectionItem("Livros")) must be the same name as the virtual public virtual ICollection<Livros> Livros{get;set;} in his Model Authors.

In his view, we will change the form of "duplicate" the field, using a request ajax to the controller.

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

</script>

In this request we are adding another author to your code (performing the request on controller).

Note that in this part $('#new-autor').append(data); we’re doing the append() of PartialView() to the div with the id="new-autor". So just create a div empty with that id wherever inputs are added, this way:

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

In doing so, by having saved, you will have a list of authors in your Model.