ASP.NET MVC Kendo Grid how to call controller method from javascript

Question

Because I have a custom modal confirmation popup, I'll need to call the the method .Destroy("Remove", "Attachment") from javascript. How do I call the Remove method from javascript? I've indicated in the code how to call where I'd like to be able to call the method. Also, how to pass through the OrderViewModel ?

Here's my grid:

@(Html.Kendo().Grid<TelerikAspNetCoreApp7.Models.OrderViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.OrderID).Filterable(false);
            columns.Bound(p => p.Freight);
            columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
            columns.Bound(p => p.ShipName);
            columns.Bound(p => p.ShipCity);
            columns.Command(command =>
            {
                command.Custom("Destroy")
                    .Click("showDeleteConfirmation")
                    .HtmlAttributes(new { style = "width:40%" });
            }).Width("15%");
        })
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
        .HtmlAttributes(new { style = "height:550px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Destroy("Remove", "Attachment")
            .Read(read => read.Action("Orders_Read", "Grid"))
            .Destroy(read => read.Action("Orders_Read", "Grid"))
        )
)

The modal:

@(Html.Kendo()
        .Dialog()
        .Name("DeleteConfirmation")
        .Modal(true)
        .Title("Confirm Delete")
        .Content("Are you sure you want to delete this item?")
        .Visible(false)
        .Actions(a =>
        {
            a.Add().Text("No").Action("cancelDelete");
            a.Add().Text("Yes").Action("confirmDelete").Primary(true);
        })
)

The scripts:

<script>
    var modelToDelete;

    function showDeleteConfirmation(e) {
        e.preventDefault();
        var grid = $("#grid").data("kendoGrid");
        var dialog = $('#DeleteConfirmation').data("kendoDialog");

        modelToDelete = grid.dataItem($(e.target).parents('tr'));
        dialog.content("Are you sure you want to delete this item with ID - " + modelToDelete.OrderID + "?");
        dialog.open();
    }

    function confirmDelete(e) {
        //how to call .Destroy("Remove", "Attachment") from here
    }

    function cancelDelete() {
    }
</script>

The controller:

public ActionResult Remove([DataSourceRequest] DataSourceRequest request, OrderViewModel attachmentVm)
{
    Attachment attachment = _db.Attachments.FirstOrDefault(o => o.Guid == attachmentVm.Guid);
    attachment.IsActive = false;
    attachment.LastUpdated = DateTime.Now;
    attachment.LastUpdatedBy = _sessionUser.Username;
    _db.SaveChanges();

    return Json(ModelState.ToDataSourceResult());
}

Answer 1

Here's the answer:

function confirmDeleteAttach(e) {
    $.ajax({
        url: '/Attachment/Remove',
        data: { Guid: modelToDeleteAttach.Guid },
        type: "POST",
        success: function () {
            gridToDeleteAttach.dataSource.remove(modelToDeleteAttach);
            $('#DeleteConfirmationAttach').data("kendoDialog").close();
        }
    });

}