HTM BeginCollectionItem 仅返回集合的第一项

Question

I have the following problem:

A collection of "Gifts" gets passed as a parameter to a view. Each item inside this collection is a object from the Model class "Gift". There are only two properties inside this class: name and price. I put the class inside the controller for the sake of simplicity.

This is the action method:

// GET: Order/CreateGift
    [HttpGet]
    public ActionResult CreateGift()
    {
        var initialData = new[]
        {
            new Gift{ Name = "Tricycle", Price = 69.95 },
            new Gift{ Name = "PS4 game", Price = 29.99 },
            new Gift{ Name = "Lazergun", Price = 49.99}
        };

        return View(initialData);
    }

On the view I can dynamically add new items to the collection, thanks to the BeginCollectionItem Html helper.

This is my View:

 @model IEnumerable<DemoWebShop.Controllers.Gift> <script src="~/Scripts/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#addItem").click(function () { $.ajax({ url: this.href, cache: false, success: function (html) { $("#editorRows").append(html); } }); return false; }); }); // end document.ready function </script> <h2>Gift List</h2> What do you want for your birthday? @using (Html.BeginForm()) { <div class="form-horizontal"> <div id="editorRows"> @foreach (var item in Model) { Html.RenderPartial("GiftEditorRow", item); } </div> @Html.ActionLink("Add another...", "BlankEditorRow", null, new { id = "addItem" }) <input type="submit" value="Finished" /> @*<div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Aanmaken" class="btn btn-default" /> </div> </div>*@ </div> }

This is the partial view called "GiftEditorRow" :

 @using HtmlHelpers.BeginCollectionItem @model DemoWebShop.Controllers.Gift @{ Layout = null; } @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="editorRow"> @using (Html.BeginCollectionItem("gifts")) { <label>Name: </label> @Html.TextBoxFor(x => x.Name); <label>Price: </label> @Html.TextBoxFor(x => x.Price, new { size = 4 }); <br /> } </div> }

Inside my controller I also have this actionmethod:

    public ViewResult BlankEditorRow()
    {
        return View("GiftEditorRow", new Gift());
    }

Only the First item that already existed inside the collection, gets passed to the HTTP Post method in my controller.

Answer 1

I found my mistake. The partial view "GiftEditorRow" still contains the following:

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

If you remove this, it should work.

This is my partial view now:

@using (Html.BeginCollectionItem("gifts"))
{
    <label>Name: </label>
    @Html.TextBoxFor(Model => Model.Name);
    <label>Price: </label>
    @Html.TextBoxFor(Model => Model.Price, new { size = 4 });
    <br />
}

Now I get all items instead of just the first one.