如何为Blazor服务器中的所有单选按钮存储和显示选定值结果到相应的单选按钮

Question

这里我有一个简单的多选问答blazor服务器应用程序，用户可以从问题的4个答案选项中选择一个答案，如果答案正确，则会显示<span class="badge badge-success">Correct Answer</span>正确消息，如果错误，则会向相应的问题显示<span class="badge badge-danger">Wrong Answer</span>错误消息

现在的问题是，当我选择新问题的答案选项时，以前问题的正确答案或错误答案消息不会显示给相应的问题。

任何帮助都是徒劳的。非常感谢。
Blow是Mcq.Razor

<style>
.hide {
display: none !important;
}
.show {
display: initial !important;
}
</style>
@{
int quizIndex = 0;
}
@foreach (var item in questions)
{
<p>@item.QuestionDetail</p>
@if (item.QuestionAndAnswerId == questionId)
{
<p class="@HideShowCss">
@if (isCorrect == 1)
{
<span class="badge badge-success">Correct Answer</span>
}
else
{
<span class="badge badge-danger">Wrong Answer</span>
}
</p>
}
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="@item.Option1, @item.QuestionAndAnswerId" @onchange="GetRadioButtonValue" name="@quizIndex">@item.Option1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="@item.Option2, @item.QuestionAndAnswerId" @onchange="GetRadioButtonValue" name="@quizIndex">@item.Option2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="@item.Option3,@item.QuestionAndAnswerId" 
@onchange="GetRadioButtonValue" name="@quizIndex">@item.Option3
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="@item.Option4,@item.QuestionAndAnswerId" @onchange="GetRadioButtonValue" name="@quizIndex">@item.Option4
</label>
</div>
quizIndex++;
}

下面是我的代码

public List<QuestionAndAnswer> questions = new List<QuestionAndAnswer>();
public string HideShowCss;
public int isCorrect;
public int questionId;
protected override void OnInitialized()
{
var list = db.QuestionAndAnswer.ToList();
HideShowCss = "hide";
questions = list;
}
public void GetRadioButtonValue(ChangeEventArgs args)
{

var getValue = args.Value.ToString();
var splitValue = getValue.Split(",");
var getSelectedValue = splitValue[0];
var getQuestionId = splitValue[1];
int.TryParse(getQuestionId, out int QuestionId);
var getAnswer = db.QuestionAndAnswer.Where(x => x.QuestionAndAnswerId == QuestionId).FirstOrDefault().Answer;
if (getSelectedValue == getAnswer)
{
questionId = QuestionId;
HideShowCss = "show";
isCorrect = 1;
}
else
{
questionId = QuestionId;
HideShowCss = "show";
isCorrect = 2;
}
}

Answer 1

以下是您的答案。。。复制并测试它，检查代码并告诉我你还需要什么。

@page "/"
@foreach (var question in questions)
{
<p>
<span>@question.Title</span>

@foreach (var answer in question.Answers)
{
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="@answer.Text" @onchange="OnChange" 
name="@question.ID" id="@answer.Text" 
checked="@(question.SelectedAnswer?.Equals(answer.Text,StringComparison.OrdinalIgnoreCase))" />@answer.Text" 

</label>

</div>
}

@if (question.IsCorrectAnswer == null  )
{
<span class="badge badge-success"></span>
}
else if((bool) question.IsCorrectAnswer)
{
<span class="badge badge-success">Correct Answer</span>
}
else
{
<span class="badge badge-danger">Wrong Answer</span>
}

</p>

}

@code {

private void OnChange(ChangeEventArgs args)
{

var selectedAnswer = args.Value.ToString();
var data = (from question in questions
from answer in question.Answers
where answer.Text == selectedAnswer
select new { answer.QuestionID, answer.IsCorrect }).First();
var _question = (from question in questions
where question.ID == data.QuestionID
select question).First();
_question.SelectedAnswer = selectedAnswer;

_question.IsCorrectAnswer = data.IsCorrect;

}

private List<Question> questions = new List<Question> { new Question{ID = 1, SelectedAnswer="", Title = "fervid means: ", 
Answers = new List<Answer>
{ new Answer {ID = 1, Text = "thin", IsCorrect = false, QuestionID = 1},
new Answer {ID = 2, Text = "hot", IsCorrect = true, QuestionID = 1},
new Answer {ID = 3, Text = "bare", IsCorrect = false, QuestionID = 1},
new Answer {ID = 4, Text = "fast", IsCorrect = false, QuestionID = 1}} 
},
new Question{ID = 2, Title = "pallid means: ", 
Answers = new List<Answer>
{ new Answer {ID = 1, Text = "average", IsCorrect = false, QuestionID = 2},
new Answer {ID = 2, Text = "quality", IsCorrect = false, QuestionID = 2},
new Answer {ID = 3, Text = "fleeting", IsCorrect = false, QuestionID = 2},
new Answer {ID = 4, Text = "colorless", IsCorrect = true, QuestionID = 2}} 
}};
public class Question
{
public int ID {get;set;}
public string Title {get;set;}
public bool? IsCorrectAnswer = null;
public string SelectedAnswer { get; set; } 
public List<Answer> Answers  {get;set;} = new List<Answer>{};
}
public class Answer
{
public int ID {get;set;}
public string Text {get;set;}
public bool IsCorrect {get;set;}
public int QuestionID {get;set;}
}
}