How to place submit button for a Blazor EditForm outside of the component

问题

The Blazor documentation's Form Validation example has a submit button component within the EditForm component:

<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label for="identifier">Identifier: </label>
        <InputText id="identifier" bind-Value="@starship.Identifier" />
    </p>

    Snip....

    <button type="submit">Submit</button>

    Snip...

</EditForm>

Is there anyway to place that submit button outside of the EditForm tags and still have it 'natively' trigger the submit for that EditForm component without resorting to using JavaScript?

回答1:

A form element must have a button nested within it with its type attribute set to "submit" for the form to be submitted. I'm not sure why you want to place the submit button outside the form...

Furthermore, it is not clear why you want to resort to JavaScript ! What for ? Do you understand that the form is not really submitted to the server. Blazor is an SPA application running on the Browser (in case you use client-side Blazor), and all communication with the server is done through AJAX (HttpClient (JavaScript Fetch API)) and/or SignalR.

Actually, this is the only case in Blazor where a default action of a control is prevented (event.preventDefault=true):

const preventDefaultEvents: { [eventType: string]: boolean } = { submit: true };

function raiseEvent(event: Event, browserRendererId: number, eventHandlerId: number, eventArgs: EventForDotNet<UIEventArgs>) {
  if (preventDefaultEvents[event.type]) {
    event.preventDefault();
  }

Source: https://github.com/dotnet/aspnetcore/blob/master/src/Components/Web.JS/src/Rendering/BrowserRenderer.ts

来源：https://stackoverflow.com/questions/55975262/how-to-place-submit-button-for-a-blazor-editform-outside-of-the-component