Fill model before calling "POST" method - asp.net-mvc-5

Question

I have the following model:
public class ProjectMemberUserRolesViewModel
{
public List<ProjectMemberUserRolesElementViewModel> Elements { get; set; }
}
public class ProjectMemberUserRolesElementViewModel
{
public string AccessType { get; set; }
public bool Delete { get; set; }
public bool Create { get; set; }
public bool Edit { get; set; }
public bool Read { get; set; }
}
following GET method:
public ActionResult UserRoles(int id)
{
ProjectMemberUserRolesViewModel model = new ProjectMemberUserRolesViewModel();
model.Elements = (from i in db.ProjectAccessTypes
select new ProjectMemberUserRolesElementViewModel()
{
AccessType = i.Type,
Create = i.ProjectMemberAccess.Where(p => p.ProjectMemberID == id).Select(p => p.Create).FirstOrDefault(),
Delete = i.ProjectMemberAccess.Where(p => p.ProjectMemberID == id).Select(p => p.Delete).FirstOrDefault(),
Edit = i.ProjectMemberAccess.Where(p => p.ProjectMemberID == id).Select(p => p.Edit).FirstOrDefault(),
Read = i.ProjectMemberAccess.Where(p => p.ProjectMemberID == id).Select(p => p.Read).FirstOrDefault()
}).ToList();
return View(model);
}
View model:
#model ProjectMemberUserRolesViewModel
#{
ViewBag.Title = "UserRoles";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>UserRoles</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
foreach (var item in Model.Elements)
{
<div>
#Html.DisplayFor(modelItem => item.AccessType)
</div>
<div>
#Html.CheckBoxFor(modelItem => item.Delete) #Html.DisplayNameFor(modelItem => item.Delete)
#Html.CheckBoxFor(modelItem => item.Create) #Html.DisplayNameFor(modelItem => item.Create)
#Html.CheckBoxFor(modelItem => item.Edit) #Html.DisplayNameFor(modelItem => item.Edit)
#Html.CheckBoxFor(modelItem => item.Read) #Html.DisplayNameFor(modelItem => item.Read)
</div>
}
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
}
and POST method
[HttpPost]
public ActionResult UserRoles(ProjectMemberUserRolesViewModel model)
{
//........
return View(model);
}
problem is ProjectMemberUserRolesViewModel model parameter is null for POST method. If I look at page source I see, that no prefix for foreach elements:
<form action="/ProjectMember/UserRoles/1" method="post"><input name="__RequestVerificationToken" type="hidden" value="toGniflvXh6n56oubtdZZazRAAsCxGID9X9XoQaj8ItViXZiIx3ouYNbGZfi6QPdRQAU1tU8wRwdeojxs2dtpy-NlKZ1ClgxicV0nSSwHsIclXYA8FHYY6QDmku3Wd4ptIPaJ_amu9FmKV5TwI3Ijg2" /><input id="item_AccessType" name="item.AccessType" type="hidden" value="Child Projects" /> <div>
Child Projects
</div>
<div>
<input data-val="true" data-val-required="The Delete field is required." id="item_Delete" name="item.Delete" type="checkbox" value="true" /><input name="item.Delete" type="hidden" value="false" /> Delete
<input data-val="true" data-val-required="The Create field is required." id="item_Create" name="item.Create" type="checkbox" value="true" /><input name="item.Create" type="hidden" value="false" /> Create
<input data-val="true" data-val-required="The Edit field is required." id="item_Edit" name="item.Edit" type="checkbox" value="true" /><input name="item.Edit" type="hidden" value="false" /> Edit
<input data-val="true" data-val-required="The Read field is required." id="item_Read" name="item.Read" type="checkbox" value="true" /><input name="item.Read" type="hidden" value="false" /> Read
</div>
<input id="item_AccessType" name="item.AccessType" type="hidden" value="File Archive" /> <div>
File Archive
</div>
<div>
<input id="item_Delete" name="item.Delete" type="checkbox" value="true" /><input name="item.Delete" type="hidden" value="false" /> Delete
<input id="item_Create" name="item.Create" type="checkbox" value="true" /><input name="item.Create" type="hidden" value="false" /> Create
<input id="item_Edit" name="item.Edit" type="checkbox" value="true" /><input name="item.Edit" type="hidden" value="false" /> Edit
<input id="item_Read" name="item.Read" type="checkbox" value="true" /><input name="item.Read" type="hidden" value="false" /> Read
</div>
<input id="item_AccessType" name="item.AccessType" type="hidden" value="Project Member" /> <div>
Project Member
</div>
<div>
<input id="item_Delete" name="item.Delete" type="checkbox" value="true" /><input name="item.Delete" type="hidden" value="false" /> Delete
<input id="item_Create" name="item.Create" type="checkbox" value="true" /><input name="item.Create" type="hidden" value="false" /> Create
<input id="item_Edit" name="item.Edit" type="checkbox" value="true" /><input name="item.Edit" type="hidden" value="false" /> Edit
<input id="item_Read" name="item.Read" type="checkbox" value="true" /><input name="item.Read" type="hidden" value="false" /> Read
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</form>
How to do a correct View code?

Answer 1

How to do a correct View code?
By replacing the foreach loop with for:
for (var i = 0; i < Model.Elements.Count; i++)
{
<div>
#Html.DisplayFor(x => x.Elements[i].AccessType)
</div>
<div>
#Html.CheckBoxFor(x => x.Elements[i].Delete)
#Html.DisplayNameFor(x => x.Elements[i].Delete)
#Html.CheckBoxFor(x => x.Elements[i].Create)
#Html.DisplayNameFor(x => x.Elements[i].Create)
#Html.CheckBoxFor(x => x.Elements[i].Edit)
#Html.DisplayNameFor(x => x.Elements[i].Edit)
#Html.CheckBoxFor(x => x.Elements[i].Read)
#Html.DisplayNameFor(x => x.Elements[i].Read)
</div>
}
or by using an editor template:
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.EditorFor(x => x.Elements)
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
}
and then inside the corresponding editor template which will be automatically rendered by ASP.NET MVC for each element of the collection ~/Views/Shared/EditorTemplates/ProjectMemberUserRolesElementViewModel.cshtml:
#model ProjectMemberUserRolesElementViewModel
<div>
#Html.DisplayFor(x => x.AccessType)
</div>
<div>
#Html.CheckBoxFor(x => x.Delete)
#Html.DisplayNameFor(x => x.Delete)
#Html.CheckBoxFor(x => x.Create)
#Html.DisplayNameFor(x => x.Create)
#Html.CheckBoxFor(x => x.Edit)
#Html.DisplayNameFor(x => x.Edit)
#Html.CheckBoxFor(x => x.Read)
#Html.DisplayNameFor(x => x.Read)
</div>