HTML“复选框”与 asp.net core MVC 连接，将模型连接到复选框按钮

Question

所以我正在创建一个调查网站，您可以在其中创建调查表并在之后填写它们，我的问题是，如果我有一个问题，我有一个带有 bool 的选项集合，如果选项被标记为填充，如何当我单击提交表单按钮时，我是否将该值设置为模型 简而言之，从问题中获取所有标记的答案，将它们作为单独的视图模型传递给控制器​​，其中仅包含问题的 ID 和给定的答案

这是问题的类别：

 public class OptionsQuestionVM
    {
        public Guid Id { get; set; }

        public Guid FormId { get; set; }

        public bool IsAnswered { get; set; }
        public bool IsDeleted { get; set; }


        public string Name { get; set; }
        public ICollection<OptionModelVM> Options { get; set; }
        public bool IsRequired { get; set; }
        public bool HasMultipleAnswers { get; set; }

    }

这是 OptionModelVM 的类：

public class OptionModelVM
    {
        public Guid Id { get; set; }

        public string Text { get; set; }
        public bool IsMarked { get; set; } 
        public OptionsQuestionVM Question { get; set; }
        public Guid OptionsQuestionId { get; set; }
    }

这是我为每个问题显示的复选框的 HTML 代码以及可用的答案：

@foreach (var item in Model.OptionsQuestions)
                    {
                        if (item.HasMultipleAnswers == true)
                        {
                            <div class="element-checkbox">
                                <hr>
                                <h4>@item.Name</h4>
                                <div class="column column1">


                                    @foreach (var option in item.Options)
                                    {
                                        <label>
                                            <input type="checkbox" name="checkbox[]" value="option 1" />
                                            <span style="font-size:medium">@option.Text</span>
                                        </label>
                                        <br />
                                    }



                                </div><span class="clearfix"></span>
                            </div>
                        }
                        else
                        {

                                <div class="element-checkbox" single>
                                    <hr>
                                    <h4>@item.Name</h4>
                                    <div class="column column1">


                                        @foreach (var option in item.Options)
                                        {
                                            <label>
                                                <input type="checkbox" name="checkbox[]" value="option 1" />
                                                <span style="font-size:medium">@option.Text</span>
                                            </label>
                                            <br />
                                        }



                                    </div><span class="clearfix"></span>
                                </div>

                        }

                    }

如果有人告诉我如何将 HasMultipleAnswers 布尔值设置到复选框中也会有所帮助，这样当它为真时你可以标记多个答案，当它为假时你只能选择 1 谢谢你:)

Answer 1

首先需要create a class接收问题和答案的ID，并将类需要的字段内容存放在视图的对应位置。

这里是接收类 QuestionAnswer：

  public class QuestionAnswer
    {
        public Guid QuestionId { get; set; }
        public List<Guid> Answers { get; set; }
    }

其次，different question options对应的复选框的名称必须不同。

如果选项只能是single-selected，则可以以radio buttons的形式显示。

由于涉及多个模型，需要返回具体的选项，我认为使用ajax来传递是最好的解决方案。

以下是根据你的代码修改：

@model WebApplication_core_mvc.Models.MyQuestion
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml"; 
}
@section Scripts{ 
    <script>
        $(function () {
            $("form").submit(function () {
                event.preventDefault();
                var questionAnswer = [];
                $("input[type=hidden][name=QuestionId]").each(function () {
                    var question = {
                        QuestionId :$(this).val(),
                        Answers: []
                    };
                    $("input[name=" + question.QuestionId + "]").each(function () {
                        if ($(this).is(":checked")) {
                            question.Answers.push($(this).val());
                        }
                    });
                    questionAnswer.push(question);
                });
                $.ajax({
                    url: $("form").attr("action"),
                    method: 'post',
                    data: { "questionAnswer": questionAnswer},
                })
            })
        })
    </script>

}
<h1>Index</h1>
<form asp-action="SubmitAnswers">
    @foreach (var item in Model.OptionsQuestions)
    { 
        <input type="hidden" name="QuestionId" value="@item.Id"  />
        if (item.HasMultipleAnswers == true)
        {
            <div class="element-checkbox">
                <hr>
                <h4>@item.Name</h4>
                <div class="column column1">
                    @foreach (var option in item.Options)
                    {
                        <label>
                            <input type="checkbox" name="@item.Id" value="@option.Id" />
                            <span style="font-size:medium">@option.Text</span>
                        </label>
                        <br /> 
                    }
                </div><span class="clearfix"></span>
            </div>
        }
        else
        {

            <div class="element-checkbox" single>
                <hr>
                <h4>@item.Name</h4>
                <div class="column column1">
                    @foreach (var option in item.Options)
                    { 
                        <label>
                            <input type="radio" name="@item.Id" value="@option.Id" />
                            <span style="font-size:medium">@option.Text</span>
                        </label>
                        <br /> 
                    }
                </div><span class="clearfix"></span>
            </div>

        }
    }
    <input id="Submit1" type="submit" value="submit" />
</form>

控制器：

public IActionResult SubmitAnswers(List<QuestionAnswer> questionAnswer)
{
   //Do what you want...
    return View();
}

这是我的测试结果：

Answer 2

模型绑定是通过元素名称完成的。完成模型绑定的最简单方法是使用 html 助手。 在您的视图顶部放置：

@model OptionsQuestionVM

然后你想在哪里使用复选框（例如 IsAnswered）：

@Html.CheckboxFor(m => m.IsAnswered, new { @class="any classes"})

如果您有一个围绕此字段的表单，则在提交表单时，该字段将传递给服务器。

你的控制器：

public ActionResult SomeName(OptionsQuestionVM model){}

模型在哪里保存视图中的值。

至于处理多个答案并将其绑定到列表。这叫复杂模型绑定看看这篇文章：https://krishnrajrana.wordpress.com/2015/12/15/asp-net-mvc-post-a-list-or-collection-of-complex-types-with-non-sequential-indices/ 以及来自 StackOverflow 的这个问题：MVC post a list of complex objects