如何从多个动态添加的Select2下拉列表中获取所选项目?

时间:2019-04-18 16:49:31

标签: c# jquery asp.net jquery-select2

我正在使用C#Asp.Net Web应用程序,并且尝试在项目创建表单中添加动态添加一些select2下拉列表的功能。

到目前为止,我已经能够添加带有部分视图的单个下拉列表,并使用viewmodel将其从下拉列表中返回到控制器。我还可以使用jquery添加其他下拉列表,并且这些下拉列表可以正确搜索。但是我很难从那些额外的输入中获取结果到控制器中。

我尝试过的方法:

  • 附加部分...标记而不是select ...
  • 更改选择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 && 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="+" />

添加了select2下拉列表的Javascript,但未添加到视图模型中

        function addRow() {
            var html = '<select asp-for="TeamMembers" class="project-team-members-enabled form-control">'
                +'@if (null != Model && 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(/\w\S*/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

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

我假设有某种方法可以从下拉列表中获取选定的文本项,然后在将视图模型发布到控制器之前将其保存到视图模型中。但是到目前为止,我还找不到它,我希望其他人可能知道。

0 个答案:

没有答案