如何设置 DropDownListFor 中选择的所有元素并添加 CheckBox 等图标

如何解决如何设置 DropDownListFor 中选择的所有元素并添加 CheckBox 等图标

我正在寻找如何在 asp.net core 中设置 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 提前致谢

解决方法

您可以使用引导程序多选插件来显示带有复选框的 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 获取selected 值，然后基于它为DropDownlist 选项添加selected 属性。代码如下：

        <div class="form-group">
            @{ 
                var defaultselected = string.Join(",",Model.SubmittedFloors);
            }
            <input type="hidden" value="@defaultselected" id="hid_defaultselected" />
            @Html.DropDownListFor(m => m.SubmittedFloors,@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,});
    });
</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",}
        };

        return View(builder);
    }

结果如下：