具有相同名称的多个单选按钮需要架构

Question

我有一个表单，其中包含未知数量的无线电类型输入。所以我必须在模型部分使用数组。

这是我的表格

<form method="post" action="/File/Validate">
    <input type="number" name="fileId" value="@file.ID" class="hidden" />
        @Html.AntiForgeryToken()
        @foreach (var item in file.LABEL)
        {
            string id = item.KLASS.KLASS_NAME + i;
            <div id="@id">
                <input name="klassId[]" value="@item.KLASS.ID" class="hidden"/>
                <p>Class name : @item.KLASS.KLASS_NAME</p>
                <input type="radio" name="result" value="true" />Correct<br />
                <input type="radio" name="result" value="false" />Wrong/Unsure<br />
            </div>
            i++;
                    }
            <button type="submit" class="btn btn-default">Save</button> 
</form> 

那是模型

public class Validator
{
    public int fileId { get; set; }
    public int[] klassId { get; set; }
    public bool[] result { get; set; }
}

这就是控制器部分

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Validate(Validator validator)
{}

我的问题是，当我单击单选按钮时，只有一个答案进入后端，但是每次 KLASS 的数量都是未知的。那么我应该怎么做你建议什么样的解决方案？ 谢谢你们。

Answer 1

原因是您正在渲染所有具有相同名称的收音机：

<div id="id-1">
    ...
    <input type="radio" name="result" value="true" />Correct<br /> 
    ...
    <input type="radio" name="result" value="false" />Wrong/Unsure<br />
    ...
</div>
<div id="id-2">
    ...
    <input type="radio" name="result" value="true" />Correct<br /> 
    ...
    <input type="radio" name="result" value="false" />Wrong/Unsure<br />
    ...
</div>
<div id="id-3">
    ...
    <input type="radio" name="result" value="true" />Correct<br /> 
    ...
    <input type="radio" name="result" value="false" />Wrong/Unsure<br />
    ...
</div>

看到了吗？在这里，您有 3 组收音机，但所有收音机都具有相同的名称。换句话说，只会选择其中一个无线电，并且只会将其中一个发送到服务器。

我要说的另一件事是，我认为将result[] 和klassId[] 作为单独的数组发布不是一个好主意。如果有人没有选中第二个无线电组，您将在服务器端获得 3 klassId 和 2 result，因此不知道选择了哪两个无线电。

更好的方法是创建一个新的 DTO 来保存 klassId-result 组，我们将其命名为 ValidatorDetail：

public class ValidatorDetail
{
    public int klassId { get; set; }
    public bool result { get; set; }
}

要将它们作为数组发送，您可以在视图页面中呈现带有索引的字段：

<form method="post" action="/Home/Validate">
    <input type="number" name="fileId" value="@file.ID" class="hidden" />
    @Html.AntiForgeryToken()
    @{ var i = 0;}
    @foreach (var item in file.LABEL)
    {
        string id = item.KLASS.KLASS_NAME + i;
        <div id="@id">
            <input name="details[@i].klassId" value="@item.KLASS.ID" class="hidden"/>
            <p>Class name : @item.KLASS.KLASS_NAME</p>
            <input type="radio" name="details[@i].result" value="true" />Correct<br />
            <input type="radio" name="details[@i].result" value="false" />Wrong/Unsure<br />
        </div>
        i++;
    }
    <button type="submit" class="btn btn-default">Save</button> 
</form>

最后，改变你的控制器动作如下：

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Validate(int fileId,[FromForm]ValidatorDetail[] details)
{
    return new JsonResult(details);
}

它将按预期工作。