Question

我的MVC应用程序中有一个Kendo Grid，它的方法是从存储库中传递数据。我还具有一些按钮，这些按钮将数据数组传递给控制器以调整结果，尽管在网格不变的断点处，返回的数据在控制器中可见。如何更新网格以使用更改后的数据源？

网格

@(Html.Kendo().Grid<MyProject.Models.Cars>()
.Name("grid")
.Columns(columns => {
    columns.Select().Width(50);
    columns.Bound(c => c.Id).Title("Id");
    columns.Bound(c => c.Name).Title("Name");
    })
.DataSource(dataSource => dataSource
    .Ajax()
    .ServerOperation(true)
    .Model(model => model.Id(p => p.Id))
    .Read(read => read.Action("GetTabCars", "Test"))
))

按钮当您单击其中一个按钮时，它将一个ID数组传递给控制器。效果很好，您可以在控制器中看到该数组，并且该数组可以毫无问题地传递下去。

function tabButton(e) {
    let filter = $(e).data("filter");
    $.ajax({
        type: "POST",
        url: "/Test/GetTabCars/",
        data: { array: filter },
        success: function (response) {
            console.log("Success");
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(jqXHR.status);
            console.log(textStatus);
            console.log(errorThrown);
        }
    })
}

控制器 如果没有阵列，则控制器将返回所有轿厢。如果存在数组，则它将选择这些记录并返回它们。如上所述，此方法似乎有效，使用断点，您可以在选定的数据到达最后一步return data;时看到它。

public ActionResult GetTabCars(int[] array, [DataSourceRequest] DataSourceRequest request)
{
    List<Car> cars = new List<Car>();
    var car = unitOfWork.CarRepository.Get();
    DataSourceResult result = car.ToDataSourceResult(request);
    JsonResult data;

    if (array !=null)
    {
        foreach (var id in array)
        {
            cars.Add(unitOfWork.CarRepository.FindSingleOrDefault(x => x.Id == id));
        }
        data = Json(cars, JsonRequestBehavior.AllowGet);
    }
    else
    {
        data = Json(result, JsonRequestBehavior.AllowGet);
    }
    data.MaxJsonLength = int.MaxValue;
    return data;
}

尽管进行了上述工作，网格仍保持不变。谁能帮助我了解为什么网格不使用新请求的数据进行更新？

Answer 1

初始化后，您可以使用数据源的read命令刷新网格：

function tabButton(e) {
    let filter = $(e).data("filter");
    var grid = $('#grid').data('kendoGrid');
    grid.dataSource.read({  array: filter });
    grid.refresh();
}

Answer 2

您可以使用以下方法以编程方式设置网格的dataSource：

$("#grid").data('kendoGrid').dataSource.data(dataToSet);

像这样简单地修改您的js方法：

function tabButton(e) {
    let filter = $(e).data("filter");
    $.ajax({
        type: "POST",
        url: "/Test/GetTabCars/",
        data: { array: filter },
        success: function (response) {
            var result = JSON.parse(response);
            $("#grid").data('kendoGrid').dataSource.data(result);
            console.log("Success");
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(jqXHR.status);
            console.log(textStatus);
            console.log(errorThrown);
        }
    })
}

如何从控制器更新KendoUI Grids数据源？

2 个答案: