How to submit data generated by Jquery Datatables

Hi everyone,

I've been battling with this for days now and couldn't resolve it yet. I want to submit data loaded to datatables and couldn't use model binding because it's always null. Below is my code.

<form id="fmApprovedGradeStep" method="post" asp-controller="GradeStep" asp-action="GradeStep"><div asp-validation-summary="All" class="text-danger"></div><div class="card text-center"><div class="card-header text-muted"><p><b>Approved GradeStep</b></p></div><div class="card-body"><div class="form-group row"><label class="col-sm-2 col-form-label">Search</label><div class="col-sm-4 input-group"><div class="input-group-prepend"><span class="input-group-text fa fa-search"></span></div><input id="gradeStepApprovedSearch" type="text" class="form-control" placeholder="Search by Paygroup, Grade, Step" /></div></div><div class="form-group"><div class="table-responsive-sm"><table id="gradeStepApprovedTable" class="table table-striped table-bordered table-sm compact"><thead><tr><th scope="col" class="text-center"><div class="form-check"><input id="gradeStepApprovedCheckAll" type="checkbox" class="form-check-input" /><label class="form-check-label"></label></div></th><th scope="col" class="text-center"><label>Paygroup</label></th><th scope="col" class="text-center"><label>Grade</label></th><th scope="col" class="text-center"><label>Step</label></th><th scope="col" class="text-center"><label>Remarks</label></th><th scope="col" class="text-center"><label>Status</label></th><th scope="col"></th></tr></thead></table></div></div></div><div class="card-footer"><div class="btn-group-sm">
                    @if (await Context.IsUserInRoleAsync(User.Identity.Name, Role.GradeStepAdd.ToString()))
                    {<a id="btnGradeStepAdd" asp-controller="GradeStep" asp-action="GradeStepAddEdit" class="btn btn-outline-success"><span class="fa fa-plus"></span>
                            Add</a>
                    }
                    @if (await Context.IsUserInRoleAsync(User.Identity.Name, Role.GradeStepDelete.ToString()))
                    {<button id="btnGradeStepApproveDelete" type="button" class="btn btn-outline-success" data-loading-text="Deleting..." onclick="Delete('#fmApprovedGradeStep', '#btnGradeStepApproveDelete');"><span class="fa fa-trash"></span>
                            Delete</button>
                    }</div></div></div></form>

function Delete(formId, btnId) {
        if ($(formId).valid()) {
            ClearValidationSummary();
            if (confirm("Do you want to delete GradeStep(s)")) {
                var btn = $(btnId);
                var btnContent = $(btnId).html();$.ajax({"method": "post","data": $(formId).serialize(),"url": "@Url.Action("GradeStep", "GradeStep", new { operation = Operation.Delete })","beforeSend": function (jqXHR, settings) {
                        ButtonShowLoadingText(btn);
                    }
                }).done(function (data, textStatus, jqXHR) {
                    SuccessAlert("GradeStep(s) deleted successfully.");$("#divGradeStepUnAuthorized").load('@(Url.Action("GradeStepPartialUnauthorized", "GradeStep"))');$("#divGradeStepUnApproved").load('@(Url.Action("GradeStepPartialUnapproved", "GradeStep"))');$("#divGradeStepApproved").load('@(Url.Action("GradeStepPartialApproved", "GradeStep"))');
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    ErrorAlert(jqXHR.responseText);
                }).always(function (jqXHR, textStatus) {
                    ButtonOffLoadingText(btn, btnContent);
                });
            }
        }
    }

var dataTableGradeStepApproved = $("#gradeStepApprovedTable").DataTable({"ordering": false,"destroy": true,"pagingType": "full_numbers","lengthMenu": jTableFilter,"processing": true,"serverSide": true,"ajax": {"url": "@Url.Action("GradeStepJson", "GradeStep")","type": "post","dataType": "json"
            },"columns": [
                {"data": "checked", "name": "checked", "searchable": false, "render": function (data, type, row) {
                        return '<input type="checkbox" />';
                    } },
                { "data": "paygroup.paygroupName", "name": "paygroup.paygroupName", "searchable": true },
                { "data": "gradeName", "name":"gradeName", "searchable": true },
                { "data": "stepName", "name":"stepName", "searchable": true },
                { "data": "remarks", "name":"remarks", "searchable": false },
                {"data": "status", "name": "status", "searchable": false, "render": function (data, type, row) {
                        switch (data.toUpperCase()) {
                            case "A":
                                return "Approved";
                            default:
                                return "Undefined";
                        }
                    }
                },
                {"data": "id", "name": "id", "render": function (data, type, row) {
                        return '@if (await Context.IsUserInRoleAsync(User.Identity.Name, Role.GradeStepUpdate.ToString())) { <a href="@Url.Action("GradeStepAddEdit", "GradeStep")/'+ data +'" class="btn btn-outline-success btn-sm"><span class="fa fa-edit"></span>Edit</a> }';
                } }
            ]
        });$("#gradeStepApprovedSearch").bind("keyup search input paste cut", function () {
            dataTableGradeStepApproved.search($(this).val()).draw();
        });


public async Task<JsonResult> GradeStepJson()
        {
            List<GradeStep> gradeStepPartialApprovedList = new List<GradeStep>();
            gradeStepPartialApprovedList = await LoadGradeStep(new GradeStep { Status = Status.A.ToString() });

            var draw1 = HttpContext.Request.Form["draw"].FirstOrDefault();
            var start = HttpContext.Request.Form["start"].FirstOrDefault();
            var length = HttpContext.Request.Form["length"].FirstOrDefault();
            var searchValue = HttpContext.Request.Form["search[value]"].FirstOrDefault();

            int pageSize = length != null ? Convert.ToInt32(length) : 0;
            int skip = start != null ? Convert.ToInt32(start) : 0;
            int recordsTotal1 = gradeStepPartialApprovedList.Count();

            if (!string.IsNullOrWhiteSpace(searchValue))
            {
                gradeStepPartialApprovedList = gradeStepPartialApprovedList.Where(gd => gd.Paygroup.PaygroupName.ToLower().Contains(searchValue.ToLower()) || gd.GradeName.ToLower().Contains(searchValue.ToLower()) || gd.StepName.ToLower().Contains(searchValue.ToLower())).ToList();
            }

            int filterTotal = gradeStepPartialApprovedList.Count();
            var data1 = gradeStepPartialApprovedList.Skip(skip).Take(pageSize).ToList();
            return Json(new { draw = draw1, recordsTotal = recordsTotal1, recordsFiltered = filterTotal, data = data1 });
        }

[HttpPost, Route("[Action]"), Authorize(Policy = "GradeStepView")]
        public async Task<IActionResult> GradeStep(List<GradeStep> model, Operation operation)
        {
            try
            {
                if (model.Any(gradeStepChecked => gradeStepChecked.Checked))
                {
                    switch (operation)
                    {
                        case Operation.Delete:
                            await gradeStep.DeleteAsync(model, HttpContext);
                            break;
                        case Operation.Authorize:
                            model[0].Status = Status.B.ToString();
                            await gradeStep.UpdateAsync(model, HttpContext);
                            break;
                        case Operation.Approve:
                            model[0].Status = Status.A.ToString();
                            await gradeStep.UpdateAsync(model, HttpContext);
                            break;
                        case Operation.Reject:
                            model[0].Status = Status.R.ToString();
                            await gradeStep.UpdateAsync(model, HttpContext);
                            break;
                    }
                }
                else
                {
                    return BadRequest("Please, Select GradeStep!");
                }
            }
            catch (Exception ex)
            {
                return BadRequest(ex.InnerException != null ? ex.InnerException.Message : ex.Message);
            }
            return View();
        }

Thanks.