asp.net mvc - How do I bind checkboxes to the List<int> property of a view model?

Question

I've been reading the various posts on view models and check boxes, but my brain is starting to lock up and I need a little push in the right direction.

Here's my simplified view model. I have checkboxes that need to populate the lists with their values. I don't think this can happen automagically. I'm not sure how to bridge the gap between an array of string values and a List correctly. Suggestions?

public int AlertId { get; set; }

public List<int> UserChannelIds { get; set; }

public List<int> SharedChannelIds { get; set; }

public List<int> SelectedDays { get; set; }

Answer 1

Have your View Model like this to represent the CheckBox item

public class ChannelViewModel 
{
  public string Name { set;get;}
  public int Id { set;get;}
  public bool IsSelected { set;get;}
}

Now your main ViewModel will be like this

public class AlertViewModel
{
  public int AlertId { get; set; }
  public List<ChannelViewModel> UserChannelIds { get; set; }      
  //Other Properties also her

  public AlertViewModel()
  {
    UserChannelIds=new List<ChannelViewModel>();       
  }

}

Now in your GET Action, you will fill the values of the ViewModel and sent it to the view.

public ActionResult AddAlert()
{
    var vm = new ChannelViewModel();

    //The below code is hardcoded for demo. you mat replace with DB data.
    vm.UserChannelIds.Add(new ChannelViewModel{ Name = "Test1" , Id=1});
    vm.UserChannelIds.Add(new ChannelViewModel{ Name = "Test2", Id=2 });

    return View(vm);
}

Now Let's create an EditorTemplate. Go to Views/YourControllerName and Crete a Folder called "EditorTemplates" and Create a new View there with the same name as of the Property Name(ChannelViewModel.cshtml)

Add this code ro your new editor template.

@model ChannelViewModel
<p>
  <b>@Model.Name</b>   :
  @Html.CheckBoxFor(x => x.IsSelected) <br />
  @Html.HiddenFor(x=>x.Id)
</p>

Now in your Main View, Call your Editor template using the EditorFor Html Helper method.

@model AlertViewModel
<h2>AddTag</h2>
@using (Html.BeginForm())
{
    <div>
        @Html.LabelFor(m => m.AlertId)
        @Html.TextBoxFor(m => m.AlertId)
    </div>    
    <div>  
      @Html.EditorFor(m=>m.UserChannelIds)         
    </div>    
    <input type="submit" value="Submit" />
}

Now when You Post the Form, Your Model will have the UserChannelIds Collection where the Selected Checkboxes will be having a True value for the IsSelected Property.

[HttpPost]
public ActionResult AddAlert(AlertViewModel model)
{
   if(ModelState.IsValid)
   {
      //Check for model.UserChannelIds collection and Each items
      //  IsSelected property value.
      //Save and Redirect(PRG pattern)
   }
   return View(model);
}