如何从 Blazor @code 块中的单选框/复选框表单提交中获取数据？

Question

我正在制作一个使用问题组件的测验/考试页面。问题包含带有复选框或单选选项和提交按钮的答案。当用户单击提交（或其他按钮类型）时，我需要能够将所选答案与正确答案进行比较，但我不确定如何获取 @code 块中输入的值加工。

我弄乱了@bind-value，但它似乎与按钮点击完全没有关系，我只想要一个答案的值，即选定的答案。

到目前为止，使用“提交”按钮似乎不是正确的路线，因为它执行 POST 请求，这不是我正在寻找的行为。我只希望按钮触发组件中的处理。

这是我的组件

<form>
    <div class="q-card">
        <h3>@Question.QuestionText</h3>
        @foreach (var option in Question.Options)
        {
            <div>
                <input type="@Question.InputType" id="@answer" name="@Question.Id" value="@answer"/>
                <label for="@answer">@answer</label>
            </div>
        }
        <div class="q-controls">
            <button type="submit"@onsubmit="@OnSubmit">Submit</button>
        </div>
    </div>
</form>

和我的@code 块

@code {
    public string answer;

    public void OnSubmit()
    {
        System.Console.WriteLine(answer);
    }
}

answer当我单击提交时，我希望选择中的值最终出现在变量中。我意识到如果有多个答案（复选框），我需要更改此变量，但稍后我会谈到。

Answer 1

@Collin Brittain，明白在 Blazor 中不应该发生回传。您正在寻找的行为可用。当您单击按钮时，不会发生回发...Blazor 是一个 SPA 应用程序，其中只能通过 Http 调用或 SignalR 与外界进行通信。但是，我建议您使用 Blazor 提供的 Forms 组件。这些组件提供了大量功能，包括验证。

以下工作示例可以帮助您解决问题：

<form>
        <p>@question</p>

        @foreach (var item in Enum.GetNames(typeof(Question.Colors)))
        {
            <div>
                <input type="radio" name="question1" id="@item" value="@item" @onchange="SelectionChanged" checked=@(selectedAnswer.Equals(item,StringComparison.OrdinalIgnoreCase)) />
                <label for="@item">@item</label>
            </div>
        }
        <div>
            <label>Selected answer is @selectedAnswer</label>
        </div>

        <button type="button" @onclick="@OnSubmit">Submit</button>


    </form>




@code {
    string selectedAnswer = "";
    void SelectionChanged(ChangeEventArgs args)
    {
        selectedAnswer = args.Value.ToString();
    }


    Question question = new Question { QuestionText = "What is the color of the sky" };


    public void OnSubmit()
    { 

          Console.WriteLine(selectedAnswer);

    }

    public class Question
    {

        public string QuestionText { get; set; }
        public enum Colors { Red, Green, Blue, Yellow };

    }
}

回复评论：

这句话来自 Blazor 团队：

目前，在大多数情况下，默认情况下我们不会在 DOM 事件上调用 preventDefault。一个例外是表单提交事件：在这种情况下，如果您有一个 C# onsubmit 处理程序，您几乎肯定不想执行服务器端发布，特别是考虑到它会在异步事件处理程序之前发生。

 Later, it's likely that we'll add a syntax for controlling whether any given event handler triggers a synchronous preventDefault

在事件处理程序运行之前。

在以下代码片段中，表单具有 onsubmit 处理程序，其结果是阻止导航到关于页面，您位于表单所在的页面上，并执行按钮的 HandleClick 事件处理程序：

<form action="about:blank" @onsubmit=@(() => { })>
    <button id="form-1-button" @onclick=HandleClick>Click me</button>
</form>

但是，此代码段会导致应用导航到关于页面。换句话说，表单被提交。这种行为意味着在不分配 type 属性的情况下使用按钮元素等同于使用带有 type="submit" 的按钮

<form action="about:blank">
    <button id="form-2-button" @onclick="HandleClick">Click me</button>
</form>

为了防止导航到关于页面，并执行 HandleClick 事件处理程序，添加值为“button”的 type 属性，如下所示：

<form action="about:blank">
    <button type="button" @onclick="HandleClick" id="form-2-button">Click me</button>
</form>

此代码片段来自您的问题

<button type="submit"@onsubmit="@OnSubmit">Submit</button>

执行以下操作：提交表单而不是调用按钮元素的 OnSubmit 事件处理程序。

希望这可以帮助...