c# - 为什么在下一个/上一个按钮上选择单选按钮单击
问题描述
下面是示例。
我正在尝试在 Next/Previous 上显示问题。
下面是 Blazor 网页。
其中有 C# 代码和 HTML。
@page "/Quiz"
<table class="table">
<thead>
<tr>
<th>
<h3>Question : @currentCount.ToString()</h3>
</th>
</tr>
</thead>
<tbody>
@foreach (var question in exam.Questions.Where(x => x.Id == currentCount.ToString()))
{
<tr>
<th>
<h3>@question.Text</h3>
</th>
</tr>
@foreach (var choice in question.Choices)
{
<tr>
<th>
<label>
<input type="radio" name="@question.Id" value="@question.Id" />
@choice.Text
</label>
</th>
</tr>
}
}
</tbody>
</table>
<button class="btn btn-primary" @onclick="NextQuestion">Next</button>
<button class="btn btn-primary" @onclick="PreviousQuestion">Previous</button>
@code {
Model.Exam exam = new Model.Exam();
private int currentCount = 1;
protected override void OnInitialized()
{
exam.Id = "1";
exam.Questions = new List<Model.Question>();
Model.Question question1 = new Model.Question();
question1.Id = "1";
question1.Text = "Which data type is used to create a variable that should store text?";
Model.Choice choice1 = new Model.Choice();
choice1.Id = "1";
choice1.Text = "Txt";
Model.Choice choice2 = new Model.Choice();
choice2.Id = "2";
choice2.Text = "str";
Model.Choice choice3 = new Model.Choice();
choice3.Id = "3";
choice3.Text = "myString";
Model.Choice choice4 = new Model.Choice();
choice4.Id = "4";
choice4.Text = "string";
question1.Choices = new List<Model.Choice>() { choice1, choice2, choice3, choice4 };
exam.Questions.Add(question1);
Model.Question question2 = new Model.Question();
question2.Id = "2";
question2.Text = "Which property can be used to find the length of a string?";
choice1 = new Model.Choice();
choice1.Id = "1";
choice1.Text = "getLength()";
choice2 = new Model.Choice();
choice2.Id = "2";
choice2.Text = "length";
choice3 = new Model.Choice();
choice3.Id = "3";
choice3.Text = "Length";
choice4 = new Model.Choice();
choice4.Id = "4";
choice4.Text = "length()";
question2.Choices = new List<Model.Choice> { choice1, choice2, choice3, choice4 };
exam.Questions.Add(question2);
}
private void NextQuestion()
{
currentCount++;
}
private void PreviousQuestion()
{
currentCount--;
}
}
当我尝试在单页中显示所有问题时。它正在工作。
我为单选按钮使用了不同的名称。
可能是什么问题。我错过了什么吗?
我在做什么是正确的设计吗?
我正在使用 Blazor Web 程序集。
解决方案
您的解决方案非常有效。只有几件事需要改变。
您可以将字段名称更改为currentCount
类似questionIndex
并以零开头的名称。在视图中,您会得到一个问题,然后通过它的索引(如 <h3>@exam.Questions[questionIndex].Text</h3>
.
然后单选按钮变得有点棘手。
<input type="radio"
name="@exam.Questions[questionIndex].Id"
value="@choice.Id"
@onchange="SelectionChanged"
checked="@(exam.Questions[questionIndex].SelectedChoiceId == choice.Id)"
@key="@(exam.Questions[questionIndex].Id + choice.Id)" />
为了更新模型,我们为 change 事件引入方法处理程序并更新SelectedChoiceId
.Question
void SelectionChanged(ChangeEventArgs args)
{
exam.Questions[questionIndex].SelectedChoiceId = (String)args.Value;
}
如果用户来回导航,最好预先选择输入。因此,如果选择了该选项,我们将选中的属性设置为 true。
该@key
属性控制 Blazor 何时重用组件。只要 的值@key
不变,Blazor 就会假定该元素是相同的。在这种情况下,每次用户导航时都会更改键,这会强制 Blazor 重新呈现整个单选按钮。这会重置某些浏览器保存的“已检查”状态。
把所有东西放在一起会导致
@page "/Quiz"
<table class="table">
<thead>
<tr>
<th>
<h3>Question : @((questionIndex+1).ToString())</h3>
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<h3>@exam.Questions[questionIndex].Text</h3>
</th>
</tr>
@foreach (var choice in @exam.Questions[questionIndex].Choices)
{
<tr>
<th>
<label>
<input type="radio"
name="@exam.Questions[questionIndex].Id"
value="@choice.Id"
@onchange="SelectionChanged"
checked="@(exam.Questions[questionIndex].SelectedChoiceId == choice.Id)"
@key="@(exam.Questions[questionIndex].Id + choice.Id)"
/>
@choice.Text
</label>
</th>
</tr>
}
</tbody>
</table>
<button class="btn btn-primary" @onclick="NextQuestion">Next</button>
<button class="btn btn-primary" @onclick="PreviousQuestion">Previous</button>
@code {
private Model.Exam exam = new Model.Exam();
private int questionIndex = 0;
private void NextQuestion()
{
//keeo boundaries in mind
questionIndex++;
}
private void PreviousQuestion()
{
//keep boundaries in mind
questionIndex--;
}
void SelectionChanged(ChangeEventArgs args)
{
exam.Questions[questionIndex].SelectedChoiceId = (String)args.Value;
}
protected override void OnInitialized()
{
//not changed
//...
}
}
推荐阅读
- android-jetpack-compose - Jetpack Compose:如何使用 SwipepableState 协调多个动画属性?
- audio - 如何在 Pixel5 AOSP 中编译模块 Audio HAL(AOSP 中没有构建音频 HAL 模块)
- node.js - 使用 CLI 的 Stripe webhook 无法 POST。返回“等待标头时超出 Client.Timeout”
- reactjs - 反应选择背景颜色
- java - 有什么办法可以用java编写这段小代码吗?
- mysql - 如何合并多个表的结果?
- c# - 连接两个字符串,如果两者都为空,则为空
- cryptography - 来自以太坊智能合约的交易
- c# - 如何解决输入字符串的格式不正确,而文本框是计算的结果
- java - 无法设置新的 Unreal & Quest 2 开发环境