如何将数组从剑道预检传递给 MVC 列表参数？答案

【问题标题】：How to pass array from kendo preflight to MVC list parameter?如何将数组从剑道预检传递给 MVC 列表参数？
【发布时间】：2019-12-11 18:54:50
【问题描述】：

我有一个网络端点

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

我想从剑道多选中传递一些数据。多选使用服务器端过滤；它使用远程数据源；并且需要在飞行前处理数据。

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

飞行前方法看起来像

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

多选在视图中定义为

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

还有我的请求网址：

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 多选将我的 javascript 数组传递为控制器将接受的格式？

【问题讨论】：

标签： c# asp.net-core kendo-ui

【解决方案1】：

嗯，问题与看到的here 或here 相同。

正如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>

【讨论】：