CheckBoxFor not correctly registering when checked

Question

Pretty classical use of checkbox for if it where not for the case that I write in a dictionnary. When starting the website I go to the page with the checkboxes. Here, my dictionnary exists and is populated with values set to false :

Before the quiz, building the ViewModel:

Before the quiz, building the ViewModel

Then, after checking the boxes and validating, I go back to the controller, but the dictionnary is empty :

After the quiz, having checked the checkboxFor and updating the values:

After the quiz, having checked the checkboxFor and updating the values

The RadioButtonFor works fine, so this is really weird.

Here's the code :

Before the quizz :

public ActionResult MovetoQuiz(string QuizzField, string QuizzDifficulty)
    {
    //...//
    QuizzViewModel quizzModel = new QuizzViewModel(displayedQuestions, ResultType.Training);
    return View("Quizz", quizzModel);
}

Quizz page :

@model QRefTrain3.ViewModel.QuizzViewModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Quizz</title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/Site.css")
</head>
<body>
    <div>
        <!-- For each Question, display a new div with the Title, the question code, the question text, the video if there is one, then the possible answers depending on the type of answers-->
        @using (Html.BeginForm("QuizzResult", "Home"))
        {
            @Html.HiddenFor(m => Model.ResultType)
            for (int i = 0; i < Model.DisplayedQuestions.Count; i++)
            {
                <div class="QuizzQuestion">
                    <div class="QuizzQuestionTitle">@Model.DisplayedQuestions[i].Id : @Model.DisplayedQuestions[i].Name</div>
                    <div class="QuizzQuestiontext">@Model.DisplayedQuestions[i].QuestionText</div>
                    @if (@Model.DisplayedQuestions[i].IsVideo)
                    {
                        <div class="QuizzQuestionVideoContainer">
                            <iframe class="QuizzQuestionVideo" id="ytplayer" type="text/html"
                                    src="@Model.DisplayedQuestions[i].VideoURL"
                                    frameborder="0"></iframe>
                        </div>
                    }
                    @if (@Model.DisplayedQuestions[i].AnswerType == QRefTrain3.Models.AnswerType.SingleAnswer)
                    {
                        <div class="RadioButtonAnswers">
                            @for (int j = 0; j < Model.DisplayedQuestions[i].Answers.Count; j++)
                            {
                                @Model.DisplayedQuestions[i].Answers[j].AnswerText 
                                @Html.RadioButtonFor(m => m.DisplayedQuestions[i].AnswersRadio, Model.DisplayedQuestions[i].Answers[j].Id)
                            }

                        </div>
                    }
                    else if (@Model.DisplayedQuestions[i].AnswerType == QRefTrain3.Models.AnswerType.MultipleAnswer)
                    {
                        <div class="RadioButtonAnswers">

                            @for (int j = 0; j < Model.DisplayedQuestions[i].Answers.Count; j++)
                            {
                                @Model.DisplayedQuestions[i].Answers[j].AnswerText

                                // HERE IS THE CHECKBOXFOR

                                @Html.CheckBoxFor(m => m.DisplayedQuestions[i].AnswerCheckbox[Model.DisplayedQuestions[i].Answers[j].Id])
                            }
                        </div>
                    }
                </div>
            }
            <input type="submit" value="Validate Answers" />
        }
    </div>
</body>
</html>

And the viewModel I use (I had to do some weird stuff due to incompatibility between radioButtonFor and CheckBoxFor, don't mind it) :

public class QuestionQuizzViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public bool IsVideo { get; set; }
    public string VideoURL { get; set; }
    public string QuestionText { get; set; }
    public AnswerType AnswerType { get; set; }
    public List<AnswerQuizzViewModel> Answers { get; set; }

    // Lists containing user's answers. They have to be separated because RadioButtonFor and CheckBoxFor are incompatible when used together

    // Use this to store checkbox answers : Boolean switch. Key is answer's ID, value is True/false (selected or not)
    public Dictionary<int, Boolean> AnswerCheckbox { get; set; }
    // Use this to store radioButton answers : All radioButtons register to the same list, thus being in the same group
    // Key is Question's ID, value is selected Answers' Id
    public List<int> AnswersRadio { get; set; }

    public QuestionQuizzViewModel(int id, string name, bool isVideo, string videoURL, string questionText, AnswerType answerType, List<AnswerQuizzViewModel> answers)
    {
    //...//
     // Initialize the list used in the viewModel, depending on the answer type. The other won't be used
        if (answerType == AnswerType.SingleAnswer)
        {
            AnswersRadio = new List<int>();
        }
        else if (answerType == AnswerType.MultipleAnswer)
        {
            AnswerCheckbox = new Dictionary<int, bool>();
            foreach (AnswerQuizzViewModel a in answers)
            {
                AnswerCheckbox.Add(a.Id, false);
            }
        }

As you can see, I initialize the list that will be used for the question, then add False values to the AnswerCheckbox dictionnary. What I want is for the CheckBoxFor to change those values, and return them in the POST controler.

And `AnswerCheckBox` and `AnswerRadios` will be `null` because of you `if` block which means you generating non-zero based/non-consecutve collection indexers — , Jun 18 '18 at 09:51
do you know what should I use instead ? Also AnswerRadios return values correctly. — Lymn, Jun 18 '18 at 10:14
The radio buttons will not work fine (but I assume you have not done enough testing yet). Refer [this answer](https://stackoverflow.com/questions/29542107/pass-list-of-checkboxes-into-view-and-pull-out-ienumerable/29554416#29554416) for generating checkboxlists — , Jun 18 '18 at 10:18

Joseph Poirier · Answer 1 · 2019-03-19T13:42:10.153

C#.NET MVC has some issues with CheckBoxFor() command. CheckBoxFor() autogenerates a hidden field with the same name & if it is not isolated in a [Div] by itself, it will sporadically drop checks going to the server. Even including a title or validation inside the [display-field] div can cause an issue with a CheckBoxFor(). Workarounds are to isolate CheckBoxFor() or add [onchange] update & it seems to work more consistently.

<div class="display-field">
    @Html.CheckBoxFor(m => Model.DisplayedQuestions[i].AnswerCheckbox[j], 
          new { onchange = "this.value = this.checked;"})
</div>

Alternatively, U can do the following & get the same results without the hidden field.

<input type="checkbox" id="AnswerCheckbox" name="AnswerCheckbox"
        @if (Model.DisplayedQuestions[i].AnswerCheckbox[j]) 
         { @Html.Raw("checked value=\"true\"") ; }
        @if (!Model.DisplayedQuestions[i].AnswerCheckbox[j]) 
         { @Html.Raw("value=\"false\"") ; }
        onchange="this.value = this.checked;" />

or in short form

<input type="checkbox" id="AnswerCheckbox" name="AnswerCheckbox"
    @(Model.DisplayedQuestions[i].AnswerCheckbox[j] ? 
      "checked value=\"true\"" : "value=\"false\"")
    onchange="this.value = this.checked;" />

the uppercase Model references the data coming from the controller. be sure to include the model as a parameter for your ActionResult or IActionResult function in the controller.

Note : The issue most likely has something to do with the generated hidden field with the same name as a generated CheckBoxFor() checkbox field, bc the box doesn't always update with standard HTML5 calls, but they work every time using a standard input layout.

CheckBoxFor not correctly registering when checked

1 Answers1