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

Question

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

我已经弄乱了@bind值，但它似乎与按钮单击完全无关，我只想要一个答案的值，即选定的答案。

到目前为止，使用"提交"按钮似乎不是正确的路线，因为它执行 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 提供的窗体组件。这些组件提供了大量功能，包括验证。

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

<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 事件处理程序。

希望这有帮助...

Answer 2

这是我想出的实现单选按钮组的代码。

<EditForm Model="cleaningModel" OnValidSubmit="Submit">
<DataAnnotationsValidator />
<div class="form-group">
<p class="csCleanedBox">
Cleaned:
</p>
<p class="csLineCondition">
Line Condition:  <br />
<input type="radio" id="0" name="Cleaned" value="0" checked="checked" @onclick="(() => { RadioButtonClicked(0); })">
<label for="0">Not Cleaned</label>
</p>
<input type="radio" id="1" name="Cleaned" value="1" @onclick="(() => { RadioButtonClicked(1); })">
<label for="1">1</label>
<input type="radio" id="2" name="Cleaned" value="2" @onclick="(() => { RadioButtonClicked(2); })">
<label for="2">2</label>
<input type="radio" id="3" name="Cleaned" value="3" @onclick="(() => { RadioButtonClicked(3); })">
<label for="3">3</label>
<input type="radio" id="4" name="Cleaned" value="4" @onclick="(() => { RadioButtonClicked(4); })">
<label for="4">4</label>
<input type="radio" id="5" name="Cleaned" value="5" @onclick="(() => { RadioButtonClicked(5); })">
<label for="5">5</label>
</div>
<button class="btn btn-danger" type="button" @onclick="@BackButton">Cancel</button>
<button class="btn btn-primary" type="submit">Submit</button>
<ValidationSummary />
</EditForm>
@Code
{
public class CleaningDto
{
public int Oid { get; set; }
public int Cleaned { get; set; }
}
private readonly CleaningDto cleaningModel = new CleaningDto();
public void RadioButtonClicked(int value)
{
cleaningModel.Cleaned = value;
}
private void Submit()
{
dm.Save(cleaningModel);
}
} 

它的工作方式类似于单选按钮组，并且当用户单击按钮时，类会更新。