jsGrid过滤问题从.net控制器调用数据

Question

使用 jsGrid 成功执行 CRUD 操作但无法使过滤器工作

我到处搜索（SO、YouTube、js-grid.com）。被这个问题卡了一整天后求助SO社区

查看

@model MyNamespace.Models.ViewModels.VehicleViewModel
<h1>Vehicles</h1>
<div id="jsGrid"></div>

    <script>
    var lastPrevItem;

    $(function () {
        var result = $.Deferred();

            $("#jsGrid").jsGrid({
                height: "400px",
                width: "100%",
                inserting: true,
                editing: true,
                sorting: true,
                paging: true,
                autoload: true,
                loadMessage: "Please, wait...",
                pageSize: 10,
                pageButtonCount: 5,
                readonly: false,
                filtering: true,
                deleteConfirm: "Do you really want to delete?",

                controller: {
                    loadData: function (filter) {
                        var d = $.Deferred();
                        $.ajax({
                            type: "GET",
                            url: "/Vehicles/GridJsonGet",
                            data: {
                                data: filter
                            },
                            dataType: "json",
                            success: function (filter) {
                                filter ? console.log("success", filter) : alert("Could not load vehicles");
                            }

                        }).done(function (response) {
                                d.resolve(response);
                            });
                        return d.promise();
                    },

                    insertItem: function (item) {
                        var ajaxDeferredInsert = $.ajax({
                            type: "POST",
                            url: "/Vehicles/GridJsonPost",
                            data: item,
                            dataType: "json",
                            success: function (item) {
                                item ? console.log("Add Vehicle success") : alert("Vehicle could not be added");
                            }
                        });
                        ajaxDeferredInsert.done(function (insertItem) {
                            console.log("inserted item", insertItem);
                            result.resolve(insertItem);
                        }).fail(function () {
                            result.resolve(lastPrevItem);
                        });

                        return result.promise();
                    },

                    updateItem: function (item) {

                        var ajaxDeferredUpdate = $.ajax({
                            type: "PUT",
                            url: "/Vehicles/GridJsonPut/" + item.VehicleId,
                            data: item,
                            dataType: "json",
                            success: function (item) {
                                item ? console.log("Update success", item) : alert("Vehicle could not be updated");
                            }
                        });
                        ajaxDeferredUpdate.done(function (updatedItem) {
                            result.resolve(updatedItem);
                        }).fail(function () {
                            result.resolve(lastPrevItem);
                        });

                        return result.promise();
                    },

                    deleteItem: function (item) {
                        return $.ajax({
                            type: "DELETE",
                            url: "/Vehicles/GridJsonDelete/" + item.VehicleId,
                            data: item,
                            dataType: "json",
                            success: function (item) {
                                if (item) {
                                    console.log("Delete success");
                                }
                                else {
                                    alert("Vehicle could not be deleted");
                                    location.reload();
                                }
                            },
                        });
                    },
                },

                fields: [
                    {
                        name: "VIN",
                        title: "VIN",
                        type: "text",
                        width: 20
                    },
                    {
                        name: "Make",
                        title: "Make",
                        @*items: @Html.Raw(Model.VehicleMakesJson),*@
                        valueField: "Id",
                        textField: "Name",
                        type: "text",
                        width: 75,
                        filtering: true
                    },
                    {
                        name: "VehicleModel",
                        title: "Model",
                        items: @Html.Raw(Model.VehicleModelsJson),
                        valueField: "Id",
                        textField: "Name",
                        type: "select",
                        width: 75,
                        filtering: true
                    },
                    {
                        name: "InitialOdometer",
                        title: "Initial Odometer",
                        type: "number",
                        width: 40
                    },
                    {
                        name: "IsActive",
                        title: "Active",
                        width: 20,
                        type: "checkbox",
                        insertTemplate: function () {
                            var $result = jsGrid.fields.checkbox.prototype.insertTemplate.call(this);
                            $result.prop("checked", true);
                            return $result;
                        }
                    },
                    {
                        title: "View",
                        width: 20,
                        itemTemplate: function (value, item) {
                            var $customLink = $("<i>").attr({ class: "jsgrid-custom-button fas fa-external-link-alt" })
                                .click(function (e) {
                                    location = item.Link + item.VehicleId;
                                    e.stopPropagation();
                                });
                            return $("<div>").append($customLink);
                        },
                    },
                    {
                        type: 'control',
                        deleteButton: false,
                        width: 20
                    },
                ]
            });
    });
</script>

控制器

    public ActionResult Index()
    {
        VehicleViewModel model = new VehicleViewModel();
        model.Vehicles = service.GetVehicles();

        model.VehicleMakes.Add(new VehicleTypes
        {
            Id = 0,
            Name = ""
        });

        foreach (var item in model.Vehicles)
        {
            model.VehicleMakes.Add(new VehicleTypes
            {
                Id = item.VehicleId,
                Name = item.Make
            });
        }
        model.VehicleModels.Add(new VehicleTypes
        {
            Id = 0,
            Name = ""
        });

        foreach (var item in model.Vehicles)
        {
            model.VehicleModels.Add(new VehicleTypes
            {
                Id = item.VehicleId,
                Name = item.VehicleModel
            });
        }

        model.VehicleMakesJson = JsonConvert.SerializeObject(model.VehicleMakes);
        model.VehicleModelsJson = JsonConvert.SerializeObject(model.VehicleModels);

        return View(model);
    }

    [HttpGet]
    public string GridJsonGet(string filter)
    {            
        VehicleViewModel model = new VehicleViewModel();
        model.Vehicles = service.GetVehicles();
        json = JsonConvert.SerializeObject(model.Vehicles);
        return json;
    }

出于某种原因，我似乎无法在没有 select 列表或网格中填充的数据的情况下获得另一个。

在名为 'Make' 的字段上，我注释掉了项目数组并将类型设置为文本，这在网格中给出了结果，但我没有得到 select 品牌列表。

在名为 'VehicleModel' 的字段上，我正在填充视图模型中的项目，它为我提供了一个 select 列表，但网格中没有数据。

不确定我需要做哪些不同的事情？

Answer 1

答案很简单，我只是在我的 MVC 控制器方法中输入了错误的参数名称 (smh)

更新加载数据调用（视图）

loadData: function (filter) {
  var d = $.Deferred();
  var filterData = JSON.stringify(filter);
  $.ajax({
      type: "GET",
      url: "/Vehicles/GridJsonGet",
      data: {
         data: filterData
      },
       dataType: "json"
   }).done(function (response) {
       d.resolve(response);
       });
       return d.promise();
   },




updated controller method 

public string GridJsonGet(string data)
    {            
        VehicleViewModel model = new VehicleViewModel();

        var gridData = JsonConvert.DeserializeObject<Vehicle>(data);

        if (!String.IsNullOrEmpty(gridData.Make))
        {
            model.Vehicles = service.GetVehiclesByFilter(gridData.Make);

        }
        if (!string.IsNullOrEmpty(gridData.VehicleModel))
        {
            model.Vehicles = service.GetVehiclesByFilter(gridData.VehicleModel);

        }
        else
        {
            model.Vehicles = service.GetVehicles();
        }
        json = JsonConvert.SerializeObject(model.Vehicles);
        return json;
    }

jsGrid过滤问题从.net控制器调用数据

jsGrid Filtering issue calling data from .net controller

javascript

asp.net-mvc

jquery

jsgrid

asp.net-core