Динамически добавить элемент в таблицу asp MVC

Question

На странице я показываю список книг, и есть кнопка «Добавить новую книгу», я хочу, чтобы элемент добавлялся в список, если пользователь нажал, он работает.

, но если пользователь нажимает на «Кнопка «Отправить», в контроллере только что опубликованные 2 книги, которые я создал в коде

Просмотр:

@model WebApplication2.Models.Book2

@{
    ViewBag.Title = "Index";
}


@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10 text-right">
            <input type="button" onclick="@Url.Action("PlaceOrder")" value="Add Product" class="btn btn-primary" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-12">
            <table class="table table-condensed table-hover">
                <tbody id="books">
                    <tr>
                        <th>
                            Product Code
                        </th>
                        <th>
                            Product Name
                        </th>
                    </tr>
                    @{
                        int i = 0;
                        foreach (var item in Model.Books.ToList())
                        {

                    <tr>
                        <td>
                            @Html.EditorFor(o => o.Books[i].Author, new { @id = "Author_" + i })
                        </td>
                        <td>
                            @Html.EditorFor(o => o.Books[i].Title, new { @id = "Title_" + i })
                        </td>

                        <td>
                            @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                            @Html.ActionLink("Details", "Details", new { id = item.ID }) |
                            @Html.ActionLink("Delete", "Delete", new { id = item.ID })
                        </td>
                    </tr>
                            i++;
                        }
                    }
                </tbody>
            </table>
        </div>
    </div>
    <hr />
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10 text-center">
            <input type="button" id="addbook2" name="addbook" value="Add New Book" />
            <input type="submit" value="Submit" class="btn btn-primary" />
        </div>
    </div>
</div>

@section Scripts {
    <script type="text/javascript">

        $("#addbook2").on('click', function () {

            $.ajax({
                async: false,
                url: '/Book/CreateNewBook',
                success: function (partialView) {
                    console.log("success");
                    $('#books').append(partialView);
                }
            })
        });

    </script>
}
} 

код контроллера:

public class BookController : Controller
{
    public ActionResult Index()
    {
        Book[] books = new Book[]
        {
            new Book()
            {
                ID = 1, Title = "title01", Author = "author01",
            },
            new Book()
            {
                ID = 2, Title = "title02", Author = "author02",
            },
        };
        return View(new BooksContainer()
        {
            Books = books.ToList(),
        });
    }

    [HttpPost]
    public ActionResult Index(BooksContainer books)
    {
        // books.Books.Count is 2! why?
        return View();
    }

    public ActionResult CreateNewBook()
    {
        var book = new Book()
        {
            ID = new Random().Next(3, 999_999),
        };

        return PartialView("~/Views/Shared/createBook.cshtml", book);
    }
}

CreateBook PartialView:

@model WebApplication2.Models.Book


<tr>
    <td>
        @Html.EditorFor(o => o.Author, new { @id = "Author_" + Model.ID })
    </td>
    <td>
        @Html.EditorFor(o => o.Title, new { @id = "Title_" + Model.ID })
    </td>
    <td>
        @Html.ActionLink("Edit", "Edit", new { id = Model.ID }) |
        @Html.ActionLink("Details", "Details", new { id = Model.ID }) |
        @Html.ActionLink("Delete", "Delete", new { id = Model.ID })
    </td>
</tr>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

проверенных элементов:

почему количество книг в постконтроллере равно 2 иЯ не вижу добавленные книги.

, если я вручную задаю имя третьих <tr> входов на Books[2].Author и Books[2].Title после отправки, в контроллере я вижу 3 книги.как решить эту проблему?

Answer 1

Имена должны быть Книги [1]. Автор, Книги [2]. Автор, Книги [3]. Автор должен интерпретироваться как три элемента массива.Возможный обходной путь может быть

public ActionResult CreateNewBook(BooksContainer books)
{
    var book = new Book()
    {
        ID = new Random().Next(3, 999_999),
    };
    books.Book.Add(book);


    return View(books);
}

Другим способом может быть каким-то образом сохранить массив в сеансе, взять последнюю книгу и добавить к частичному представлению, например

 @Html.EditorFor(o => o.Books[indexofthelastbook].Author, new { @id "Author_" + Model.ID })

Но сделать это сjavascript будет гораздо лучшим вариантом