将数据加载到 ASP.NET Core MVC 中的 Bootstrap 双列表框

Question

我正在开发一个 ASP.NET Core 2.2 MVC 应用程序，并且正在尝试为角色 selection 实现 Bootstrap Dual Listbox plugin。我有 _UserEditorPartial.cshtml 视图，可用于将角色分配给用户（右侧的列表框将包含分配的角色）：

（部分有更多的可编辑字段，但我认为那些是不相关的）

现在，部分包含与我在父页面上 selected 的用户相关的数据。当我 select 用户时，我只是将 UserID 传递给 ViewUserEditorPartial 并查询数据库以检索可用角色的整个列表，如果用户将 IsAssigned 属性标记为 true属于角色。所以现在，我有一个角色列表，我知道哪个角色属于用户。

我正在努力解决的问题是如何确保属于用户的角色最终出现在右侧的列表框中。如果用户属于 Role2 和 Role4，我希望我的视图是这样生成的：

我找到了，但我不清楚如何正确填充两个列表框。我在想加载部分后我可能会用 JavaScript 做一些事情，我用 AJAX 分别检索 List<RoleUserAssignment> 并且，取决于 IsAssigned 属性为每个角色在正确的列表框中生成 <option> 标记。但是我想知道有没有更好的方法？

此外，我将实现创建用户并使用我发现的为他们分配角色的功能。

型号：

public class Role
{
    public int RoleID { get; set; }
    public string RoleName { get; set; }
}

public class User 
{
    public int UserID { get; set; }
    public string UserName { get; set; }
}

public class RoleUserAssignment
{
    public RoleUserAssignment()
    {
        Role = new Role();
        User = new User();
    }
    
    public Role Role { get; set; }
    public User User { get; set; }
    public bool IsAssigned { get; set; } //true if user has role
}

public class UserEditing
{
    public UserEditing()
    {
        RoleUserAssignments = new List<RoleUserAssignment>();
    }

    public List<RoleUserAssignment> RoleUserAssignments { get; set; }
}

HTML

@model UserEditing
<script>
    $(document).ready(function () {
        $('#rolesSelection').bootstrapDualListbox({});
    });
</script>
<form id="userEditorForm">
    <div>Roles</div>
    <select id="rolesSelection" class="form-control" class="form-control" asp-for="@Model.RoleUserAssignments" asp-items="@(new SelectList(Model.RoleUserAssignments, "Role.RoleID", "Role.RoleName"))"
            multiple="multiple">
    </select>
</form>

ViewUserEditor部分动作：

[HttpGet]
public IActionResult ViewUserEditorPartial(int UserID)
{
    UserEditing userEditing = new UserEditing();
    userEditing.RoleUserAssignments = _userAdmin.GetRoleUserAssignmentsByUserID(_appSettings.MOPConfigConnectionString, UserID);

    return PartialView("_UserEditorPartial", userEditing);
}

Answer 1

What I'm struggling with is figuring out how to make sure that the roles belonging to the user end up in in the listbox on the right.

实现这个功能，可以避免在js中实现，在controller中实现会更容易

可以先获取用户所属角色的RoleID个数据列表，然后将这些列表放入ViewData中ViewUserEditorPartial动作，然后在绑定[=50时，将ViewData的值绑定到asp-for属性=].

这是我的演示：

[HttpGet]
public IActionResult ViewUserEditorPartial(int UserID)
{
    UserEditing userEditing = new UserEditing();
    var roleUserAssignData = _userAdmin.GetRoleUserAssignmentsByUserID(_appSettings.MOPConfigConnectionString, UserID);
    userEditing.RoleUserAssignments = roleUserAssignData;
    
   // get the data which IsAssigned field are true and select the RoleID of each data. 
    ViewData["SelectedRoles"] = roleUserAssignData.Where(x => x.IsAssigned).Select(x => x.Role.RoleID).ToList(); 
    return PartialView("_UserEditorPartial", userEditing);
}

_UserEditor局部视图：

 @model UserEditing
    <script>
        $(document).ready(function () {
            $('#rolesSelection').bootstrapDualListbox({});
        });
    </script>
    <form id="userEditorForm">
        <div>Roles</div>
        <select id="rolesSelection" class="form-control" class="form-control" 
                asp-for="@ViewData["SelectedRoles"]" 
                asp-items="@(new SelectList(Model.RoleUserAssignments, "Role.RoleID", "Role.RoleName"))"
                multiple="multiple">
        </select>
    </form>

更新

如果允许，在 UserEditing 模型中添加名为 SelectedRoles 的 List<int> 类型字段以存储 selected 角色更好。

 public class UserEditing
    {
        public UserEditing()
        {
            RoleUserAssignments = new List<RoleUserAssignment>();
        }
        public List<int> SelectedRoles { get; set; }
        public List<RoleUserAssignment> RoleUserAssignments { get; set; }
    }

在ViewUserEditorPartial动作中，将ViewData语句改成如下：

userEditing.SelectedRoles = roleUserAssignData.Where(x => x.IsAssigned).Select(x => x.Role.RoleID).ToList();

_UserEditor局部视图：

<form id="userEditorForm">
    <div>Roles</div>
    <select id="rolesSelection" class="form-control" asp-for="@Model.SelectedRoles" 
            asp-items="@(new SelectList(Model.RoleUserAssignments, "Role.RoleID", "Role.RoleName"))"
            multiple="multiple">
    </select>
</form>

将数据加载到 ASP.NET Core MVC 中的 Bootstrap 双列表框

Loading data into Bootstrap Dual Listbox in ASP.NET Core MVC

html

javascript

asp.net-mvc

asp.net-core

bootstrap-duallistbox

更新