如何设置在 DropDownListFor 中选择的所有元素并添加像复选框这样的图标

Question

正在寻找如何在 asp.net 核心

中设置在 DropDownListFor 中选择的所有元素

@Html.DropDownListFor(m => m.SubmittedFloors,
new SelectList(Model.ProfileList, "Id", "Name",Model.FloorList),
"-- Please Select --",
new { @multiple = "multiple", @class = "form-control multiselect", @style = "height:220px" })

<script type="text/javascript">
    $(function () {
        $('.multiselect').multiselect({
            includeSelectAllOption: true
        });
    });
</script>

在我的模型构建器中：

public class FloorBuilder{
public List<string> SubmittedFloors { get; set; }
public List<GenericType> FloorList { get; set; }
public class GenericType
{
public string Name { get; set; }
public string Id { get; set; }
public GenericType(string id,string name)
        {
            Id = id;
            Name = name;
        }

    }
Model.FloorList =FloorService.getFloors()

}

数据在 DropDownListFor 中正确显示，但未选择元素以及是否有办法在每个项目旁边添加一个复选框。 1 提前致谢

Answer 1

您可以使用 bootstrap 多选插件来显示带复选框的 DropDownList。

示例代码如下：

public class FloorBuilder
{
    public List<string> SubmittedFloors { get; set; } //use this property to store the selected floor.
    public List<GenericType> FloorList { get; set; }
}
public class GenericType
{
    public string Name { get; set; }
    public string Id { get; set; }
    public GenericType(string id, string name)
    {
        Id = id;
        Name = name;
    } 
}

控制器：

    public IActionResult Index6()
    {
        //set initial data.
        FloorBuilder builder = new FloorBuilder()
        {
            SubmittedFloors = new List<string>(),
            FloorList = new List<GenericType>()
            {
                new GenericType("1001", "One"),
                new GenericType("1002", "Two"),
                new GenericType("1003", "Three"),
                new GenericType("1004", "Four"),
                new GenericType("1005", "Five"),
            }
        };

        return View(builder);
    }
    [HttpPost]
    public IActionResult Index6(FloorBuilder floorBuilder)
    {
        //do something
        return View();
    }

查看页面：

@model WebApplication6.Models.FloorBuilder;
<div class="row">
    <div class="col-md-4">
        <form asp-action="Index6">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div> 
            <div class="form-group">
                @Html.DropDownListFor(m => m.SubmittedFloors, new SelectList(Model.FloorList, "Id", "Name"),
                new { @multiple = "multiple", @class = "form-control multiselect", @id = "ddlselect" })
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
             
        </form>
    </div>
</div>
@section Scripts{
    <style>
        .caret {
            display: none !important;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
    <script type="text/javascript">
        $(function () {  
            $("#ddlselect").multiselect({
                includeSelectAllOption: true,
                nonSelectedText: "-- Please Select --", 
            });
        });
    </script> 
}

结果如下：

已更新：

要设置默认选定值，您可以使用隐藏字段来存储选定值。然后，当页面加载时，使用 JQuery 获取选定的值，然后基于它为 DropDownlist 选项添加选定的属性。代码如下：

        <div class="form-group">
            @{ 
                var defaultselected = string.Join(",", Model.SubmittedFloors);
            }
            <input type="hidden" value="@defaultselected" id="hid_defaultselected" />
            @Html.DropDownListFor(m => m.SubmittedFloors, new SelectList(Model.FloorList, "Id", "Name"),
            new { @multiple = "multiple", @class = "form-control multiselect", @id = "ddlselect" })
            <input type="submit" value="Create" class="btn btn-primary" />
        </div>

JavaScript 脚本：

<script type="text/javascript">
    $(function () {  
        //use a hidden field to store the default selected value. 
        var defaultvalue = $("#hid_defaultselected").val().split(",");
        //according to the default selected value to add the selected attribute for the DropDownList options.
        $("#ddlselect option").each(function (index, item) {
            if (jQuery.inArray($(item).val(), defaultvalue) != -1) {
                $(item).attr('selected', 'selected');
            }
        });
        //use bootstrap multiselect.
        $("#ddlselect").multiselect({
            includeSelectAllOption: true,
            nonSelectedText: "-- Please Select --", 
        });
    });
</script>

控制器：

    public IActionResult Index6()
    {
        FloorBuilder builder = new FloorBuilder()
        {
            SubmittedFloors = new List<string>() {"1001","1002", "1005" }, //set the default selected value.
            FloorList = new List<GenericType>()
            {
                new GenericType("1001", "One"),
                new GenericType("1002", "Two"),
                new GenericType("1003", "Three"),
                new GenericType("1004", "Four"),
                new GenericType("1005", "Five"),
            }
        };

        return View(builder);
    }

结果是这样的：

如何设置在 DropDownListFor 中选择的所有元素并添加像复选框这样的图标

How Set all element selected in DropDownListFor and add icon like checkedBox

c#

asp.net

asp.net-core

dropdownlistfor