从 select2 多选中获取值并将它们写入模型属性答案

【问题标题】：Get value from select2 multiselect and write them in a Model property从 select2 多选中获取值并将它们写入模型属性
【发布时间】：2021-01-01 23:56:51
【问题描述】：

这是我的观点，我有一个多选下拉列表：

    @model Model.FilterPresenter
    
                <div class="col-sm-1" style="display: inline-block">
                    <label class="individua-filter-name">Departement</label>
                    <div class="inputGroupContainer">
                        <div class="input-group">
                            @Html.DropDownListFor(model => Model.DepFilter.SelectedValue, Model.DepFilter.Values,
 new {id = "DepFilter", @multiple = "true"})
                        </div>
                    </div>
                </div>
    <script>
        $(document).ready(function () {
            multiselectFunction($('#DepFilter'), 90);
    
            $("button").css('text-shadow', 'none');
        });
    
        function multiselectFunction(element, size) {
            element.multiselect({
                disableIfEmpty: true,
                disabledText: ' -- ',
                maxHeight: 200,
                buttonWidth: '' + size + 'px',
                onChange: function () {
                    var selectEle = element.find("option:selected");
                    if (selectEle.length > 0) {
                        element.next().find("button").addClass('selectedFilter');
                    }
                    else {
                        element.next().find("button").removeClass('selectedFilter');
                    }
                },
                nonSelectedText: 'None',
                allSelectedText: 'All',
                numberDisplayed: 2,
                onSelectedText: 'Selected'
            });
        }
    
    </script>

这是 FilterPresenter 类：

public class FilterPresenter
    {
        public FilterPresenter(List<SelectListItem> values, string selectedValue)
        {
            this.SelectedValue = selectedValue;
            this.Values = values;
        }

        public FilterPresenter()
        {
            this.SelectedValue = null;
            this.Values = new List<SelectListItem>();
        }

        public string SelectedValue { get; set; }

        public List<SelectListItem> Values { get; set; }

        public string[] multipleSelected { get; set; }
    }

在这里我看到可以恢复这些值： https://jsfiddle.net/Shady_Alset/e5tg5kLr/

问题是否可以检索所选元素的 id，然后在我的 multipleSelected 属性中增强它们？

【问题讨论】：

在您发布的代码中您没有使用 select2，我不确定我理解您的问题是什么？
是的，我用的……我还没把页面上的所有代码都报出来

标签： c# asp.net-mvc jquery-select2

【解决方案1】：

根据我的理解，你真正需要知道的是：

如何渲染 C# 对象以供日后在 js 代码中使用.

在FilterPresenter 中定义一个函数。这个函数会返回一个序列化的字符串Values：

// using Newtonsoft.Json;
// using Newtonsoft.Json.Serialization;

public string GetSerialized()
{
    return JsonConvert.SerializeObject(
        this.Values, 
        Formatting.None, 
        new JsonSerializerSettings {
            NullValueHandling = NullValueHandling.Ignore, 
            ContractResolver = new CamelCasePropertyNamesContractResolver()
        }
    );
}

如果不是必须使用@Html.DropDownListFor()，请不要使用它。您提供的示例 jsFiddle (https://jsfiddle.net/Shady_Alset/e5tg5kLr/) 是您的起点。如果您必须使用@Html.DropDownListFor()，请参阅第 1 点。 3.

在您的 HTML 中：

<input type="hidden" id="test" />

在你的<script> 标签中：

var list = JSON.parse('@Html.Raw(Model.GetSerialized())'); // <-- this line is the key

Model.GetSerialized() 返回一个 C# 字符串（序列化值）。
Html.Raw() 在 raw html 中呈现字符串。
一对' 使结果为正确的js字符串。
JSON.parse() 将序列化的json字符串解析成js数组。

一旦找到将 C# 对象转换为 js 对象的方法，就可以在 js 代码中使用它。在此示例中，您需要将其作为select2 中的选项之一传递：

$('#test').select2({
    data: list,
    multiple: true
});

如果必须使用@Html.DropDownListFor() 渲染下拉列表，则需要获取下拉列表的选定ID，并与C# 对象创建的js 对象匹配。现在你可以回到第 2 点，看看 js 代码如何做到这一点。

This gist 包含说明上述要点的最小 MVC 示例。

祝你好运！

【讨论】：