Passing List of Objects to 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>

Take a look at this: https://stackoverflow.com/a/29554416/493557 — G_P, Jun 10 '20 at 17:13
You cant bind to a collection using a foreach loop just FYI. So that is why it is blank. The comment above has basically what you are needing to do. — mathis1337, Jun 10 '20 at 17:20
@G_P, Thank you for your response. I did search SO for assistance but apparently I didn't use the correct wording LOL. mathis1337, also thank you for your input. I had a brain fart and your response makes complete sense. — FrostBite79, Jun 10 '20 at 17:56

score 0 · Accepted Answer · answered Jun 11 '20 at 07:43

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:

That is perfect and exactly what I'm looking for. Thank you very much for the excellent breakdown of code. — FrostBite79, Jun 11 '20 at 16:17

Passing List of Objects to Controller

1 Answers1