Как я мог бы получить выбранный элемент из нескольких динамически добавляемых выпадающих списков Select2?

#c# #jquery #asp.net #jquery-select2

#c# #jquery #asp.net #jquery-select2

Вопрос:

Я работаю над C # Asp.Net веб-приложение, и я пытаюсь добавить возможность динамического добавления некоторых выпадающих списков select2 в нашу форму создания проекта.

До сих пор мне удавалось добавлять один выпадающий список с частичным представлением и возвращать его результаты обратно в контроллер с помощью viewmodel . Я также могу добавить дополнительные выпадающие списки с помощью jquery, и эти выпадающие списки будут правильно искать. Но у меня возникли проблемы с получением результатов от этих дополнительных входов в контроллер.

Методы, которые я пробовал:

  • Добавление части… тег вместо выбора…
  • Изменение выбора asp-for="TeamMembers … для выбора asp-for="TeamMembers[0]... [1][2] и т. Д.
  • Добавление @if … инструкция от контроллера к строке var html
  • Экранирование @ в @if … строка

Частичное представление, которое успешно работает один раз

 @model Waypoints.ViewModels.ProjectsCreateViewModel

<h5>Add Team Members</h5>
<div class="form-group" id="teamMembersAddDiv">
    <select asp-for="TeamMembers" class="project-team-members-enabled form-control">
        @if (null != Model amp;amp; null != Model.TeamMembers)
        {
            foreach (var item in Model.TeamMembers.OrderBy(i => i))
            {
                <option selected="selected">@item</option>
            }
        }
    </select>
</div>
<input type="button" class="btnAdd" value=" " />
 

Javascript, который добавляет выпадающий список select2, который не добавляется в viewmodel

         function addRow() {
            var html = '<select asp-for="TeamMembers" class="project-team-members-enabled form-control">'
                 '@if (null != Model amp;amp; null != Model.TeamMembers){foreach (var item in Model.TeamMembers.OrderBy(i => i)){<option selected="selected">@item</option>}}'
                  '</select>'
            $(html).appendTo($("#teamMembersAddDiv"))

            $('.project-team-members-enabled').select2({
            tokenSeparators: [","],
            minimumInputLength: 1,
            ajax: {
                delay: 150,
                url: '@Url.Action("TypeaheadSearch", "Profiles")',
                dataType: 'json',
                async: true,
                data: function (params) {
                    return {
                        pageSize: 10,
                        pageNum: params.page || 1,
                        searchTerm: params.term
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 10) <= data.total
                        }
                    };
                },
                cache: true
            },
            createTag: function (params) {
                var term = $.trim(params.term).replace(/wS*/g, function (txt) {
                    return txt.charAt(0).toUpperCase()  
                        txt.substr(1).toLowerCase();
                });

                if (term === '') {
                    return null;
                }
                if (!/^[a-zA-Z0-9_] ( [a-zA-Z0-9_] )*$/g.test(term)) {
                    return null;
                }

                return {
                    id: term,
                    text: term

                }
            }
        });
        };
 

Члены команды Viewmodel

 TeamMembers = new List<string>();
...
public IList<string> TeamMembers { get; set; }
 

Я бы предположил, что есть какой-то способ получить выбранный текстовый элемент из выпадающего списка и сохранить его в viewmodel до того, как viewmodel будет отправлен на контроллер. Но я пока не смог его найти, и я надеюсь, что кто-то еще может знать.

Комментарии:

1. Вместо того, чтобы иметь несколько <select> «s» для поля членов команды, вы пробовали сделать 1 <select> и сделать его множественным выбором select2 ? Тогда вам может повезти больше, привязав его к вашей ViewModel, которая представляет собой список, а не отдельные поля

2. Да, это был первоначальный план, и он сработал. Но поскольку у нас также есть поле ввода тега, рядом с которым находится еще один multiselect, это было немного визуально запутанным. Итак, следующим планом были индивидуальные входные данные для каждого члена команды.