将对象列表传递给 Controller

Question

I have a ViewModel named CreateRoleViewModel which contains the items shown below. On the view, I'm iterating through a list of permissions and displaying them. What I'm trying to accomplish is to allow a user to create a new role and add permissions to that role. I've been able to successfully pass all data to the controller except the permissions. Hopefully I'm not confusing anyone. I've tried to use a for loop (which did't produce correct results) and a foreach loop, which did produce the correct results (meaning displayed all permissions currently available). I realize I'm going to also, most likely need to update my domain model for Permissions to include columns for View, Modify etc.

CreateViewModel

public class CreateRoleViewModel
{
    [Required]
    public string RoleName { get; set; }
    public string RoleDescription { get; set; }
    public List<Permissions> Permissions { get; set; }
    public bool AllowViewAccess { get; set; }
    public bool AllowModifyAccess { get; set; }
    public CreateRoleViewModel()
    {
        Permissions = new List<Permissions>();
    }
}

PermissionsController

[Route("Administration/Permissions/CreateRole")]
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult CreateRole(CreateRoleViewModel newRole)
    {
        try
        {
            var test = newRole;
            return RedirectToAction(nameof(Index));
        }
        catch
        {
            return View();
        }
    }

View

<form method="post" asp-action="CreateRole">

        <div class="form-group col-6" style="padding-left:0">
            <label asp-for="RoleName"></label>
            <input asp-for="RoleName" class="form-control" />
            <span asp-validation-for="RoleName" class="text-danger"></span>
        </div>
        <div class="form-group col-6" style="padding-left:0">
            <label asp-for="RoleDescription"></label>
            <input asp-for="RoleDescription" class="form-control" />                
        </div>
        <div class="form-group ">
            <h4>Permissions</h4>
            <div class="card">
                <div class="card-header">
                    <input type="checkbox" class="form-check-input p-2" id="selectAll">
                    <label class="form-check-label" for="selectAll">Select All<span style="font-weight:bold;font-style:italic;"> (This will allow read/write access to ALL selected items.)</span></label>
                </div>
            </div>
            <!--Permissions should go here-->
            <div class="card-body border">
                @foreach (var item in Model.Permissions)
                {
                <div class="row" style="border-radius:3px;border-top:2px solid gray;border-bottom:2px solid gray;padding:15px;">
                    <div class="col-8">
                        <input type="checkbox" class="form-check-input p-2" id="select">
                        <label class="form-check-label" for="select" style="font-weight:bold;">@item.PermissionName</label>
                        <p style="color:gray;">@item.PermissionDescription</p>
                    </div>
                    <div class="col-2">
                        <input type="checkbox" class="form-check-input p-2" id="readOnly" asp-for="AllowViewAccess">
                        <label class="form-check-label" for="readOnly">View</label>
                    </div>
                    <div class="col-2">
                        <input type="checkbox" class="form-check-input p-2" id="readWrite" asp-for="AllowModifyAccess">
                        <label class="form-check-label" for="readWrite">Modify</label>
                    </div>
                </div>
                }


            </div>
            <div asp-validation-summary="All" class="text-info"></div>
            <button style="background-color: #6987D5;color:white;" class="btn">Save</button>
            <button class="btn" style="background-color:lightgray;border:1px solid darkgray">Cancel</button>
        </div>
    </form>

Answer 1

From your description and the view code, I think you should put the "AllowViewAccess " and "AllowModifyAccess " in the Permissions class, because the role have separate "View" or "Modify" access to different permissions. Based on your codes, I made an example:

Model:

public class CreateRoleViewModel
{
    [Required]
    public string RoleName { get; set; }
    public string RoleDescription { get; set; }
    public List<Permissions> Permissions { get; set; }

    public CreateRoleViewModel()
    {
        Permissions = new List<Permissions>();
    }
}

public class Permissions
{
    public string PermissionName { get; set; }
    public string PermissionDescription { get; set; }
    public bool AllowViewAccess { get; set; }
    public bool AllowModifyAccess { get; set; }
}

View:

@model CreateRoleViewModel

@{ 
    var i = 0;
}

<form method="post" asp-action="CreateRole">

    <div class="form-group col-6" style="padding-left:0">
        <label asp-for="RoleName"></label>
        <input asp-for="RoleName" class="form-control" />
        <span asp-validation-for="RoleName" class="text-danger"></span>
    </div>
    <div class="form-group col-6" style="padding-left:0">
        <label asp-for="RoleDescription"></label>
        <input asp-for="RoleDescription" class="form-control" />
    </div>
    <div class="form-group ">
        <h4>Permissions</h4>
        <div class="card">
            <div class="card-header">
                <input type="checkbox" class="form-check-input p-2" id="selectAll">
                <label class="form-check-label" for="selectAll">Select All<span style="font-weight:bold;font-style:italic;"> (This will allow read/write access to ALL selected items.)</span></label>
            </div>
        </div>
        <!--Permissions should go here-->
        <div class="card-body border">
            @foreach (var item in Model.Permissions)
            {
                <div class="row" style="border-radius:3px;border-top:2px solid gray;border-bottom:2px solid gray;padding:15px;">
                    <div class="col-8">
                        <input type="checkbox" class="form-check-input p-2" id="select">
                        <input type="hidden" asp-for="@Model.Permissions[i].PermissionName">
                        <label class="form-check-label" for="select" style="font-weight:bold;">@item.PermissionName</label>
                        <p style="color:gray;">@item.PermissionDescription</p>
                        <input type="hidden" asp-for="@Model.Permissions[i].PermissionDescription">
                    </div>
                    <div class="col-2">
                        <input type="checkbox" class="form-check-input p-2" id="readOnly" asp-for="@Model.Permissions[i].AllowViewAccess">
                        <label class="form-check-label" for="readOnly">View</label>
                    </div>
                    <div class="col-2">
                        <input type="checkbox" class="form-check-input p-2" id="readWrite" asp-for="@Model.Permissions[i].AllowModifyAccess">
                        <label class="form-check-label" for="readWrite">Modify</label>
                    </div>
                </div>
                i++;
            }


        </div>
        <div asp-validation-summary="All" class="text-info"></div>
        <button style="background-color: #6987D5;color:white;" class="btn">Save</button>
        <button class="btn" style="background-color:lightgray;border:1px solid darkgray">Cancel</button>
    </div>
</form>

Controller:

public IActionResult Index()
{
    CreateRoleViewModel createRoleViewModel = new CreateRoleViewModel();
    return View(createRoleViewModel);
}

//[Route("Administration/Permissions/CreateRole")]
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult CreateRole(CreateRoleViewModel newRole)
{
    try
    {
        var test = newRole;
        return RedirectToAction(nameof(Index));
    }
    catch
    {
        return View();
    }
}

Result: