Kendo Multiselect не отправляет данные на контроллер

Я работаю в ASP.NET MVC и пытаюсь создать страницу для создания и редактирования определенной модели представления, ProjectVM. Часть, с которой у меня возникли проблемы, заключается в использовании мультиселекта кендо для заполнения списка в 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
}

Любые предложения будут ценны. Все, что я исследовал, либо не соответствовало моему сценарию, либо не работало. Благодарю вас!

hallordylo 14.10.2016 источник

comment

Вы не можете привязать <select> к набору сложных объектов (<select multiple> отправляет только массив простых значений) - свойство, к которому нужно привязать, должно быть public IEnumerable<int> Staff { get; set; } - 15.10.2016

Ответы (1)

arrow_upward
1
arrow_downward

Лично мне нравится использовать SelectListItem для привязки данных к 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>

Снимки экрана

Win 15.10.2016