Kendo 多选不向控制器发送数据

Kendo Multiselect not sending data to controller

我在 ASP.NET MVC 中工作，我正在尝试制作一个用于创建和编辑特定视图模型的页面，ProjectVM。我遇到的问题是使用 Kendo 多选来填充 ProjectVM 中的列表。该列表属于另一种模型类型，Staff。这是视图模型...

public class ProjectVM{
    [Key]
    public int ID { get; set; }
    ... //more items
    public List<Staff> Staff { get; set; }
}

我尝试了很多不同的变体，例如使 Staff 成为 IEnumerable 或数组。这是编辑页面...

@model Site.Models.ProjectVM
@using (Ajax.BeginForm("Save", Model, new AjaxOptions() {HttpMethod = "post" })){
    ...
    @(Html.Kendo().MultiSelectFor(M => m.Staff)
        .BindTo(new SelectList((System.Collection.IEnumerable)ViewData["Staff"], "ID", "FullName"))
        .Value(Model.Staff)

如您所料，加载页面时我将所有 Staff 项目存储在 ViewData 中。上面根本没有从多选发送任何信息到控制器，并且在收到的视图模型中声称 Staff 列表的大小为 0，尽管我选择了什么。相反，我尝试摆脱表格并使用 Ajax POST 调用...

function save(){
    $.ajax({
        url: "Save",
        type: "POST",
        dataType: "json",
        contentType: "application/json", 
        data: JSON.stringify({
            ID: @Model.ID,
            ...
            Staff: $("#Staff").data("kendoMultiSelect").dataItems(),
        })
    })
}

这获得了轻微的改进，因为控制器收到的列表现在显示了正确的大小。但是，每个条目都填满了空白信息。我的控制器代码的 header...

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Save(ProjectVM vm){
    ... //vm has never been correct
}

如有任何建议，我们将不胜感激。我研究过的所有内容要么不适合我的情况，要么不起作用。谢谢！

我个人喜欢使用 SelectListItem 将数据绑定到 Kendo MultiSelect.

型号

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace Site.Models
{
    public class ProjectVM
    {
        [Key]
        public int ID { get; set; }

        public List<SelectListItem> AllStaffs { get; set; }
        public List<SelectListItem> SelectedStaffs { get; set; }

        public ProjectVM()
        {
            AllStaffs = new List<SelectListItem>();
            SelectedStaffs = new List<SelectListItem>();
        }
    }
}

控制器

using System.Collections.Generic;
using System.Web.Mvc;
using Site.Models;

namespace Site.Controllers
{
    public class ProjectController : Controller
    {
        // GET: Project
        public ActionResult Index()
        {
            var vm = new ProjectVM
            {
                AllStaffs = new List<SelectListItem>
                {
                    new SelectListItem {Text = "John Doe", Value = "1"},
                    new SelectListItem {Text = "Eric Newton", Value = "2"},
                    new SelectListItem {Text = "David Washington", Value = "3"},
                }
            };
            return View(vm);
        }

        [HttpPost]
        public ActionResult Save(ProjectVM vm)
        {
            return View(vm);
        }
    }
}

查看

@using Kendo.Mvc.UI
@model Site.Models.ProjectVM
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css" />
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/jquery.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
</head>
<body>
    @using (Ajax.BeginForm("Save", Model, new AjaxOptions { HttpMethod = "post" }))
    {

        @(Html.Kendo()
            .MultiSelectFor(m => m.SelectedStaffs)
            .DataTextField("Text")
            .DataValueField("Value")
              .BindTo(Model.AllStaffs))
        <button id="btnSave" type="button">Search</button>
    }
    <script type="text/javascript">
        $("#btnSave").click(function() {
            $.ajax({
                url: "Save",
                type: "POST",
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify({
                    ID: @Model.ID,
                    SelectedStaffs: $("#SelectedStaffs").data("kendoMultiSelect").dataItems()
                })
            });
        });
    </script>
</body>
</html>

屏幕截图