如何将包括单选按钮在内的多个输入字段绑定到.net核心中的列表

Question

我有一个场景，我有一问题(存储在数据库中，类型为文本、单选或文本区域(，用户可以回答。现在，我需要基于问题类型的三种类型的输入字段，例如，如果问题类型是单选，我会向用户显示与问题类型文本区域或文本相同的单选按钮

@foreach (Questions question in Model.questions)
{
<div class="form-group">
<h3>@question.Question</h3>
@if (question.type == "radio")
{
<label>Yes</label>
<input value="yes" type="@question.type" asp-for="@Model.answers"/>
<label>No</label>
<input value="no" type="@question.type" asp-for="@Model.answers" />
}
else if (question.type == "textarea")
{
<textarea rows="5" cols="40" type="@question.type" asp-for="@Model.answers"></textarea>
}
else
{
<input type="@question.type" asp-for="@Model.answers" value="" />
}
</div>
}

我想将这些答案绑定到List

[HttpPost]
public IActionResult review(int id, List<string> answers)
{
return View();
}

它适用于输入型文本区域和文本，但输入型无线电有两个问题

1. 如果我没有选择其中一个选项，它就不会绑定，所以我使用了required属性，这解决了第一个问题
2. 现在，如果我有两个不同类型的问题，因为我使用相同的名字，我只能回答其中一个。现在有其他方法可以解决这个问题吗

Answer 1

这是因为您为RadioButton，因此它将只选择上次的RadioButton值点击

您需要为RadioButton自定义不同的名称，以确保每组RadioButton都可以选择一个值。

一旦覆盖了name值，我建议您使用ajax将答案传递给控制器。

请参考以下代码：

@model WebApplication_core.Models.questionAnswer
@{
ViewData["Title"] = "Test";
Layout = "~/Views/Shared/_Layout.cshtml";
var i = 0;
}
@section Scripts{
<script>
$(function () {
$("#submitButton").click(function () {
event.preventDefault();
var dataArray = $("form").serializeArray();
var answers = [];
$(dataArray).each(function (i, field) {
if (i != dataArray.length - 1) {
answers.push(field.value);
}
});
$.ajax({
type: "POST",
url: $("form").attr('action'),
data: { id: 1, answers: answers },//The id value here, because you did not provide it, please get it according to your actual code.
success: function (response) {
},
failure: function (response) {
alert(response);
}
});
})
})
</script>
}
<h1>Test</h1>
<form asp-controller="Home" asp-action="review">
@foreach (questions question in Model.questions)
{ 
<div class="form-group">
<h3>@question.Question</h3>
@if (question.type == "radio")
{
<label>Yes</label>
<input value="yes" type="@question.type" asp-for="@Model.answers" name="@Model.answers@i" />
<label>No</label>
<input value="no" type="@question.type" asp-for="@Model.answers" name="@Model.answers@i" />
}
else if (question.type == "textarea")
{
<textarea rows="5" cols="40" type="@question.type" asp-for="@Model.answers"></textarea>
}
else
{
<input type="@question.type" asp-for="@Model.answers" value="" />
}
</div>
i++;
}
<input type="submit" value="submit" id="submitButton" />
</form>