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

Question

am looking how to set all element selected in DropDownListFor in asp.net core

@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>

In my model builder:

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()

}

the data are showing in DropDownListFor correctly , but the elements not selected and if there is a way to add a boxcheck on next to every item. 1 thanks in advance

Answer 1

You could use the bootstrap multiselect plugin to display the DropDownList with checkboxes.

Sample code as below:

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;
    } 
}

Controller:

    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();
    }

View Page:

@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> 
}

The result as below:

Updated:

To set the default selected value, you could use a hidden field to store the selected value. Then, when page load, use JQuery to get the selected value, and then, based on it to add selected attribute for the DropDownlist options. Code like this:

        <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 scripts:

<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> 

Controller:

    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);
    }

The result like this: