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

Question

I am including some blazor web assembly components in a large razor pages project. I have added a blazor web assembly project to the solution and included the components on the razor page with this code:

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

When I added the Counter component or any other component the page renders just fine but I have tried many variations within a form and I cannot capture an onclick event

<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.";
  }
 }

I have tried the buttons as type="button", without using an EditForm tag, with various formats for the onclick directive, all together and in different arrangements of them. This version refreshes the page whenever either button is clicked and the Time display updates but none of the breakpoints in the @code section methods ever get hit. I am new to blazor and new to stackoverflow but I have seen questions people don't think are any good. If mine is not good please let me know so I can change it.

UPDATE

I have edited the mark up based on @MrC aka Shaun Curtis 's fine answer but the breakpoints in the methods are still not being hit.

<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

You're so very nearly there. I know what it's like trying to ask the right question on stackoverflow and this took me a long time to get right. As you want two buttons to do different things, add the form submission to the correct event handler. Also, to get data out of a form, this has the model MyAwesomeProcessModel to put the input fields into

<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.";
     }
}

Also, returning false from the ShouldRender method stops the page refresh.