这是我在 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; }
然后我必须为其指定 id,并且需要编写 JavaScript 代码。
不,我的意思是使用 asp.net core 标签帮助器来实现您的要求。在 html 输入标签单选按钮内,它将使用名称来查看这是否是一个组。因此,如果您使用标签助手,您应该为 q_id 设置 asp-for 属性,它会自动将所有名称设置为 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>
结果: