如何将数组从 kendo 预检传递到 MVC 列表参数？

Question

我有一个网络端点

public JsonResult GetCompanyPersonnelMany(string text, IEnumerable<int> includeIds)
{

我想从 kendo multiselect 传递一些数据。 multi select 使用服务器端过滤；它使用远程数据源；并且它需要在飞行前处理数据。

我的问题是text参数会被设置，但是includeIds总是空的

飞行前的方法看起来像

var employeeComboDataPreFlight_loading = true;
function employeeComboDataPreFlight() {
    var data = multiSelectPreFlightCommon(getMultiSelectByName('personnel'));
    if (employeeComboDataPreFlight_loading) { data.includeIds = [568,572,585] || []; }
    return data;
}

multiselect 在视图中定义为

@(Html.Kendo().MultiSelect()
    .Name("personnel")
    .Filter(FilterType.Contains)
    .Placeholder("Select an option...")
    .DataTextField(nameof(PersonnelEmployerViewModel.DisplayName))
    .DataValueField(nameof(PersonnelEmployerViewModel.PersonnelId))
    .MinLength(2)
    .Value(Model.Select(x => x.PersonnelId))
    .DataSource(source =>
    {
      source.Read(read =>
      {
          read.Action(nameof(PersonnelController.GetCompanyPersonnelMany),
              ControllerName.Personnel
              )
          .Data("employeeComboDataPreFlight")
          ;
      })
      .ServerFiltering(true);
    })
    )

评估飞行前方法（在 chrome 控制台中）显示如下：

> employeeComboDataPreFlight()
<- {text: "", includeIds: Array(3)}
    includeIds: Array(3)
      0: 568
      1: 572
      2: 585
> JSON.stringify(employeeComboDataPreFlight())
<- "{"text":"","includeIds":[568,572,585]}"

打开 chrome 网络选项卡，显示查询字符串参数：

text:
includeIds[]: 568
includeIds[]: 572
includeIds[]: 585

还有我的要求URL：

Request URL: https://localhost:44363/Personnel/GetCompanyPersonnelMany?text=&includeIds%5B%5D=568&includeIds%5B%5D=572&includeIds%5B%5D=585

所以看起来有一个名为 includeIds 的变量的数据数组被发送到服务器。

我的问题是控制器没有获取 includeIds 参数（text 参数正常工作），列表始终为空（非空，长度：0）。如何让 kendo multiselect 将我的 javascript 数组传递到控制器可以接受的格式？

Answer 1

嗯，问题和看到的一样 or 。

正如 the documentation 中指出的那样，读取传输是 jquery ajax 方法的包装器，因此可以传递（某些）相同的配置参数。修复方法是将 traditional: true 传递给读取传输配置。使用 MVC 包装器这是不可能的，因此您必须在 javascript 中定义 kendo 小部件。

我尝试在像 this post 中那样初始化小部件后设置选项，但无法使其正常工作：

multiselect.dataSource.transport.options.read.traditional = true; // doesn't do anything

我也尝试使用 JSON.stringify 而不是 traditional，但始终无法获得工作请求。最后，我不得不 (1) 将小部件的 MVC 定义更改为 javascript 并且 (2) 添加 traditional: true 到传输选项。现在的视图看起来像

<div id="personnelWrapper" name="personnel"></div>
<script>
    $("#personnelWrapper").kendoMultiSelect({
        "filter": "contains",
        "placeholder": "Select an option...",
        "dataTextField": "@nameof(PersonnelEmployerViewModel.DisplayName)",
        "dataValueField": "@nameof(PersonnelEmployerViewModel.PersonnelId)",
        "minLength": 2,
        "value": [@(string.Join(",", Model.Select(x => x.PersonnelId)))],
        "dataSource": {
            "transport": {
                "read": {
                    "url": "@(Url.Action(nameof(PersonnelController.GetCompanyPersonnelMany),
                          ControllerName.Personnel) )",
                    "dataType": "json",
                    "data":employeeComboDataPreFlight,
                    "traditional": true, // <- this is the solution
                },
                "prefix":""
            },
            "serverFiltering":true,
            "filter":[],
            "schema":{
                "errors":"Errors"
            }
        }
    });
</script>

如何将数组从 kendo 预检传递到 MVC 列表参数？

How to pass array from kendo preflight to MVC list parameter?

c#

kendo-ui

asp.net-core