带有双列表框的 ASP.NET Core

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 个列表框，但没有选择任何项目。

另外，如果我选择了一些项目并按下提交按钮，变量Departments 没有任何选定的值。

您有什么想法可以解决这个问题吗？

更新

我更改了函数PopulateDepartmentsDropDownList。

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

所以，现在我可以看到选定的项目了。

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

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

所以，现在单击提交时，我将所有选定的项目添加到新列表框中，但模型中不存在这些值。

有什么想法吗？

Answer 1

结果是这 2 个列表框，但没有选择任何项目。

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

另外，如果我选择了一些项目并按下提交按钮，变量 Departments 没有任何选定的值。

您想将所选项目传递给控制器​​操作吗？您可以使用 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>
}

结果：