Dictionary> model binding not work

Question

I could not bind the model to Controller. Please give me any advice. Model,controller and view classes are below. When model is submmited, dictionary property equals to null.

public class GroupRights //model
{
    public List<DtoGrup> groups { get; set; }
    public Dictionary<short, Dictionary<EnFunction, bool>> groupRights { get; set; } // group function HasPermission
}

public enum EnFunction   
{
    LPDU_login,
    LPDU_changePassword,
    LPDU_transitList,
    LPDU_PosEventList,
    ....
}

Controller

public ActionResult GroupRights()
{
    TocCommonService.CommonServiceClient client = new TocCommonService.CommonServiceClient();
    GroupRights gr = new GroupRights();
    gr.groups = client.GetAllOperatorGroups().ToList();
    gr.groupRights = new Dictionary<short, Dictionary<EnFunction, bool>>();
    foreach (var g in gr.groups)
    {
        Dictionary<EnFunction, bool> permission = new Dictionary<EnFunction, bool>();
        foreach (var func in Enum.GetValues(typeof(EnFunction)).Cast<EnFunction>())
        {
            permission.Add(func, client.hasPermission(new DtoGrup() { GROUPID = g.GROUPID }, func));                  
        }
        gr.groupRights.Add(g.GROUPID, permission);
    }
    return View(gr);
}

View

@model TocWebApplication.Models.GroupRights
@{
    int id = 0;
}
@using (Html.BeginForm("ChangePermissionOfGroup", "Home", FormMethod.Post))
{
    <table>
        <thead>
            <tr>
                <th></th>
                @foreach (var gr in Model.groups)
                {
                    <th>@gr.GROUPNAME (@gr.GROUPID)</th>
                }
            </tr>
        </thead>
        <tbody>
            @foreach (var func in Enum.GetValues(typeof(EnFunction)).Cast<EnFunction>())
            {
                <tr>
                    <td>@(func.ToString())</td>
                    @for (int j = 0; j < Model.groups.Count(); j++)
                    {
                        <td>@Html.CheckBoxFor(model => model.groupRights[Model.groups[j].GROUPID][func])</td>
                    }
                </tr>
            }
        </tbody>
    </table>

    <button type="submit" class="btn btn-primary">Save changes</button>
    <button class="btn">Cancel</button>
}

Answer 1

For all but Dictionaries where both the Key and Value are simple value types (for example Dictionary<string, bool>), the DefaultModelBinder requires the name/value attributes to be in the format (in your case)

<input name="groupRights[0].Key" value="1" ... />
<input name="groupRights[0].Value[0].Key" value="LPDU_login" ... />
<input name="groupRights[0].Value[0].Value" value="True" ... />
<input name="groupRights[1].Key" value="2" ... />
<input name="groupRights[1].Value[0].Key" value="LPDU_changePassword" ... />
<input name="groupRights[1].Value[0].Value" value="False" ... />

There are no HtmlHelper methods that can generate the correct attributes and to bind to your groupRights you would need to generate the html manually.

Instead, create a view model(s) that represents the data you want to display in the view.If I have interpreted this correctly, you want to display a table displaying each EnFunction value down, and each DtoGrup across, and to display a checkbox in each cell to determine which EnFunction is selected for each DtoGrup.

public class GroupRightsVM // represents a table cell
{
    public short GroupID { get; set; }
    public bool IsSelected { get; set; }
}
public class RightsVM // represents a table row
{
    public RightsVM()
    {
        Groups = new List<GroupRightsVM>()
    }
    public EnFunction Right { get; set; }
    public List<GroupRightsVM> Groups { get; set; } // represents the cells in a row
}
public class PermissionsVM // Represents the table
{
    public PermissionsVM()
    {
        Permissions = new List<RightsVM>()
    }
    public IEnumerable<string> Headings { get; set; } // represents the table headings
    public List<RightsVM> Permissions { get; set; } // represents all rows
}

And in the view

<thead>
    <tr>
        <th></th>
        @foreach(var heading in Model.Headings)
        {
            <th>@heading</th>
        }
    </tr>
</thead>
<tbody>
    @for(int i = 0; i < Model.Rows.Count; i++)
    {
        <tr>
            <td>
                @Html.HiddenFor(m => m.Permissions[i].Right)
                @Html.DisplayFor(m => m.Permissions[i].Right)
            </td>
            @for(int j = 0; j < Model.Permissions[i].Groups.Count; j++)
            {
                <td>
                    @Html.HiddenFor(m => m.Permissions[i].Groups[j].GroupID)
                    @Html.CheckboxFor(m => m.Permissions[i].Groups[j].IsSelected)
                </td>
            }
        </tr>
    }
</tbody>

In the GET method, initialize an instance of PermissionsVM and populate it based on your data models and pass it to the view, for example

var groups = client.GetAllOperatorGroups()
var model = new PermissionsVM();
model.Headings = groups.Select(x => String.Format("{0} {{1})", x.GROUPNAME, x.GROUPID));
foreach (var func in Enum.GetValues(typeof(EnFunction)).Cast<EnFunction>())
{
    RightsVM r = new RightsVM();
    r.Right = func;
    foreach (var g in groups)
    {
        GroupRightsVM gr = new GroupRightsVM();
        gr.GroupID = g.GROUPID;
        gr.IsSelected = ...
        r.Groups.Add(gr);
    }
    model.Persmissions.Add(r);
}
return View(model);

and in the POST method

public ActionResult GroupRights(PermissionsVM model)