Search code examples
c#asp.net-corebootstrap-duallistbox

ASP.NET Core with Duallistbox

In my ASP.NET Core (.NET5) project, I use Bootstrap Duallistbox (bootstrap4-duallistbox@4.0.2). In the Razor page, I have a model that include Departments field as a List<Department> and in the page, I wrote the following code

<select id="Departments" asp-for="Departments" class="duallistbox" 
        multiple="multiple" 
        asp-items="ViewBag.DepartmentID">
</select>

<script>
    $('.duallistbox').bootstrapDualListbox();
</script>

The ViewBag is coming from this function

private void PopulateDepartmentsDropDownList(object selectedDepartment = null)
{
    var departmentsQuery = _department.ListAllQuerableAsync();
    ViewBag.DepartmentID = new SelectList(departmentsQuery, "ID", "Name", 
                                          selectedDepartment);
}

If I inspect this ViewBag, I can see there is some values in the SelectedValues.

enter image description here

The result is this 2 listboxes but no items are selected.

enter image description here

Also, if I select some items and press the submit button, the variable Departments doesn't have any selected values.

Do you have any ideas how I can fix this issues?

Update

I have changed the function PopulateDepartmentsDropDownList.

private void PopulateDepartmentsDropDownList(List<long> selectedDepartment = null)
{
    var departmentsQuery = _department.ListAllQuerableAsync().ToList();
    ViewBag.DepartmentID = new MultiSelectList(departmentsQuery, "ID", "Name", 
                                               selectedDepartment);
}

So, now I can see the selected items.

enter image description here

When I press the submit button, the selected values are not in the model. For this reason, I added another listbox

<select id="Departments" asp-for="Departments"></select>
<script>
    $('.duallistbox').bootstrapDualListbox();
    $('#editButton').click(function () {
        $("[id*=bootstrap-duallistbox-selected-list_] option").each(function () {
            $('#Departments').append(
               new Option($(this).text(), $(this).val(), true, true)
            );
        });
        $("form").submit();
    })
</script>

So, now when the submit is clicked, I add all the selected items in the new listbox but those values are not present in the model.

Any ideas why?

Solution

  • The result is this 2 listboxes but no items are selected.

    You should use selectedDepartment.ID to pass the selected item

    Also, if I select some items and press the submit button, the variable Departments doesn't have any selected values.

    Do you want to pass the selected items to controller action? You can use jquery to get the selected value and then pass it.

    You can check my demo:

    Controller:

    public IActionResult Index()
    {
        var selectedDepartment = new Department() { ID = 2, Name = "name2" };
        var departmentsQuery = new List<Department>()
        {
            new Department{ ID=1,Name="name1"},
            new Department{ ID=2,Name="name2"},
            new Department{ ID=3,Name="name3"},
        };
        ViewBag.DepartmentID = new SelectList(departmentsQuery, "ID", "Name",selectedDepartment.ID);
        return View();
    }

    [HttpPost]
    public IActionResult GETIT(List<Department> department)
    {
        return RedirectToAction("Index");
    }

    View:

    @model Department
<select id="Departments" class="duallistbox" multiple="multiple"
    asp-items="ViewBag.DepartmentID">
</select>

<div>
    <input type="button" value="submit" id="PassValue" />
</div>

@section Scripts
{
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- plugin -->
<script src="https://www.virtuosoft.eu/code/bootstrap-duallistbox/bootstrap-duallistbox/v3.0.2/jquery.bootstrap-duallistbox.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.virtuosoft.eu/code/bootstrap-duallistbox/bootstrap-duallistbox/v3.0.2/bootstrap-duallistbox.css">
<script>
    $('.duallistbox').bootstrapDualListbox();
    $("#PassValue").click(function () {
        var Dep = [];
        $("[id*=bootstrap-duallistbox-selected-list_] option").each(function () {
            var data = {
                ID: $(this).val(),
                Name: $(this).text()
            };
            Dep.push(data);
        });

        var model = {
            department: Dep
        };
        $.ajax({
            type: 'post',
            dataType: 'json',
            url: '/Home/GETIT',
            data: model,
            success: function () {
            }
        });
    });
</script>
}

    Result:

    enter image description here