2

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

在测验之前，构建 ViewModel：

在测验之前，构建 ViewModel

然后，在选中复选框并验证后，我返回控制器，但字典为空：

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

测验后，检查 checkboxFor 并更新值

RadioButtonFor 工作正常，所以这真的很奇怪。

这是代码：

测验前：

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

测验页面：

@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 控制器中返回它们。

4

1 回答 1

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() 复选框字段同名有关，因为该框并不总是使用标准 HTML5 调用更新，但它们每次使用标准输入时都有效布局。

于 2019-03-18T14:23:38.263 回答