将附加数据发布为列表kendo multiselect read

时间:2015-03-09 07:56:08

标签: json post kendo-ui kendo-asp.net-mvc multi-select

我有两个kendo multiselect,我希望我的角色multiselect以另一种方式从一个级联中排序,在多重选择角色上我希望发布在我的系统multiselect中选择的值的列表。这就是我的角色multiselect的样子:

 @(Html.Kendo().MultiSelect()
              .Name("Roles")
                .DataTextField("Name")
                .DataValueField("Id")
              .Placeholder("Select roles")
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetRoles", "UserAdmin").Data("additionalItemsGetRoles");
                  })
                  .ServerFiltering(true);
              })
             )


<script>
 function additionalItemsGetRoles() {
    var multiselect = $("#Systems").data("kendoMultiSelect").dataItems();
    var length = multiselect.length;
    var systems = [];
    for (var i = 0; i < length; i++) {
        systems.push({
            Name: multiselect[i].Name,
            SystemId: multiselect[i].SystemId,
            Description: multiselect[i].Description
        });
    }
    var json = JSON.stringify(systems);
    console.log(json);
    return json;
}
</script>

以下是我的操作方法:

       public ActionResult GetRoles([DataSourceRequest] DataSourceRequest request, IList<SystemViewModel> systems)
    {

这是我的console.log(json)在控制台中显示的内容。 enter image description here

这是我的viewmodel:

   public string SystemId { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }

我尝试将动作方法设置为[httpPost]但是根本找不到该方法。

每次发布​​到控制器时它都会为空。我在这做错了什么?

1 个答案:

答案 0 :(得分:2)

好的,如果我理解正确,你想要做的是根据另一个多选列表中的选定项目过滤一个多选列表。是

我实际上在做类似的事情,这就是我所做的:

首先,设置两个MultiSelect“小部件” 在第一个MultiSelect上设置Change事件(“regionChange”) 将DataSource的.Data参数设置为js函数(“regionfilter”)

@(Html.Kendo().MultiSelect()
    .Name("region")
    .DataTextField("Name")
    .DataValueField("Id")
    .AutoBind(false)
    .Events(e => e.Change("regionChange"))
    .DataSource(ds => ds
        .Read(read => read.Action("GetRegionsForFilter", "Authorization")
    )
)

@(Html.Kendo().MultiSelect()
    .Name("branch")
    .DataTextField("Name")
    .DataValueField("Id")
    .AutoBind(false)
    .DataSource(ds => ds
        .Read(read => read.Action("GetBranchesForFilter", "Authorization")
        .Data("regionfilter"))
        .ServerFiltering(true)
    )
)

定义js函数(我有一个额外的函数来获取MultiSelect值,因为我在其他几个MultiSelect“小部件”上使用它而没有页面,而我实际上正在对某些函数进行反向过滤(例如Branch /区域虽然我剪掉了对区域进行的过滤)

function regionChange() {
    var value = this.value(),
        grid = $("#grid").data("kendoGrid");

    <-- snipped logic related to filtering grid -->

    $('#branch').data('kendoMultiSelect').dataSource.read();
}

function regionfilter() {
    var values = getMultiSelectValues("region");
    return { regions: values.toString() };
}

function getMultiSelectValues(multiSelectControl) {
    var multiSelect = $("#" + multiSelectControl).data("kendoMultiSelect");
    var values = multiSelect.value($("#value").val());
    return values;
}

最后,在我的控制器中,我只是返回一个接受字符串参数的JsonResult(获取请求)(以逗号分隔的字符串列表)

public JsonResult GetBranchesForFilter(string regions)
{
    var list = _repository.Branches().GetAll().Select(x => new { x.Id, x.Name, x.RegionId });
    if (!String.IsNullOrWhiteSpace(regions))
        list = list.Where(x => regions.Contains(x.RegionId.ToString()));

    return Json(list.OrderBy(o => o.Name), JsonRequestBehavior.AllowGet);
}