jquery - 如何将带有列表的模型从视图传递到控制器

Question

我有个问题。我有模型：

    public class BookViewModel
{
    public IEnumerable<Book> Books { get; set; }
    public Book Book { get; set; }
    public int Id { get; set; }
}

我有实体书类：

        public int Id { get; set; }
    public string Title { get; set; }
    public virtual ICollection<BookAuthor> Authors { get; set; }
    public string PublishingHouse { get; set; }
    public int NumberOfPages { get; set; }
    public int ISBN { get; set; }
    public Book()
    {
        Authors = new Collection<BookAuthor>();
    }

我想将作者列表传递给我的控制器，但我不知道 - 如何？下面是我的看法。我想给用户添加新记录作为下拉列表的可能性，并收集我的作者（来自数据库）。现在我正在尝试添加新的输入记录......但我不知道它会好起来。我不确定，但认为我的模型视图很糟糕。

@model Application.ViewModels.BookViewModel
<form>
    <div asp-validation-summary="All" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="Book.Title">Tytuł książki</label>
        <input class="form-control" asp-for="Book.Title">
        <label asp-for="Book.PublishingHouse">Wydawnictwo</label>
        <input class="form-control" asp-for="Book.PublishingHouse">
        <label asp-for="Book.ISBN">Numer ISBN</label>
        <input class="form-control" asp-for="Book.ISBN">
        <label asp-for="Book.NumberOfPages">Liczba stron</label>
        <input class="form-control" asp-for="Book.NumberOfPages">
    </div>
    <div id="container">
        <button class="btn btn-primary" type="button" id="addAuthor">Dodaj autora</button>
    </div>
    <button type="submit" class="btn btn-primary">Dodaj książkę</button>
</form>

<script>

    $(document).ready(function (e) {
        var i = 0;
        $("#addAuthor").click(function (e) {
            i++;
            var name = '<div class="form-group row"><input name = "Book.Author['+i+'].FirstName" id='+i+' type="text"/><button type="button" class="btn btn-danger" id="removeSubcategory">Usuń</button></div>';
            $("#addAuthor").before(name);
        });
        $("#container").on('click', '#removeAuthor', function (e) {
            $(this).parent('div').remove();
        });
    });
</script>

Answer 1

由于您没有提供所有类结构，因此我参考了您之前的案例并使用这些类进行测试。

请注意，要将列表模型传递给动作，其名称索引必须从 开始0并依次增加。

  public class BookViewModel
    {
        public IEnumerable<Book> Books { get; set; }
        public Book Book { get; set; }
        public int Id { get; set; }
    }
    public class Book
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public virtual ICollection<BookAuthor> Authors { get; set; }
        public string PublishingHouse { get; set; }
        public int NumberOfPages { get; set; }
        public int ISBN { get; set; }
        public Book()
        {
            Authors = new Collection<BookAuthor>();
        }
    }
    public class Author
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string SecondName { get; set; }
        public string Nationality { get; set; }
        public virtual ICollection<BookAuthor> BookAuthors { get; set; }
    }

    public class BookAuthor
    {
        public int BookId { get; set; }
        public Book Book { get; set; }
        public int AuthorId { get; set; }
        public Author Author { get; set; }
    }

看法：

@model Application.ViewModels.BookViewModel

<form asp-action="Add" method="post">
    <div asp-validation-summary="All" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="Book.Title">Tytuł książki</label>
        <input class="form-control" asp-for="Book.Title">
        <label asp-for="Book.PublishingHouse">Wydawnictwo</label>
        <input class="form-control" asp-for="Book.PublishingHouse">
        <label asp-for="Book.ISBN">Numer ISBN</label>
        <input class="form-control" asp-for="Book.ISBN">
        <label asp-for="Book.NumberOfPages">Liczba stron</label>
        <input class="form-control" asp-for="Book.NumberOfPages">
    </div>
    <div id="container">
        <button class="btn btn-primary" type="button" id="addAuthor">Dodaj autora</button>
    </div>
    <button type="submit" class="btn btn-primary">Dodaj książkę</button>
</form>

@section Scripts{

    <script>
        var i = 0
        $(document).ready(function (e) {
            $("#addAuthor").click(function (e) {
                var name = '<div class="form-group row"><input name = "Book.Authors[' + i + '].Author.FirstName" removeTag="reindex" id=' + i + ' type="text"/><button type="button" class="btn btn-danger" id="removeSubcategory" onclick="RemoveAuthor(this)">Usuń</button></div>';
                $("#addAuthor").before(name);
                i++;
            }); 
        });
        function RemoveAuthor(da) {
            $(da).parent('div').remove();
            i = 0;
            $("input[removeTag='reindex']").each(function () {
                $(this).attr("name", "Book.Authors[" + i + "].Author.FirstName");
                $(this).attr("id", i);
                i++;
            })
        }
    </script>
}

控制器：

  public IActionResult Add(BookViewModel bookViewModel)
        {

            return View();
        }

这是测试结果：