ASP.NET 带有 Duallistbox 的核心

Question

在我的 ASP.NET Core (.NET5) 项目中，我使用 Bootstrap Duallistbox (bootstrap4-duallistbox@4.0.2)。在 Razor 页面中，我有一个包含 Departments 字段作为 List<Department> 的模型，在该页面中，我编写了以下代码

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

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

ViewBag 来自这个函数

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

如果我检查这个 ViewBag，我可以看到 SelectedValues.

中有一些值

结果是这 2 个列表框，但没有项目被 select编辑。

此外，如果我 select 一些项目并按下提交按钮，变量 Departments 没有任何 selected 值。

你有什么办法可以解决这个问题吗？

更新

我已经更改了函数PopulateDepartmentsDropDownList。

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

所以，现在我可以看到 selected 项目了。

当我按下提交按钮时，select编辑的值不在模型中。为此，我添加了另一个列表框

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

因此，现在单击提交后，我将所有 selected 项添加到新列表框中，但模型中不存在这些值。

知道为什么吗？

Answer 1

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

您应该使用selectedDepartment.ID来传递所选项目

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

是否要将所选项目传递给控制器操作？您可以使用 jquery 获取选定的值，然后将其传递 。

你可以查看我的演示：

控制器：

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

查看：

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

结果：

ASP.NET 带有 Duallistbox 的核心

ASP.NET Core with Duallistbox

c#

asp.net-core

bootstrap-duallistbox

更新