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

Question

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

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

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

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

我找到了this solution，但对我来说这两个列表框是如何正确填充的并不明显。我在想在加载部分后我可能会用 JavaScript 做一些事情，我用 AJAX 分别检索 List<RoleUserAssignment> 并根据每个角色的 IsAssigned 属性的值，生成正确的 <option> 标记列表框。但我想知道有没有更好的方法？

另外，我将使用我找到的this solution 实现创建用户和分配角色的功能。

型号：

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

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

要实现这个功能，你可以避免在js中实现，在控制器中实现会更容易。

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

 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>