代码之家  ›  专栏  ›  技术社区  ›  Yanayaya

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

  •  1
  • Yanayaya  · 技术社区  · 6 年前

    网格

    @(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;
    }
    

    2 回复  |  直到 6 年前
        1
  •  1
  •   Ross Bush    6 年前

    初始化后,可以使用数据源的read命令刷新网格:

    function tabButton(e) {
        let filter = $(e).data("filter");
        var grid = $('#grid').data('kendoGrid');
        grid.dataSource.read({  array: filter });
        grid.refresh();
    }
    
        2
  •  1
  •   Kerlos Bekhit    6 年前

    可以使用以下命令以编程方式设置网格的数据源:

    $("#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);
            }
        })
    }