Question

I am currently working on an Edit function for my project and I cannot seem to get the View Model right to allow it to be passed back into the Controller from the View. The structure of the View Model is as such:

public class CreateUserViewModel : ICreateUserViewModel
{
    #region Properties
    public string UserName { get; set; }
    public string Password { get; set; }
    public string Email { get; set; }
    public string SelectedUserType { get; set; }
    public List<ICreateUserItemViewModel> UserTypes { get; set; }
    public List<ICreateUserItemViewModel> Products { get; set; }
    public List<ICreateUserItemViewModel> Languages { get; set; }
    #endregion

    #region Constructor
    public CreateUserViewModel()
    {
    }

    public CreateUserViewModel(List<Product> products, List<Language> languages)
    {
        Products = new List<ICreateUserItemViewModel>();
        foreach (var prod in products)
        {
            var prodVM = new CreateUserItemViewModel
            {
                Name = prod.Name,
                IsSelected = false,
                ID = (int)prod.ID
            };
            Products.Add(prodVM);
        }

        Languages = new List<ICreateUserItemViewModel>();
        foreach (var lang in languages)
        {
            var langVM = new CreateUserItemViewModel
            {
                Name = lang.Name,
                IsSelected = false,
                ID = (int)lang.ID
            };
            Languages.Add(langVM);
        }

    }
    #endregion
}

The subclass ViewModel CreateUserItemViewModel:

public class CreateUserItemViewModel : ICreateUserItemViewModel
{
    public string Name { get; set; }
    public int ID { get; set; }
    public bool IsSelected { get; set; }
}

I want this subclass to be represented in the view as a checkbox, so the user can choose to include it or not.

User Controller:

[HttpPost]
public ActionResult Create(CreateUserViewModel model)
{
    if (ModelState.IsValid)
    {
        User newUser = new User();
        newUser.UserName = model.UserName;
        newUser.Password = model.Password;
        newUser.Email = model.Email;
        newUser.Products = model.Products; //Always NULL

When I put a break point on this part of the application the properties for username password and email are populated but Products and Languages are empty. I used Fiddler2 to watch what was being passed into the controller and this was the output:

UserName=asdasdsdasd&Password=asd&Email=asD%40asd.com&type.IsSelected=Admin
&prod.ID=1&prod.IsSelected=true&prod.IsSelected=false
&prod.ID=2&prod.IsSelected=false
&prod.ID=3&prod.IsSelected=false
&prod.ID=4&prod.IsSelected=false
&lang.ID=1&lang.IsSelected=true&lang.IsSelected=false
&lang.ID=2&lang.IsSelected=true&lang.IsSelected=false
&lang.ID=3&lang.IsSelected=false
&lang.ID=4&lang.IsSelected=false
&lang.ID=5&lang.IsSelected=false
&lang.ID=6&lang.IsSelected=false
&lang.ID=7&lang.IsSelected=false
&lang.ID=8&lang.IsSelected=false
&lang.ID=9&lang.IsSelected=false
&lang.ID=10&lang.IsSelected=false
&lang.ID=11&lang.IsSelected=false
&lang.ID=12&lang.IsSelected=false
&lang.ID=13&lang.IsSelected=false
&lang.ID=14&lang.IsSelected=false
&lang.ID=15&lang.IsSelected=false
&lang.ID=16&lang.IsSelected=false
&lang.ID=17&lang.IsSelected=false
&lang.ID=18&lang.IsSelected=false
&lang.ID=19&lang.IsSelected=false

A nugget of the code for the Create View is:

<div class="editor-label">
    @Html.Label("User Products:")
</div>
<div class="editor-field">
    @foreach (var prod in Model.Products)
    {
        @Html.Label(prod.Name)
        @Html.HiddenFor(x => prod.ID)
        @Html.CheckBoxFor(x => prod.IsSelected, new { name = prod.Name })
    }
</div>
<div class="editor-label">
    @Html.Label("User Languages:")
</div>
<div class="editor-field">
    @foreach (var lang in Model.Languages)
    {
        @Html.Label(lang.Name)
        @Html.HiddenFor(x => lang.ID)
        @Html.CheckBoxFor(x => lang.IsSelected, new { name = lang.Name })
    }
</div>
<p>
    <input type="submit" value="Create" />
</p>

I have been working on this for quite a while and I am beginning to think what I am trying to do is not possible. I want it to return the CreateUserViewModel fully populated with all the values that the user has selected, but I just do not know how to achieve this.

Any ideas?

Answer 1

Use a for loop instead of a foreach.

@for (int i=0; i < Model.Products.Count; i++)
{
    @Html.Label(prod.Name)
    @Html.HiddenFor(model => model.Products[i].ID)
    @Html.CheckBoxFor(model => model.Products[i].IsSelected, new { name = prod.Name })
}

Your property expression needs to contain enough information for the model binder to figure out how to bind the POST values to the model.

You could also try creating an Editor Template for ICreateUserItemViewModel and then changing your markup to the following.

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