Question

非常经典地使用复选框，如果不是我在dictionnary中写的情况。启动网站时，我会转到带有复选框的页面。在这里，我的dictionnary存在并填充了设置为false的值：

在测验之前，构建ViewModel：

Before the quiz, building the ViewModel

然后，在检查框并验证后，我回到控制器，但是字典是空的：

在测验之后，检查了checkboxFor并更新了值：

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

RadioButtonFor工作得很好，所以这真的很奇怪。

以下是代码：

在quizz之前：

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

Quizz页面：

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

我使用的viewModel（由于radioButtonFor和CheckBoxFor之间的不兼容，我不得不做一些奇怪的事情，不介意）：

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

如您所见，我初始化将用于问题的列表，然后将False值添加到AnswerCheckbox词典中。我想要的是CheckBoxFor更改这些值，并在POST控制器中返回它们。

Answer 1

C＃.NET MVC在CheckBoxFor（）命令中存在一些问题。 CheckBoxFor（）会自动生成一个具有相同名称的隐藏字段，并且如果未单独将其隔离在[Div]中，则会偶尔将支票丢到服务器上。即使在[display-field] div中包含标题或验证，也可能导致CheckBoxFor（）出现问题。解决方法是隔离CheckBoxFor（）或添加[onchange]更新，并且似乎更一致地工作。

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

或者，U可以执行以下操作并获得相同的结果，而无需隐藏字段。

<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;" />

或简写

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

大写模型引用来自控制器的数据。请确保在控制器中将模型作为ActionResult或IActionResult函数的参数。

注意：此问题很可能与生成的隐藏字段（与生成的CheckBoxFor（）复选框字段同名）有关，bc该框并非总是通过标准HTML5调用来更新，但每次使用标准的输入布局。

CheckBox在选中时未正确注册

1 个答案: