Adding CheckBoxList of items to MVC 4 View - asp.net

Question

I have the challenge of adding CheckBoxList of items to MVC 4 view. I have several models in the same the MVC 4 view. So I created the View Model below
public class ArticlesVM
{
public article articles { get; set; }
public game games { get; set; }
public gallery mgallery { get; set; }
public team teams { get; set; }
public ArticlesVM()
{
Teams = new List<TeamVM>();
}
public List<TeamVM> Teams { get; set; }
}
to include 4 models as it properties. I then created a view where each of the properties can be used independently as follows:
#model TeamBuildingCompetition.ViewModels.ArticlesVM
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout_new.cshtml";
}
<h2>Index</h2>
#using (Html.BeginForm("Create", "TBCArticles", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4></h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.articles.featuredImage, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-8">
#Html.TextBoxFor(model => model.articles.featuredImage, new { #type = "file" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.games.gameName, "Select a Game", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-8">
#Html.DropDownList("gameID", (IEnumerable<SelectListItem>)ViewBag.gameList, "Select Game", new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.HiddenFor(model => model.teams.teamID)
#Html.HiddenFor(model => model.teams.teamName)
#Html.DisplayFor(model => model.teams.teamName)
<div class="col-md-8">
#for(int i = 0; i < Model.Teams.Count; i++){
#Html.HiddenFor(model => model.Teams[i].ID)
#Html.CheckBoxFor(model => model.Teams[i].IsSelected)
#Html.LabelFor(model => model.Teams[i].IsSelected, Model.Teams[i].TeamName)
}
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.articles.articleTitle, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-8">
#Html.EditorFor(model => model.articles.articleTitle, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.articles.articleTitle, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.articles.articleContent, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-8">
#Html.EditorFor(model => model.articles.articleContent, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.articles.articleContent, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.mgallery.picturePath, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-8">
#Html.TextBoxFor(model => model.mgallery.picturePath, new { #type = "file", #multiple = "true" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Here is my TeamVM model below:
public class TeamVM
{
public int ID { get; set; }
[Required(ErrorMessage = "Please Enter Your Team Name")]
[Display(Name = "Team Name")]
public string TeamName { get; set; }
[DisplayName("Team Picture")]
[ValidateFile]
public HttpPostedFileBase TeamPicture { get; set; }
[Required]
[Display(Name = "Description")]
public string Description { get; set; }
[Required(ErrorMessage = "Please Enter Team Content")]
[Display(Name = "Content")]
[MaxLength(500)]
public string Content { get; set; }
public bool IsSelected { get; set; }
}
Added the following to my controller action:
[HttpGet]
public ActionResult Index(ArticlesVM model)
{
model = new ArticlesVM ();
model = new ArticlesVM();
var teamList = (from p in db.teams
select new TeamVM()
{
ID = p.teamID,
TeamName = p.teamName,
IsSelected = p.IsSelected
});
model.Teams = teamList.ToList();
ViewBag.gameList = new SelectList(db.games, "gameID", "gameName");
return View(model);
}
And now have a null reference error in this portion of the view:
<div class="form-group">
#Html.HiddenFor(model => model.teams.teamID)
#Html.DisplayFor(model => model.teams.teamName)
<div class="col-md-8">
#for(int i = 0; i < Model.Teams.Count; i++){
#Html.HiddenFor(model => model.Teams[i].ID)
#Html.CheckBoxFor(model => model.Teams[i].IsSelected)
#Html.LabelFor(model => model.Teams[i].IsSelected, Model.Teams[i].TeamName)
}
</div>
</div>