如何确保blazor表单按钮元素的事件处理程序运行

Question

我正在一个大型剃须刀页面项目中包含一些blazor web组件。我在解决方案中添加了一个blazor web组装项目，并在剃须刀页面上包含了以下组件：

<component type="typeof(NewProcessForm)" render-mode="WebAssemblyPrerendered"/>
<script src="_framework/blazor.webassembly.js"></script>

当我添加Counter组件或任何其他组件时，页面呈现得很好，但我在表单中尝试了许多变体，无法捕获onclick事件

<span id="newreference">@(NewReference)</span>
<EditForm Model="@(process)" OnSubmit="@(AddNew)">
<button id="getref" type="submit" @onclick="@(()=>GetNewReference("new"))">Get a New Reference</button>
<textarea id="newprocess"></textarea>
<button id="addprocess" type="submit" @onclick="@(()=>AddNewProcess())">Add the New Process</button>
</EditForm>
@(DateTime.Now.ToString("HH:mm:ss FFF"))
@code
{
private string NewReference
protected override void OnInitialized()
{
NewReference = "No new reference.";
}
public void GetNewReference()
{
IReferences ref = new References();
NewReference = ref.GetReference(new);
//InvokeAsync(StateHasChanged);
}
public void AddNew()
{
IProcess proc = new Process();
proc.AddNew();
NewReference = "New process added.";
}
}

我已经尝试过将按钮作为type="button"，而不使用EditForm标记，onclick指令有各种格式，所有这些都在一起，并采用不同的排列方式。每当单击任一按钮时，此版本都会刷新页面，时间显示也会更新，但@code部分方法中的任何断点都不会被命中。我是blazor和stackoverflow的新手，但我看到了人们认为不好的问题。如果我的不好，请告诉我，这样我就可以换了。

更新

我已经根据@MrC(又名Shaun Curtis(的好答案编辑了标记，但方法中的断点仍然没有被击中。

<span id="newreference">@(NewReference)</span>
<button id="getref" @(onclick=GetNewReference("new"))>Get a New Reference</button>
<textarea id="newprocess"></textarea>
<button id="addprocess" @(onclick=AddNewProcess())>Add the New Process</button>
</EditForm>
@(DateTime.Now.ToString("HH:mm:ss FFF"))

Answer 1

你已经非常接近了。我知道在斯塔克弗洛身上问正确的问题是什么感觉，这花了我很长时间才答对。由于您希望两个按钮执行不同的操作，请将表单提交添加到正确的事件处理程序中。此外，为了从表单中获取数据，它使用模型MyAwesomeProcessModel将输入字段放入

<span id="newreference">@(NewReference)</span>
<EditForm Model="@(process)">
<button id="getref" type="submit" @onclick="@(e => GetNewReference("new"))">Get a New Reference</button>
<textarea @bind=@(process.whatevermyawesomeeprocessespropertyis)></textarea>
<button id="addprocess" type="submit" @onclick=AddNewProcess>Add the New Process</button>
</EditForm>
@(DateTime.Now.ToString("HH:mm:ss FFF"))
@code
{
private MyAwesomeProcessModel process;
private string NewReference;    
protected override void OnInitialized()
{
NewReference = "No new reference.";
}
protected override bool ShouldRender()
{
return false;
}
public void GetNewReference()
{
IReferences ref = new References();
NewReference = ref.GetReference(new);
}
public void AddNewProcess()
{
IProcess proc = new Process();
proc.AddNew(process.whatevermyawesomeeprocessespropertyis);
NewReference = "New process added.";
}
}

此外，从ShouldRender方法返回false将停止页面刷新。

Answer 2

返回基本代码。

1. 按钮上的计数器是否递增
2. 你碰到断点了吗

<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
<div class="m-2">
<button class="btn btn-primary" @onclick=this.ButtonClick>Click to Update Counter</button>
</div>
<div class="m-2">
Counter: @_counter
</div>
@code {
private int _counter = 1;
private void ButtonClick()
{
// Breakpoint here - Do you hit it?
_counter++;
}
}

Answer 3

此按钮有效：

<button @onclick="@(() => onButtonClick(true))">Click Me</button>
@if (wasTrue)
{
<h1>Made true</h1>
}
@code {
bool wasTrue = false;
protected override void OnInitialized()
{
}
public void onButtonClick(bool myBool)
{
wasTrue = true;
}
}