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

Question

我在大型 razor 页面项目中包含了一些 blazor web 程序集组件。我在解决方案中添加了一个 blazor web assembly 项目，并使用以下代码将组件包含在 razor 页面上：

<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 部分方法中的断点 none 会被命中。我是 blazor 的新手，也是 Whosebug 的新手，但我看到人们认为没有任何好处的问题。如果我的不好，请告诉我，以便我可以更改。

更新

我已根据@MrC aka 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

返回基础代码。

单击按钮时计数器会增加吗？
你断点了吗？

<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 2

你就快到了。我知道尝试在 Whosebug 上提出正确的问题是什么感觉，我花了很长时间才弄对。由于您希望两个按钮执行不同的操作，因此请将表单提交添加到正确的事件处理程序。此外，为了从表单中获取数据，它具有模型 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 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;
    }
}

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

How can I ensure the event handlers for my blazor form button elements run

c#

blazor

blazor-webassembly

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

How can I ensure the event handlers for my blazor form button elements run

c#

blazor

blazor-webassembly

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