在 ASP.NET Core MVC 中将数据加载到 Bootstrap Dual Listbox

Question

我正在开发 ASP.NET Core 2.2 MVC 应用程序，并尝试实现Bootstrap Dual Listbox 插件以进行角色选择。 我有_UserEditorPartial.cshtml视图，可用于为用户分配角色（右侧的列表框将包含分配的角色）：

（部分有更多可编辑的字段，但我认为这些无关紧要）

现在，部分包含与我在父页面上选择的用户相关联的数据。 当我 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>

ViewUserEditorPartial 操作：

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

    return PartialView("_UserEditorPartial", userEditing);
}

Answer 1

我正在努力解决的是如何确保属于用户的角色最终出现在右侧的列表框中。

要实现这个function，可以避免在js中实现，在controller中实现会更容易。

可以先获取用户所属角色的RoleID数据列表，然后将列表放入ViewUserEditorPartial动作中的ViewData中，然后在绑定ViewUserEditorPartial时将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 model 中添加名为SelectedRoles的List<int>类型字段以存储所选角色更好。

 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>