Various Books for Author

Question

Various Books for Author

Navigation

#1 by (7 votes)

4

Recently, I asked a question about my problem, but it was kind of difficult 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 I create Autor and want to add another Livro , I have a button that creates my fields via jQuery , so when I save, my Controller takes only the 1st name, the other names that I added by jQuery are not added correctly.

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

Then I have my button for the jQuery call:

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

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

}

jquery c# asp.net-mvc

asked by anonymous 04.12.2015 / 13:08

1 answer

What error is this? "Could not find method schedule (View) in" How to check if a File can be created in a Folder before trying to create it in it?

score 7 · Accepted Answer

This way you're doing will not even work. You are only manipulating html , but the server does not understand that you are passing a list of books to controller .

For this, the BeginCollectionItem package is best recommended.

To use, install the memso through NuGet with this command:

Install-Package BeginCollectionItem

Once this is done, let's go through the modifications to your project.

You have not posted your Models, so I'll assume you already have the Authors list for each book.

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

 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 it. Your PartialView will be the same as the code you used in 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")) should be the same name as the virtual public virtual ICollection<Livros> Livros{get;set;} in your Model Authors.

In your view , we will change how to "duplicate" the field, using a ajax request for 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 in your code (making the request in controller ).

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

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

By doing this, when you save, you will have a list of authors in your div .