How to bind MVC checkboxes to model

Question

I have a view which outputs a list of questions. The user will select questions they want included in a report and then submit the form.

My view looks like:

@using (Html.BeginForm("Step6", "Home", FormMethod.Post))
{
  @Html.HiddenFor(m => m.EventID)
  @Html.HiddenFor(m => m.CompanyID)
  foreach (var item in Model.Questions)
  {
      <div class="checkbox">
      <input type="checkbox" id="@item.QuestionID" name="QuestionIds" value="@item.Title" />
      <label for="@item.QuestionID">@item.Title</label>
      </div>
  }
  <p><input type="submit" class="btn btn-primary" value="Submit" /></p>
}

Generated HTML looks like:

<div class="checkbox">
    <input type="checkbox" id="12" name="QuestionIds" value="Would you like an account manager to contact you?" />
    <label for="12">Would you like an account manager to contact you?</label>
</div>
<div class="checkbox">
    <input type="checkbox" id="13" name="QuestionIds" value="Comments - please be as detailed as possible." />
    <label for="13">Comments - please be as detailed as possible.</label>
</div>

Question collection:

public class Question
{
    public Guid QuestionID { get; set; }
    public string Title { get; set; }
}

Controller action

    [HttpPost]
    public ActionResult Step6(Models.EventCompanyQuestionnaireQuestions model)
    {
        return View();
    }

The model:

public class EventCompanyQuestionnaireQuestions
{
    public int EventID { get; set; }
    public int CompanyID { get; set; }
    public List<Guid> QuestionIds { get; set; }
}

When the form is submitted the List is an empty, initialized list. The rendered form element is named QuestionIds which matches the model. I need QuestionIds to have the checked checkboxes.

There a numerous answers on SO for this – Fran Feb 13 '18 at 19:40 — Fran, Feb 13 '18 at 19:40

score 0 · Answer 1 · answered Feb 13 '18 at 20:19

Here is my models:

 public class Question
{
    public int QuestionID { get; set; }
    public string Title { get; set; }
    public bool Selected { get; set; }
}

public class EventCompanyQuestionnaireQuestions
{
    public int EventID { get; set; }
    public int CompanyID { get; set; }
    public List<Question> Questions { get; set; }
}

Here is the view:

@using (Html.BeginForm("Edit", "Question", FormMethod.Post))
{
    @Html.HiddenFor(m => m.EventID)
    @Html.HiddenFor(m => m.CompanyID)
    for (int i = 0; i < this.Model.Questions.Count; i++)
    {
    <div class="checkbox">
        @Html.HiddenFor(m => m.Questions[i].QuestionID)
        @Html.CheckBoxFor(m => m.Questions[i].Selected)
        @Html.DisplayFor(m => m.Questions[i].Title)
    </div>
    }
    <p><input type="submit" class="btn btn-primary" value="Submit" /></p>
}

The controller for testing:

 // GET: Question
    public ActionResult Index()
    {
        EventCompanyQuestionnaireQuestions model = new EventCompanyQuestionnaireQuestions
        {
            CompanyID = 1,
            EventID = 2,
            Questions = new List<Question>
            {
                new Question {    QuestionID = 1,   Selected = false,  Title= "What is your name"  },
                new Question {    QuestionID = 2,   Selected = false,  Title= "How old are you"  },
                new Question {    QuestionID = 3,   Selected = false,  Title= "Where are you from"  },
                new Question {    QuestionID = 4,   Selected = false,  Title= "What is your profession"  },
            }
        };
        return View(model);
    }


    [HttpPost]
    public ActionResult Edit(EventCompanyQuestionnaireQuestions model)
    {
        var ids = model.Questions.Where(q => q.Selected).Select(q => q.QuestionID).ToList();

        if(ids!=null && ids.Any())
        {
            foreach (var id in ids)
                Debug.WriteLine(id);
        }

        return View();
    }

Here is my result from Visual studio:

Dai · Answer 2 · 2018-02-13T19:10:57.407

-1

You need to use an indexed expression:

@using (Html.BeginForm("Step6", "Home", FormMethod.Post))
{
    @Html.HiddenFor(m => m.EventID)
    @Html.HiddenFor(m => m.CompanyID)
    for( Int32 i = 0; i < this.Model.Questions.Count; i++ )
    {
    <div class="checkbox">
        @Html.CheckBoxFor( m => m.Questions[i].Selected )
        @Html.LabelFor( m => m.Questions[i].Selected, this.Model.Questions[i].Title )
    </div>
    }
    <p><input type="submit" class="btn btn-primary" value="Submit" /></p>
}

Note that ideally, the <label> should wrap both the <input> and the text. I've also changed <input type="Submit" /> to <button>:

@using (Html.BeginForm("Step6", "Home", FormMethod.Post))
{
    @Html.HiddenFor(m => m.EventID)
    @Html.HiddenFor(m => m.CompanyID)
    for( Int32 i = 0; i < this.Model.Questions.Count; i++ )      {
    <div class="checkbox">
        <label for="@Html.IdFor( m => m.Questions[i].Selected )">
            @Html.CheckBoxFor( m => m.Questions[i].Selected )
            @this.Model.Questions[i].Title
        </label>
        @Html.HiddenFor( m => m.Questions[i].QuestionId );
    </div>
  }
  <p><button type="submit" class="btn btn-primary">Submit</button></p>
}

edited Feb 13 '18 at 19:10

answered Feb 13 '18 at 18:59

Dai

141,631
28
261
374

Thanks. this gives an error on the CheckBoxFor() line - Cannot implicitly convert type question to bool – andrewb Feb 13 '18 at 19:03
I added a Selected property to the question items, used that in the Checkboxfor line. Questionids now is set to null in action – andrewb Feb 13 '18 at 19:07
@andrewb I've amended my answer. – Dai Feb 13 '18 at 19:11
QuestionIds is still null – andrewb Feb 13 '18 at 19:16
@andrewb Change your viewmodel design, you don't need a separate list for question Ids. – Dai Feb 13 '18 at 19:21

How to bind MVC checkboxes to model

2 Answers2