将项目的CheckBoxList添加到MVC 4视图

Question

我遇到了将项目的CheckBoxList添加到MVC 4视图的挑战。我在MVC 4视图中有几个模型。所以我在下面创建了视图模型

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; }
}

包含4个模型作为属性。然后我创建了一个视图，其中每个属性可以独立使用，如下所示：

@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")
}

以下是我的TeamVM模型：

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; }
}

在控制器操作中添加了以下内容：

    [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);
    }

现在在视图的这一部分中有一个空引用错误：

    <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>