c# - 将项目动态添加到表 asp MVC

问题描述

在一个页面中，我显示了一个书籍列表，并且有一个“添加新书”按钮，如果用户单击，我希望将一个项目添加到列表中，它可以工作。

但是如果用户点击“提交”按钮，在控制器中 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 部分视图：

@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>在控制器中我可以看到 3 本书。如何解决这个问题？Books[2].AuthorBooks[2].Title

标签： c#asp.netasp.net-mvchtml-table

名称必须是 Books[1].Author,Books[2].Author,Books[3].Author 才能被解释为数组的三个元素。一个可能的解决方法可能是

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 做这些将是一个更好的选择

c# - 将项目动态添加到表 asp MVC

问题描述

解决方案

推荐阅读