Question

我在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或Array。这是编辑页面......

@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(),
        })
    })
}

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

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

任何建议都将不胜感激。我研究的所有东西要么不符合我的情况，要么没有工作。谢谢！

Answer 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>

Kendo Multiselect不向控制器发送数据

1 个答案:

模型

控制器

视图

屏幕截图