#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, это было немного визуально запутанным. Итак, следующим планом были индивидуальные входные данные для каждого члена команды.