Html.BeginForm() not rendering properly

Question

While searching in stackoverflow the other questions didn't exactly helped in my situation. How it would be possible to debug such an error like the one that the Html.BeginForm does not properly rendered to the page.

I use this code

@model ExtremeProduction.Models.SelectUserGroupsViewModel

@{ ViewBag.Title = "User Groups"; }

<h2>Groups for user @Html.DisplayFor(model => model.UserName)</h2>
<hr />

@using (Html.BeginForm("UserGroups", "Account", FormMethod.Post, new { encType = "multipart/form-data", id = "userGroupsForm" }))
{
    @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 Group Assignments</h4>
        <br />
        <hr />
        <table>
            <tr>
                <th>
                    Select
                </th>
                <th>
                    Group
                </th>
            </tr>
            @Html.EditorFor(model => model.Groups)
        </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>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

EDIT: Added the Model

    // Wrapper for SelectGroupEditorViewModel to select user group membership:
    public class SelectUserGroupsViewModel
    {
        public string UserName { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public List<SelectGroupEditorViewModel> Groups { get; set; }

        public SelectUserGroupsViewModel()
        {
            this.Groups = new List<SelectGroupEditorViewModel>();
        }

        public SelectUserGroupsViewModel(ApplicationUser user)
            : this()
        {
            this.UserName = user.UserName;
            this.FirstName = user.FirstName;
            this.LastName = user.LastName;

            var Db = new ApplicationDbContext();

            // Add all available groups to the public list:
            var allGroups = Db.Groups;
            foreach (var role in allGroups)
            {
                // An EditorViewModel will be used by Editor Template:
                var rvm = new SelectGroupEditorViewModel(role);
                this.Groups.Add(rvm);
            }

            // Set the Selected property to true where user is already a member:
            foreach (var group in user.Groups)
            {
                var checkUserRole =
                    this.Groups.Find(r => r.GroupName == group.Group.Name);
                checkUserRole.Selected = true;
            }
        }
    }


    // Used to display a single role group with a checkbox, within a list structure:
    public class SelectGroupEditorViewModel
    {
        public SelectGroupEditorViewModel() { }
        public SelectGroupEditorViewModel(Group group)
        {
            this.GroupName = group.Name;
            this.GroupId = group.Id;
        }

        public bool Selected { get; set; }

        [Required]
        public int GroupId { get; set; }
        public string GroupName { get; set; }
    }

public class Group
    {
        public Group()
        {
        }


        public Group(string name)
            : this()
        {
            Roles = new List<ApplicationRoleGroup>();
            Name = name;
        }


        [Key]
        [Required]
        public virtual int Id { get; set; }

        public virtual string Name { get; set; }
        public virtual ICollection<ApplicationRoleGroup> Roles { get; set; }
    }

**** EDIT ****

And I get this form

http://i834.photobucket.com/albums/zz268/gtas/formmine_zpsf6470e02.png

I should receive a form like the one that I copied the code like this

http://i834.photobucket.com/albums/zz268/gtas/formcopied_zpsdb2f129e.png

Any ideas where or how to look the source of evil that makes my life hard for some time now?

Answer 1

Try replacing this

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

With this (to generate a table row containing a checkbox for the Selected property and label for the GroupName property)

@foreach(var group in Model.Groups)
{
   <tr>
    <td>
      Html.CheckBoxFor(g => group.Selected)
    </td>
    <td>
      <span>group.GroupName</span>
    </td>
   </tr>

}

Answer 2

You haven't defined an editor for Groups, the line @Html.EditorFor(model => model.Groups) tries to find an editor to render the property, and then uses a default one, which doesn't do what you want.

You either need to define an editor template that knows how to render that property, or you need to use a for loop to render it inside your page.