Question

在我的表单上使用此代码，我想保存所选的汽车（所有数据 - id和描述）：

<div class="editor-field">
   @Html.DropDownListFor(model => model.Cars, new SelectList(Model.ListCars, "Description", "Description"), new { id = "myCars", multiple="multiple" })
   @Html.ValidationMessageFor(model => model.Cars)
</div>

但是当我检查Model.IsValid时，它是否设置为 false ，在我看来，我收到了以下消息：值'（已选中） '无效。

有谁能告诉我为什么以及如何解决这个问题？

我的viewModel：

    public ICollection<Car> Cars;
    public ICollection<Car> ListCars; //it's populated somewhere

我的Car.cs：

    public int Id { get; set; }
    public string Description { get; set; }

Answer 1

我开发了一个不考虑好习惯的解决方案，但至少它解决了我的问题。基本上我的逻辑如下：

使用下拉帮手的插件
在某处隐藏div，并将所有可选值传递给下拉帮助器（id和description）
当通过JS项目选择的下拉列表发生更改时，通过为隐藏的div期望值指定一个特定名称来“选择”以便保存

像这样：

1。 使用下拉帮手的插件：

我在下拉列表中使用this JS plugin（v0.6），所以我有了这些更改：

我的下拉帮手：

@Html.DropDownListFor(model => model.Cars, new SelectList(Model.ListCars, "Description", "Description"), new { id = "myCars", @class = "isCheckList", multiple="multiple" })

在我的JS中：

$(document).ready(function () {
        $(".isCheckList").dropdownchecklist({ firstItemChecksAll: true, width: 350 });
    });

2. 在某处隐藏div，并将所有可选值传递给下拉帮手（ID和说明）：

<div id="carsHidden" style="display:none">
        @foreach (Caritem in Model.ListCars)
        {
                <div id="@(item.Id)">
                    @Html.HiddenFor(modelItem => item.Id, new { data_Name = "Id" })
                    @Html.HiddenFor(modelItem => item.Description, new { data_Name = "Description" })
                </div>
        }
    </div>

3。 当通过JS项目选择的下拉列表发生更改时，通过为隐藏的div所需值指定“选择”，为其保存特定名称：

为此，我将一个事件onchange添加到我的下拉帮助器和管理器选择：

$(".isCheckList").on("change", function (e, data) {
        var hiddenDivId = $(this).data("hiddendivid");
        var fieldName = $(this).data("fieldname");
        selectManagement($(this), data, hiddenDivId, fieldName);
    });

function selectManagement(e, data, hiddenDivId, fieldName) {

        $(e).children().each(function () {

            if ($(this).attr("value") == $(data).attr("value")) {
                if ($(this).attr("selected")) {

                        $("#" + hiddenDivId + " #" + $(this).attr("value")).addClass("IsSelected");

                    selectComponent(hiddenDivId, fieldName);
                }
                else {

                        $("#" + hiddenDivId + " #" + $(this).attr("value")).removeClass("IsSelected");

                    unselectComponent(hiddenDivId);
                    updateRowsIds(hiddenDivId, fieldName);
                }

                return false;
            }
        });
    }

    function unselectComponent(hiddenDivId) {

        $("fieldset").each(function () {
            if ($(this).find("div#" + hiddenDivId).exists()) {
                $("div#" + hiddenDivId).children().each(function () {
                    if ($(this).hasClass("IsSelected") == false) {
                        $(this).find("input").each(function () {
                            $(this).attr("name", null);
                            $(this).attr("id", null);
                        });
                    }
                });
            }
        });
    }

    function selectComponent(hiddenDivId, fieldName) {

        $("fieldset").each(function () {
            if ($(this).find("#" + hiddenDivId + " .IsSelected").exists()) {
                var index = 0;
                $("#" + hiddenDivId + " .IsSelected").each(function () {
                    $(this).children().each(function () {
                        if ($(this).is("input")) {
                            $(this).attr("name", fieldName + "[" + index + "]." + $(this).data("name"));
                            $(this).attr("id", fieldName + "_" + index + "_" + $(this).data("id"));
                        }
                    });
                    index++;
                });
            }
        });
    }

    function updateRowsIds(hiddenDivId, fieldName) {
        $("#" + hiddenDivId + " div.IsSelected").each(function (index) {

            $(this).find("input").each(function () {
                $(this).attr("name", fieldName + "[" + index + "]." + $(this).data("name"));

            });
        });
    }

所以现在，我总是选择一辆车，我将保存其描述和ID

保存多个选定的数据

1 个答案: