剑道多选不向控制器发送数据答案

【问题标题】：Kendo Multiselect not sending data to controller剑道多选不向控制器发送数据
【发布时间】：2017-02-24 11:45:53
【问题描述】：

我正在使用 ASP.NET MVC，我正在尝试创建一个页面来创建和编辑某个视图模型 ProjectVM。我遇到的问题是使用 Kendo Multiselect 在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(),
        })
    })
}

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

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

任何建议将不胜感激。我研究过的所有东西要么不适合我的场景，要么不起作用。谢谢！

【问题讨论】：

您不能将<select> 绑定到复杂对象的集合（<select multiple> 仅提交简单值数组）- 您需要绑定的属性必须是public IEnumerable<int> Staff { get; set; }跨度>

标签： asp.net ajax asp.net-mvc kendo-ui kendo-multiselect

【解决方案1】：

我个人喜欢使用 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>

屏幕截图

【讨论】：

非常感谢。进行了一些重组，但这就像一个魅力。为胜利而战。