Сохранить несколько выбранных данных

0

С помощью этого кода в моей форме я хочу сохранить выбранные автомобили (все его данные - идентификатор и описание):

<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 и, на мой взгляд, я получил это сообщение: Значение '(selected)' недействительно.

Может ли кто-нибудь сказать мне, почему и как я могу это решить?

Мой взглядМодель:

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

Мой Car.cs:

    public int Id { get; set; }
    public string Description { get; set; }
  • 0
    что вы подразумеваете под "все свои данные"? что будет передано обратно в контроллер из выпадающего списка, потому что это просто выбранный идентификатор
  • 0
    @MattBodily фактически передается описание (только), но я хочу, чтобы оно передавало описание и идентификатор каждой выбранной машины
Показать ещё 2 комментария
Теги:
asp.net-mvc-4
html-select
asp.net-mvc-3
html.dropdownlistfor

1 ответ

0
Лучший ответ

Я разработал решение, которое не считает хорошей практикой, но, по крайней мере, оно решило мою проблему. В основном моя логика такова:

  1. Используйте плагин для вспомогательного помощника

  2. Есть где-то скрытый div со всеми выбираемыми значениями, переданными помощнику выпадающего списка (id и description)

  3. Когда происходит изменение выбранного выпадающего списка через элемент JS, "выберите" в скрытых значениях div, назначив им определенное имя для сохранения

Как это:

1. Используйте плагин для вспомогательного помощника:

Я использовал этот JS-плагин (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 и description):

<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 к моему помощнику dropdown и менеджеру этого выбора:

$(".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"));

            });
        });
    }

Итак, теперь, я выбираю автомобиль, я сохраню его описание и идентификатор

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню