Kendo Multiselect not sending data to controller

Question

I'm working in ASP.NET MVC, and I'm trying to make a page for creating and editing a certain view model, ProjectVM. The piece that I'm having trouble with is using a Kendo Multiselect to populate a List in ProjectVM. The list is of another model type, Staff. Here is the view model...

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

I've tried a bunch of different variants of this, such as making Staff an IEnumerable or an Array. Here is the editor page...

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

As you can surmise, when loading the page I store all the Staff items in ViewData. The above did not send any information from the multiselect at all to the controller, and in the received view model claimed that the size of the Staff list was 0, despite what I selected. I tried instead to get rid of the form and use an Ajax POST call...

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

This garnered slight improvement, as the List received by the controller now showed the correct size. However, each entry was filled with blank information. The header of my controller code...

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

Any suggestions would be greatly appreciated. Everything I have researched has either not fit my scenario or not worked. Thank you!

Win · Accepted Answer

I personally like using SelectListItem for binding data to Kendo MultiSelect.

Model

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 AllStaffs { get; set; }
        public List SelectedStaffs { get; set; }

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

Controller

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
                {
                    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);
        }
    }
}

View

@using Kendo.Mvc.UI
@model Site.Models.ProjectVM
@{
    Layout = null;
}



    
    Index
    
    
    
    


    @using (Ajax.BeginForm("Save", Model, new AjaxOptions { HttpMethod = "post" }))
    {

        @(Html.Kendo()
            .MultiSelectFor(m => m.SelectedStaffs)
            .DataTextField("Text")
            .DataValueField("Value")
              .BindTo(Model.AllStaffs))
        
    }

Kendo Multiselect not sending data to controller

Answers (1)

Model

Controller

View

Screen Shots

Related Questions