BeginCollectionItem удаляет столбцы при добавлении строк в таблицу Dynami c

Question

Я пытаюсь создать динамическую таблицу c, в которой строки можно редактировать, добавлять и удалять. Мне нужно отправить данные обратно в базу данных, и я слышал, что вспомогательный BeginCollectionItem может помочь с привязкой модели. Я использую список, который хранится в модели для создания таблицы:

            <tbody id="tableBody">
                @foreach (var item in Model.ProductProps)
                {
                    Html.RenderPartial("TableRow", item);
                }
            </tbody>

Частичное представление здесь:

@model GCPWebApp.Models.GCPObject
@{
    var name = (string)Model.Properties["ProductTypeName"];
    var id = Model.Properties["ProductTypeId"];
    var point = (GCPWebApp.Models.GCPObject)Model.Properties["PointProperties"];
}

@using (Html.BeginCollectionItem("ProductProps"))
{
    <tr>
        <td class="ProductTypeName">
            <span>@name</span>
        </td>
        <td id="ProductTypeId">
            <span>@id</span>
        </td>
        <td id="AutomationObjectType">
            <span>@Html.DisplayFor(modelItem => point.Properties["AutomationObjectType"])</span>
            <div class="ui input">
                @Html.TextBoxFor(modelItem => point.Properties["AutomationObjectType"], new { @class = "control-form", @style = "display: none" })
            </div>
        </td>
        <td class="GCPDefaultValue">
            <span>@Html.DisplayFor(modelItem => point.Properties["GCPDefaultValue"])</span>
            @Html.TextBoxFor(modelItem => point.Properties["GCPDefaultValue"], new { @class = "control-form", @style = "display: none" })
        </td>
        <td class="GCPUnitsofMeasure">
            <span>@Html.DisplayFor(modelItem => point.Properties["GCPUnitsofMeasure"])</span>
            @Html.TextBoxFor(modelItem => point.Properties["GCPUnitsofMeasure"], new { @class = "control-form", @style = "display: none" })
        </td>
        <td class="GCPUsableRange">
            <span>@Html.DisplayFor(modelItem => point.Properties["GCPUsableRange"])</span>
            @Html.TextBoxFor(modelItem => point.Properties["GCPUsableRange"], new { @class = "control-form", @style = "display: none" })
        </td>
        <td>
            <a class="Edit" href="javascript:;">Edit</a>
            <a class="Update" href="javascript:;" style="display:none">Update</a>
            <a class="Cancel" href="javascript:;" style="display:none">Cancel</a>
            <a class="Delete" href="javascript:;">Delete</a>
        </td>
    </tr>
}

Вот jquery для добавления строки в таблицу:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
//Add event handler.
        $("body").on("click", "#AddProduct", function () {
            var id = $("#ProductDrop").val();
            var lookups = JSON.stringify(@Html.Raw(Json.Encode(Model.Point.Properties["Lookups"])));
            var data = JSON.stringify({ productId: id, lookupData: lookups });
            $.ajax({
                contentType: 'application/jsonrequest; charset=utf-8',
                dataType: 'html',
                type: 'POST',
                cache: false,
                url: '/Edit/AddRow',
                data: data,
                success: function (data) {
                    $(".menu").find(".item.active.selected").addClass("disabled").removeClass("active selected")
                    $("#ProductDrop option[value = \""+id+"\"]").prop("disabled", true)

                    var val = $("#ProductDrop option:not([disabled]):first").val()
                    $("#ProductDrop").dropdown('set selected', val)
                    $("#tableBody").append(data);
                },
                failure: function () {
                    alert("failure");
                }
            });
        });

И контроллер для добавления:

        //Creates new partial view when someone adds row
    public PartialViewResult AddRow(string productId, string lookupData)
    {
        var obj = JObject.Parse(lookupData);
        var table = obj.ToObject<LookupTable>();
        var props = EditPointMethods.AddEmptyProperties(productId, table);
        return PartialView("TableRow", props);
    }

Однако, когда я добавляю строку в таблицу, она выглядит так: Table после добавления

Строка добавляется правильно, когда я не использую BeginCollectionItem. Однако модель связана неправильно, и я не могу получить доступ к данным, когда они отправляются обратно в контроллер.

Что-то не так с моим частичным представлением, или я могу как-то связать модель без использования BeginCollectionItem. Все остальные темы, которые я нашел, не помогли.