用户能够错误地选择多个单选按钮

Question

这是我的测验应用程序在 ASP.NET Core 中的视图：

<div class="question bg-white p-3 border-bottom">
    <div class="d-flex flex-row align-items-center question-title">
        <h3 class="text-primary">Q.</h3>
        <h5 class="mt-1 ml-2">@Html.DisplayFor(x => x.q_text)</h5>
    </div>
    <div class="ans ml-2">
        <label class="radio">
            <span>
                @Html.RadioButtonFor(x => x.QA, Model.q_id, new { id = "QA" })
                <span class="checkmark"></span>
                @Model.QA
            </span>
        </label>
    </div>
    <div class="ans ml-2">
        <label class="radio">
            <span>
                @Html.RadioButtonFor(x => x.QB, Model.q_id, new { id = "QB" })
                <span class="checkmark"></span>
                @Model.QB
            </span>
        </label>
    </div>
    <div class="ans ml-2">
        <label class="radio">
            <span>
                @Html.RadioButtonFor(x => x.QC, Model.q_id, new { id = "QC" })
                <span class="checkmark"></span>
                @Model.QC
            </span>
        </label>
    </div>
    <div class="ans ml-2">
        <label class="radio">
            <span>
                @Html.RadioButtonFor(x => x.QD, Model.q_id, new { id = "QD" })
                <span class="checkmark"></span>
                @Model.QD
            </span>
        </label>
    </div>


    <div class="row" style="display:none">
        @Html.TextBoxFor(x => x.QCorrectAns)
    </div>

</div>
<div class="d-flex flex-row justify-content-between align-items-center p-3 bg-white">
    <input type="submit" value="Next" class="btn btn-success" />
    @Html.ValidationMessage("", new { @class = "text-danger" })
</div>

我尝试改为应用选项名称Model.q_id，但它不起作用。

在上面的代码中，用户可以选择多个选项，这会导致错误或错误的答案选择。我不想允许该用户选择多个选项。

我希望该用户一次只能选择一个选项。

模型类

public int q_id { get; set; }
public string q_text { get; set; }
public string QA { get; set; }
public string QB { get; set; }
public string QC { get; set; }
public string QD { get; set; }
public string QCorrectAns { get; set; }
public Nullable<int> q_fk_Cat_id { get; set; }
    
public virtual quiz_Category quiz_Category { get; set; }

Answer 1

然后我必须为其指定 id，并且需要编写 JavaScript 代码。

不，我的意思是使用 ASP.NET Core 标记帮助器来实现您的要求。在 HTML 输入标签单选按钮内，它将使用名称来查看这是否是一个组。因此，如果您使用标签助手，您应该为

asp-for

设置

q_id

属性，它会自动将所有名称设置为

q_id

。

像这样：

      <input type="radio" asp-for="q_id" value="@Model.QA" />  

更多详情，您可以参考下面的例子：

我的控制器代码：

    public IActionResult Index()
    {


        var model = new quizModel() { QA="1", QB="2", QC="3", QD="4"};

        return View(model);
    }

查看代码：

    <form asp-action="test" method="post">
    
    
        <div class="question bg-white p-3 border-bottom">
            <div class="d-flex flex-row align-items-center question-title">
                <h3 class="text-primary">Q.</h3>
                <h5 class="mt-1 ml-2">@Html.DisplayFor(x => x.q_text)</h5>
            </div>
            <div class="ans ml-2">
                <label class="radio">
                    <span>
                        @* @Html.RadioButtonFor(x => x.QA, 0, new { id = "QA", name = "q_id" }) *@
                        <input type="radio" asp-for="q_id" value="@Model.QA" />  
                        
                        <span class="checkmark"></span>
                        @Model.QA
                    </span>
                </label>
            </div>
            <div class="ans ml-2">
                <label class="radio">
                    <span>
                       @*  @Html.RadioButtonFor(x => x.QB, 1, new { id = "QB", name = "q_id" }) *@
    
                        <input type="radio" asp-for="q_id" value="@Model.QB" />  
    
                        <span class="checkmark"></span>
                        @Model.QB
                    </span>
                </label>
            </div>
            <div class="ans ml-2">
                <label class="radio">
                    <span>
                        @* @Html.RadioButtonFor(x => x.QC, 2, new { id = "QC", name = "q_id" }) *@
    
                        <input type="radio" asp-for="q_id" value="@Model.QC" /> 
    
                        <span class="checkmark"></span>
                        @Model.QC
                    </span>
                </label>
            </div>
            <div class="ans ml-2">
                <label class="radio">
                    <span>
                        @* @Html.RadioButtonFor(x => x.QD, 3, new { id = "QD", name = "q_id" }) *@
                        <input type="radio" asp-for="q_id" value="@Model.QD" /> 
    
                        <span class="checkmark"></span>
                        @Model.QD
                    </span>
                </label>
            </div>
    
    
            <div class="row" style="display:none">
                @Html.TextBoxFor(x => x.QCorrectAns)
            </div>
    
            <input type="submit" value="submit"/>
        </div>
</form>
  

结果：