Unable to Bind Multiple Generated Html.DropDownListFor to ViewModel

Question

This is my first post! Apologies in advance if I've botched the process, and thank you for reading.

I'm making an admin tool in MVC to allow a user to map association of a few data types. I want the user to select how the data are associated using dynamically created dropdownlist controls.

The Data Types: I'm using four data types (I've changed the type names to make it more relatable, but the principle is the same). The Data Types: DeviceType , UserType and PermissionSet are pretty basic plain old CLR objects. For every combination of DeviceType and UserType , there needs to be an associated PermissionSet . The associations will be kept in a fourth datatype, DeviceUserPermissions , which is like a bridge table, and maps to one in the database.

Scenario: This scenario comes after the user has selected a particular DeviceType and is now directed to an edit page where they can select which PermissionSet to apply to each UserType . So each UserType will be listed and have a dropdownlist to select a PermissionSet for that UserType . The user should be able to save the associations, and the next time the page is loaded, the default selected items for those dropdownlists should reflect that saved data.

Issue: I can't get the selected items in the dropdown lists to bind to the view model when the form is submitted. The dropdown lists are created properly for each user, and the last stored Permission is pre-selected for each. But when the form is submitted the view model that is received is like a newly created object, no real values. I feel like I'm overlooking something very simple.

Controller:

[HttpGet]
public ActionResult EditPermissions(int deviceId)
{
        var viewModel = new EditDeviceViewModel();

        viewModel.Permissions = _permissionDataAccess.GetAll().ToList();
        viewModel.Users = _userDataAccess.GetAll().ToList();
        viewModel.DeviceUsersPermissions = _deviceUserPermissionDataAccess.GetByDeviceId(deviceId);

        viewModel.DeviceId = deviceId;
        return View(viewModel);
}

// When form is submitted, 'model' is empty as if newly created 
[HttpPost]
public ActionResult Editpermissions(EditDeviceViewModel model)
{
        foreach (var deviceUser in model.DeviceUsers)
        {
                _DeviceUserDataAccess.UpdateDeviceUser(deviceUser);
        }
        return View();
}

ViewModel:

public class EditDeviceViewModel
{
        public EditDeviceViewModel()
        {
                Users = new List<User>();
                SelectedDeviceUserPermissionss = new List<DeviceUserPermissions>();
        }

        public int DeviceId { get; set; }
        public List<User> Users { get; set; }
        public List<Permission> Permissions { get; set; }
        public IEnumerable<DeviceUserPermissions> DeviceUserPermissionss { get; set; }
        public List<DeviceUserPermissions> SelectedDeviceUserPermissionss { get; set; }

}

View:

    @using (Html.BeginForm(actionName: "EditPermissions", controllerName: "Device", method: FormMethod.Post))
    {
    <table>
            @{
                    foreach (var User in Model.Users)
                    {
                            var deviceUserPermission = Model.DeviceUserPermissions.FirstOrDefault(x => x.UserId == User.UserId) ?? new RulesEngine.DAL.DeviceUserPermission()
                            { UserId = User.UserId, DeviceId = Model.DeviceId, PermissionId = 0 };

                            var selectList = new List<SelectListItem>();
                            foreach (var permission in Model.Permissions)
                            {
                                    selectList.Add(new SelectListItem() { Text = permission.PermissionName, Value = permission.PermissionId, Selected = (permission.PermissionId == deviceUserPermission.PermissionId) });
                            }

                            <tr>
                                    <td>
                                            @User.Description
                                    </td>
                                    <td>
                                            @Html.DropDownListFor(m => m.SelectedDeviceUserPermissions.FirstOrDefault(x => x.UserId == User.UserId).PermissionId, selectList, htmlAttributes: null)

                                    </td>
                            </tr>

                    }
            }
    </table>
    <input type="submit" value="Save" />
    }

Answer 1

Use index to bind the value to dropdownlist

int index = -1
@using (Html.BeginForm(actionName: "EditPermissions", controllerName: "Device", method: FormMethod.Post))
{
<table>
    @{
    foreach (var User in Model.Users)
    {
    index++
    var deviceUserPermission = Model.DeviceUserPermissions.FirstOrDefault(x => x.UserId == User.UserId) ?? new
    RulesEngine.DAL.DeviceUserPermission()
    { UserId = User.UserId, DeviceId = Model.DeviceId, PermissionId = 0 };

    var selectList = new List<SelectListItem>();
        foreach (var permission in Model.Permissions)
        {
        selectList.Add(new SelectListItem() { Text = permission.PermissionName, Value = permission.PermissionId,
        Selected = (permission.PermissionId == deviceUserPermission.PermissionId) });
        }

        <tr>
            <td>
                @User.Description
            </td>
            <td>
                @Html.DropDownListFor(m => m.SelectedDeviceUserPermissions.FirstOrDefault(x => x.UserId ==
                Model.Users[index].UserId).PermissionId, selectList, htmlAttributes: null)

            </td>
        </tr>

        }
        }
</table>
<input type="submit" value="Save" />

}