Javascript 将数据加载到ASP.NET核心MVC中的引导双列表框中

我正在开发一个ASP.NET Core 2.2 MVC应用程序，并试图实现角色选择。我有

\u UserEditorPartial.cshtml

视图，可用于为用户分配角色（右侧的列表框将包含分配的角色）：

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

现在，该部分包含与我在父页面上选择的用户关联的数据。选择用户时，我只需将UserID传递给

viewusereditor或partial

，然后查询数据库以检索可用角色的整个列表，如果用户属于该角色，则将

IsAssigned

属性标记为true。现在，我有一个角色列表，我知道哪个角色属于用户

我正在努力弄清楚如何确保属于用户的角色最终出现在右侧的列表框中。如果用户属于

Role2

和

Role4

，我希望生成如下视图：

我已经找到了，但不清楚这两个列表框是如何正确填充的。我在想，在加载部分之后，我可能可以用JavaScript做些什么，在这里，我用AJAX分别检索

列表

，并根据每个角色的

IsAssigned

属性的值，在正确的列表框中生成

标记。但我想知道有没有更好的方法

此外，我还将实现创建用户的功能，并使用我找到的资源为他们分配角色

型号：

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

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

要实现此功能，您可以避免在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);
}

_用户编辑或部分视图：

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

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

在ViewUserEditorPartial action中，将ViewData语句更改为以下内容：

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

_用户编辑或部分视图：

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

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

角色

谢谢，这很有效！在这种情况下，使用ViewData是否比将

SelectedRoles

list作为

UserEditing

view模型中的属性更可取？@Lukas，如果您的代码允许您将

SelectedRoles

类型的

list

字段添加到

UserEditing

模型中，那么我认为这是一个更好的选择。我在回复中更新了这个方法，请参考。

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