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

Posted 2023-05-07

【中文标题】从 select2 多选中获取值并将它们写入模型属性

【英文标题】：Get value from select2 multiselect and write them in a Model property

【发布时间】：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，我不确定我理解您的问题是什么？

是的，我用的……我还没把页面上的所有代码都报出来

【参考方案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 示例。

祝你好运！