MVC BeginCollectionItem Nested List Indexes not working

Question

I've got a BeginCollectionItem repeater that is working perfectly, however when I try and follow the Joe Stevens blog to add nested lists it doesn't work in the way I expected.

I've used the BeginCollectionItemCore as I'm using AspNetCore, I've taken the code from here as it says it has the built in elements from the blog already in there: https://github.com/saad749/BeginCollectionItemCore

I have a main BeginCollectionItem called Section and a nested collection called SingleLine. I expected the code to output something like: Section[long-code-here].SingleLine[another-code-here].SingleLineTextBlock however what I get is SingleLine[long-code-here].SingleLineTextBlock

I've included my code below;

Model:

namespace project.Models.SetupViewModels
{
    public class SOPTopTemplateBuilderViewModel
    {
        public List<SectionViewModel> Section { get; set; }
    }
    public class SectionViewModel {
        public int SectionId { get; set; }
        public string SectionText { get; set; }
        public string TopTempId { get; set; }
        public List<SingleLineViewModel> SingleLines { get; set; }
    }
}

Partial view:

@model project.Models.SetupViewModels.SectionViewModel
@using HtmlHelpers.BeginCollectionItemCore
<div class="new-section form-row">
    @using (Html.BeginCollectionItem("Section"))
    {
    <div class="top-line">
        <div class="col-12 col-md-11">
             @Html.HiddenFor(m => m.SectionId, new { @class="id" })
             @Html.EditorFor(m => m.SectionText, new { @class = "form-control limit-form"})
         </div>
        <div class="col-12 col-md-1">
        </div>
    </div>
    }
    <div class="main-row">
        <div class="buttons-div">
            <button id="add-single-line" type="button" data-containerPrefix="@ViewData["ContainerPrefix"]">Add Single Text</button>
        </div>
    </div>
    <div class="main-row">

    </div>
</div>

Ajax to add new line:

var form = $('form');
var recipients = $('.main-row');
$("#add-single-line").click(function(){
     $.ajax({
        type: "POST", 
        url: '@Url.Action("GetNewSingleLine")',
        data: { "containerPrefix": recipients.data("containerPrefix") },
        success: function (data) {
            recipients.append(data);  
        }
     });  
});

EditorFor:

@model project.Models.SetupViewModels.SingleLineViewModel
@using HtmlHelpers.BeginCollectionItemCore
@using (Html.BeginCollectionItem("SingleLine"))
{
    <div class="single-line-row">
        @Html.HiddenFor(m => m.SingleLinkTextID, new { @class="id" })
        @Html.TextBoxFor(m => m.SingleLinkTextBlock, new { @class = "form-control limit-form"})
   </div>
}

EditFor Controller:

public ActionResult GetNewSingleLine(string containerPrefix)
{
   ViewData["ContainerPrefix"] = containerPrefix;
   return PartialView("SingleLineViewModel", new SingleLineViewModel());
}

score 1 · Answer 1 · answered Sep 29 '18 at 02:48

I struggled with this exact issue for a while until I happened upon this post - which ended up leading me to an answer (thank you!). In the example above, it is storing the prefix in the button.add-single-line but attempting to load it from the div.main-row so you probably are getting 'undefined' as the prefix. By pulling from the same item which cached the value, the code above will do what is intended.

MVC BeginCollectionItem Nested List Indexes not working

1 Answers1