使用ASP.Net MVC中每行的复选框动态生成列

时间:2016-09-30 10:29:29

标签: c# asp.net-mvc

我正在处理两个数据库表,其中UserDetaisl表包含有关具有一个或多个角色的用户的详细信息,而角色表包含​​角色的名称。我需要生成一个类似于下图的HTML表格。其中Role表中的每个角色都将显示为一列,具有已分配角色的用户将显示为为该单元格勾选的复选框。未分配的角色将显示未选中的复选框。一个用户可以拥有多个角色。

enter image description here

我的课程如下:

public partial class UserDetails
{
    public string username { get; set; }
    public string role { get; set; }

    public virtual Role Role1 { get; set; }
}


public partial class Role
{
    public string Role1 { get; set; }
    public virtual ICollection<UserDetails> UserDetails { get; set; }
}

创建一个可以显示角色选择的ViewModel的想法。

public class RoleSelectionViewModel
{
    public bool Selected { get; set; }
    public bool NotSelected { get; set; }
    public virtual Role Role1 { get; set; }
}

不确定如何将所有这些toegther用于动态生成列。

currentlty以下Controller方法仅列出具有关联角色的表中的所有用户。

    public ActionResult Index()
    {
        var userDetails = db.UserDetails.Include(u => u.Role1);
        return View(userDetails .ToList());
    }

2 个答案:

答案 0 :(得分:1)

您的UserDetails类包含属性string rolevirtual Role Role1,这意味着UserDetails只能包含一个角色。为了选择和分配多个角色,您的模型需要public virtual ICollection<Role> Roles { get; set; }属性。

要生成所需的视图,您需要创建视图模型

public class UserVM
{
    public string UserName { get; set; }
    public List<RoleVM> Roles { get; set; }
}
public class RoleVM
{
    public string RoleName { get; set; }
    public bool IsSelected { get; set; }
}

,您的观点将是

@model List<UserVM>
....
@using (Html.BeginForm())
{
    <table>
        <thead>....</thead>
        <tbody>
            @for(int i = 0; i < Model.Count; i++)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(m => m[i].UserName)
                        @Html.HiddenFor(m => m[i].UserName)
                    </td>
                    @for(int j = 0; j < Model[i].Roles.Count; j++)
                    {
                        <td>
                            @Html.HiddenFor(m => m[i]Roles[j].RoleName)
                            @Html.CheckBoxFor(m => m[i]Roles[j].IsSelected)
                        </td>
                    }
                </tr>
            }
        </tbody>
    </table>
    <input type="submit" ... />
}

由于您展示的模型不符合您的目标,我怀疑您需要对数据库进行更改(您需要UsersRolesUserRoles),以下控制器代码建议它应该是什么样的

public ActionResult Edit()
{
    var roles = db.Roles; // get the collection of all roles
    var users = db.Users.Include(x => x.Roles); // get the collection of all users including their selected roles
    List<UserVM> model = new List<UserVM>();
    foreach (var user in users)
    {
       UserVM u = new UserVM
       {
           UserName = user.username,
           Roles = roles.Select(x => new RoleVM
           {
               RoleName = x.Role1
           }).ToList()
       }
       .... // set the IsSelected property of each RoleVM based existing roles
       model.Add(u);
    }
    return View(model);
}
[HttpPost]
public ActionResult Edit(List<UserVM> model)
{
    // Get the selected roles for each user
    foreach (UserVM user in Model)
    {
        var selectedRoles = user.Roles.Where(x =>x.IsSelected);

答案 1 :(得分:0)

如果您希望用户拥有多个角色,则必须更新您的UserDetails类以获得角色集合,而不仅仅是一个角色。

然后更新您的RoleSelectionViewModel

public class RoleSelectionViewModel
{
    public ICollection<Role> Roles { get; set; } //list of all roles existing in your db for the columns
    public ICollection<UserDetails> Users {get; set;} //list of all users for which you want to set roles
}

然后在控制器中

public ActionResult Index()
{
    var userDetails = db.UserDetails.Include(u => u.Roles).ToList();
    var allRoles = db.Roles.ToList();
    var viewModel = new RoleSelectionViewModel();
    viewModel.Users = userDetails;
    viewModel.Roles = allRoles;
    return View(viewModel);
}

然后,您可以迭代列的角色和Rows的用户,如果用户具有实际列的角色,则可以设置复选框。