2

我在 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
}

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

4

1 回答 1

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>

屏幕截图

在此处输入图像描述

在此处输入图像描述

于 2016-10-15T02:59:06.733 回答