MVC5项目中Kendo MultiSelect选中值传递的实现方案

我来帮你搞定Kendo MultiSelect在MVC5中传递选中值的问题，这里有几个实用方案，按你的场景选就行：

这是MVC项目里最常用的方式，核心是让MultiSelect的选中值和ViewModel的集合属性对应，提交表单时MVC会自动帮你绑定数据。

第一步：修改你的ViewModel #

先在BookViewModel里新增一个用于接收多选ID的集合属性，类型要和PublicHouseId一致（比如是int就用List<int>）：

public class BookViewModel
{
    // 你已有的其他属性
    public int BookId { get; set; }
    public string BookName { get; set; }
    
    // 新增：接收多选的出版社ID集合
    public List<int> SelectedPublicHouseIds { get; set; }
}

第二步：调整视图中的MultiSelect #

确保MultiSelect的name属性和ViewModel的集合属性名完全一致，或者直接用Kendo的HtmlHelper生成（更稳妥）：

方式A：原生JS初始化+手动指定name

@model Library.ViewModels.Models.BookViewModel
@{ ViewBag.Title = "Edit"; }

<script>
$(document).ready(function () {
    $("#multiselect").kendoMultiSelect({
        placeholder: "--Select Public Houses--",
        dataTextField: "PublicHouseName",
        dataValueField: "PublicHouseId",
        autoBind: true,
        dataSource: {
            transport: {
                read: {
                    dataType: "json",
                    url: "/book/getAllPublicHouses" // 补全你的接口地址
                }
            }
        }
    });
});
</script>

@using (Html.BeginForm("Edit", "Book", FormMethod.Post))
{
    <!-- 其他表单元素 -->
    @Html.HiddenFor(m => m.BookId)
    @Html.TextBoxFor(m => m.BookName)

    <!-- 关键：name属性要和ViewModel的集合属性名一致 -->
    <input id="multiselect" name="SelectedPublicHouseIds" />

    <input type="submit" value="保存修改" />
}

方式B：用Kendo HtmlHelper生成（推荐，自动绑定）

这种方式不用手动写name，框架会自动帮你匹配ViewModel属性：

@model Library.ViewModels.Models.BookViewModel
@{ ViewBag.Title = "Edit"; }

@using (Html.BeginForm("Edit", "Book", FormMethod.Post))
{
    @Html.HiddenFor(m => m.BookId)
    @Html.TextBoxFor(m => m.BookName)

    @(Html.Kendo().MultiSelectFor(m => m.SelectedPublicHouseIds)
        .Placeholder("--Select Public Houses--")
        .DataTextField("PublicHouseName")
        .DataValueField("PublicHouseId")
        .DataSource(src => src.Read(read => read.Action("getAllPublicHouses", "Book")))
    )

    <input type="submit" value="保存修改" />
}

第三步：控制器接收参数 #

你的Post Action直接接收BookViewModel即可，选中的ID集合会自动填充到SelectedPublicHouseIds里：

[HttpPost]
public ActionResult Edit(BookViewModel model)
{
    // 这里就能拿到选中的所有出版社ID
    var selectedIds = model.SelectedPublicHouseIds;
    
    if (ModelState.IsValid)
    {
        // 写你的保存逻辑
        return RedirectToAction("Index");
    }
    return View(model);
}

如果不想用表单提交，想异步保存，可以手动获取MultiSelect的选中值，通过Ajax传给后端：

@model Library.ViewModels.Models.BookViewModel
@{ ViewBag.Title = "Edit"; }

<script>
$(document).ready(function () {
    // 初始化MultiSelect并获取实例
    var multiSelect = $("#multiselect").kendoMultiSelect({
        placeholder: "--Select Public Houses--",
        dataTextField: "PublicHouseName",
        dataValueField: "PublicHouseId",
        autoBind: true,
        dataSource: {
            transport: {
                read: {
                    dataType: "json",
                    url: "/book/getAllPublicHouses"
                }
            }
        }
    }).data("kendoMultiSelect");

    // 绑定保存按钮的点击事件
    $("#ajaxSaveBtn").click(function() {
        // 获取选中的ID数组
        var selectedIds = multiSelect.value();

        $.ajax({
            url: "/book/Edit",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify({
                BookId: @Model.BookId,
                BookName: $("#BookName").val(),
                SelectedPublicHouseIds: selectedIds
            }),
            success: function() {
                alert("保存成功");
                window.location.href = "/book/Index";
            },
            error: function() {
                alert("保存失败，请重试");
            }
        });
    });
});
</script>

<!-- 表单元素 -->
@Html.HiddenFor(m => m.BookId)
@Html.TextBoxFor(m => m.BookName, new { @id = "BookName" })
<input id="multiselect" />
<button id="ajaxSaveBtn" type="button">异步保存</button>

控制器的Action和方案1完全一样，MVC会自动解析JSON参数到ViewModel里。

注意事项 #

• 确保dataValueField的类型和ViewModel集合的元素类型一致（比如都是int或者string），否则会绑定失败
• 如果是编辑场景，要给MultiSelect设置初始选中值：用value()方法传入Model.SelectedPublicHouseIds即可

内容的提问来源于stack exchange，提问作者Mikhail Kostiuchenko