Отправка данных из всплывающей формы Kendo обратно на контроллер с помощью AJAX в .Net Core

Question

Я использую сетку Kendo, которая содержит всплывающую форму, позволяющую пользователю редактировать множество «категорий» для одного продукта.

@using KendoGridOneToMany.Models

@(Html.Kendo().Grid<ProductModel>()
                        .Name("persons")
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Model(model => model.Id(m => m.Id))
                            .Read(read => read.Action("GetProducts", "Home"))
                            .Update(up => up.Action("UpdateCategory", "Home"))
                            .Create(x => x.Action("CreateProduct", "Home"))
                    )
                    .ToolBar(x => x.Create())
                    .Columns(columns =>
                    {
                        columns.Bound(c => c.Id).Width(200);
                        columns.Bound(c => c.Type);
                        columns.Bound(c => c.DisplayCatogories);
                        columns.Command(cmd => cmd.Edit());
                    })
                    .Events(ev => ev.Edit("addDeleteButton"))
                    .Pageable()
                    .Sortable()
            .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("PopUpView"))
)

Я «взломал» всплывающее окно с дополнительной кнопкой «удалить» (она не встроена в Kendo). Который использует AJAX для захвата данных формы и возврата их к отдельному методу «delete» контроллера.

Код всплывающей формы содержится в части, которая выглядит так:

@model ProductModel
<div>
<fieldset id="popUpForm">
    <dl>
        <dt>
            @Html.HiddenFor(m => m.Id)
            @Html.ValidationMessageFor(m => m.CategoryId)

        </dt>
        <dd>
            @(Html.Kendo().DropDownListFor(m => m.CategoryId).AutoBind(false).OptionLabel("Select Category...").DataTextField("Name").DataValueField("Id").DataSource(dataSource =>
                                                  { dataSource.Read(read => read.Action("GetCategories", "Home")).ServerFiltering(true); }))
        </dd>
    </dl>
</fieldset>

Модель "Продукт" выглядит так:

 public ProductModel()
 {
    public int Id { get; set; }

    public string Type { get; set; }

    public int CategoryId { get; set; }

    public ICollection<CategoryModel> Categories { get; set; }
  }

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

 function addDeleteButton(e) {
    $('<a class="k-button k-button-icontext k-grid-delete custom" 
    href="\\#"k-icon k-i-delete"></span>Delete</a>').insertAfter(".k-grid  
     -update");
    $('.k-window-title').text("Edit Categories");
    $(".custom").click(function (e) {
        e.preventDefault();
        var formContainer = $("#popUpForm");
        SubmitInfo(formContainer);
    });
}

Таким образом, когда пользователь выбирает категорию, у него есть возможность добавить или удалить категорию из выбранного «продукта». Однако, когда «add» обрабатывается Kendo, мне нужно обработать удаление с помощью AJAX.

Кнопка удаления связана со следующим JavaScript.

function SubmitInfo(formContainer) {
    var grid = $("#persons").data("kendoGrid"),
        parameterMap = grid.dataSource.transport.parameterMap;
    var data = parameterMap({ sort: grid.dataSource.sort(), filter: grid.dataSource.filter(), group: grid.dataSource.group() });
    $.ajax({
        url: '@Url.Action("Delete", "Home")',
        type: "POST",
        dataType: "JSON",
        data: data + "&" + formContainer.serialize(),
        success: function (result) {
               // Clear the input tags
                formContainer.find("input[type='text']").each(function (i, element) {
                    $(this).val('');
                });
                $('#persons').data('kendoGrid').dataSource.read();
                $('#persons').data('kendoGrid').refresh();
            }
        }
    });
}

И соответствующий метод Controller, подобный этому:

   [HttpPost]
   public Void Delete([DataSourceRequest] DataSourceRequest request, ProductModel product)
    {
        var productModel = siteRepository.GetProductById(product.Id);
        var categoryToRemove = productModel.Categories.SingleOrDefault(r => r.Id == product.CategoryId);
        if (categoryToRemove != null)
        {
            product.Categories.Remove(categoryToRemove);
            siteRepository.UpdateProduct(product);
        }
    }

Это работает до тех пор, пока выполняется отправка требуемого идентификатора из требуемой категории, но я могу сохранить идентификатор продукта, необходимый для того, чтобы узнать, из какого продукта удалить его. Это несмотря на включение соответствующего @ Html.HiddenFor (m => m.Id) во всплывающую форму.

Кто-нибудь знает лучший способ сохранить этот фрагмент данных из моей всплывающей формы на моем контроллере?