为什么在下一个/上一个按钮上选择单选按钮单击

Question

下面是示例。

我正在尝试在 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 程序集。

Answer 1

您的解决方案非常有效。只需要更改几件事。

您可以将字段名称 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)" />

为了更新模型，我们为更改事件引入方法处理程序并更新Question 的属性SelectedChoiceId。

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
        //...
    }
}