MVC BeginCollectionItem Nested List Indexes not working - asp.net-mvc

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());
}

Answer 1

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.