asp.net mvc model properties are null

Question

ModelState.IsValid = false. Why is the RoleName property null?

UserRoles.cshtml:

@model MtmOspWebApplication.Models.SelectUserRolesViewModel

@{
    ViewBag.Title = "UserRoles";
}

<h2>Roles for User @Html.DisplayFor(model => model.UserName)</h2>
<hr />

@using (Html.BeginForm("UserRoles", "Account", FormMethod.Post, new { encType = "multipart/form-data", name = "myform" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        @Html.ValidationSummary(true)
        <div class="form-group">
            <div class="col-md-10">
                @Html.HiddenFor(model => model.UserName)
            </div>
        </div>

        <h4>Select Role Assignments</h4>
        <br />
        <hr />

        <table cellspacing="10" cellpadding="5">
            <tr>
                <th>
                    Role Name
                </th>
                <th>
                    Selected
                </th>
            </tr>
            @Html.EditorFor(model => model.Roles)
        </table>
        <br />
        <hr />

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

SelectRoleEditorViewModel.cshtml:

@model MtmOspWebApplication.Models.SelectRoleEditorViewModel

<tr>
    <td>@Html.DisplayFor(model => model.RoleName)</td>
    <td>@Html.CheckBoxFor(model => model.Selected)</td>
</tr>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Model Classes:

public class SelectUserRolesViewModel
    {
        public SelectUserRolesViewModel()
        {
            this.Roles = new List<SelectRoleEditorViewModel>();
        }


        // Enable initialization with an instance of ApplicationUser:
        public SelectUserRolesViewModel(ApplicationUser user)
            : this()
        {
            this.UserName = user.UserName;
            this.FirstName = user.FirstName;
            this.LastName = user.LastName;

            var Db = new ApplicationDbContext();

            // Add all available roles to the list of EditorViewModels:
            var allRoles = Db.Roles;
            foreach (var role in allRoles)
            {
                // An EditorViewModel will be used by Editor Template:
                var rvm = new SelectRoleEditorViewModel(role);
                this.Roles.Add(rvm);
            }

            // Set the Selected property to true for those roles for 
            // which the current user is a member:
            foreach (var userRole in user.Roles)
            {
                var checkUserRole =
                    this.Roles.Find(r => r.RoleName == userRole.Role.Name);
                checkUserRole.Selected = true;
            }
        }

        public string UserName { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public List<SelectRoleEditorViewModel> Roles { get; set; }
    }


    // Used to display a single role with a checkbox, within a list structure:
    public class SelectRoleEditorViewModel
    {
        public SelectRoleEditorViewModel() { }
        public SelectRoleEditorViewModel(IdentityRole role)
        {
            this.RoleName = role.Name;
        }

        public bool Selected { get; set; }

        [Required]
        public string RoleName { get; set; }
    }

Answer 1

Try

@Html.EditorFor(model => model.RoleName)

instead of

@Html.DisplayFor(model => model.RoleName)

or use a hidden input for model.RoleName