如何正确通过 ajax 调用将 DataSourceRequest 对象发送到控制器？答案

【问题标题】：How to send DataSourceRequest object to the controller via ajax call properly?如何正确通过 ajax 调用将 DataSourceRequest 对象发送到控制器？
【发布时间】：2019-08-31 23:56:02
【问题描述】：

我的剃刀视图 mvc 上有一个剑道网格，如下所示：

@(Html.Kendo().Grid(Model.employeeList)
    .Name("grid")
    .Pageable(pager => pager
        .Messages(messages => messages.Empty("No data"))
    )
    .Pageable(pager => pager
        .PageSizes(new[] { 15, 20, 25, 50 })
    )
    .Filterable()
    .Groupable()
    .Sortable()
    .Columns(columns =>
    {
        columns.Bound(employee => employee.employeeId);
        columns.Bound(employee => employee.firstName);
        columns.Bound(employee => employee.lastName);
        columns.Bound(employee => employee.jobTitle);
        columns.Bound(employee => employee.employeeId).ClientTemplate(
            "<a href='" + Url.Action("Edit", "Employee", new { id = "#=employeeId#" }) + "'>Edit</a> | " +
            "<a href='" + Url.Action("Details", "Employee", new { id = "#=employeeId#" }) + "'>Details</a> | " +
            "<a href='" + Url.Action("Delete", "Employee", new { id = "#=employeeId#" }) + "'>Delete</a>"
        )
        .Filterable(false)
        .Groupable(false)
        .Sortable(false)
        .Title("");
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetEmployeesList", "Employee").Data("branchData")).PageSize(15)
    )
)

连同用于 GetEmployeesList ActionResult 的控制器：

    [HttpPost]
    public ActionResult GetEmployeesList([DataSourceRequest]DataSourceRequest request, int branchId, bool includeNonActive)
    {
        IQueryable<Employee> employees;
        if (includeNonActive)
        {
            employees = db.Employee.Where(e => e.branchId == branchId && e.isDeleted == false)
                              .Include(e => e.HireType).Include(e => e.HireStatus);            
        }
        else
        {
            employees = db.Employee.Where(e => e.branchId == branchId && e.HireStatus.hireStatusId == 1 && e.isDeleted == false)
                              .Include(e => e.HireType).Include(e => e.HireStatus);
        }

        DataSourceResult result = employees.ToDataSourceResult(request, employee => new EmployeeViewModel
        {
            employeeId = employee.employeeId,
            firstName = employee.firstName,
            lastName = employee.lastName,
            jobTitle = employee.jobTitle,
            HireStatus = new HireStatus() { hireStatus = employee.HireStatus.hireStatus },
            HireType = new HireType() { hireType = employee.HireType.hireType }
        });

        return Json(result);
    }

到目前为止，一切都很顺利。 DataSourceRequest 请求已成功从网格传递。但后来我又通过 jQuery 发布了 AJAX 调用：

$(document).ready(function () {
    $('#ddlBranchList').change(function () {
        var isNonActive = $('#isNonActive')[0].checked;
        var ddlValue = $('#ddlBranchList').val();
        $.ajax({
            type: "POST",
            url: "/Employee/GetEmployeesList",
            data: JSON.stringify({ branchId: ddlValue, includeNonActive: isNonActive }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                resultData = result;
            },
            error: function () {
                alert("Error retrieving Employees List!");
            }
        }).done(function () {
            var dataSource = new kendo.data.DataSource({
                data: resultData.Data,
                pageSize: 15
            });
            var grid = $('#grid').data("kendoGrid");
            grid.setDataSource(dataSource);
            dataSource.read();
        });
    });
}

下拉更改事件应触发 ajax 发布到控制器，但我无法正确地将适当的对象传递给 DataSourceRequest 请求参数。发布时，DataSourceRequest 请求始终为空。

如何正确传递对象？

【问题讨论】：

你的ajax请求中没有request参数。
对，试了一下，要求我从视图中创建 DataSourceRequest 对象，但无法让它工作。在这里讨论过：telerik.com/forums/…

标签： asp.net-mvc kendo-ui kendo-grid kendo-asp.net-mvc telerik-grid

【解决方案1】：

我通过强制剑道网格重新读取数据使其工作：

$('#ddlBranchList').change(function () {
    var grid = $('#grid').data("kendoGrid");
    grid.dataSource.read();
});

然后修改branchData函数：

function branchData() {
    var isNonActive = $('#isNonActive')[0].checked;
    var ddlValue = $('#ddlBranchList').val();
    if (ddlValue > 0) {
        branchId = ddlValue;
    }
    return {
        branchId: branchId,
        includeNonActive: isNonActive,
    }
}

【讨论】：