Question

Blazor文档的Form Validation example在EditForm组件中具有一个提交按钮组件：

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

总有没有将提交按钮放置在EditForm标记之外，并且仍然使它“本机”触发该EditForm组件的提交，而无需使用JavaScript？

Answer 1

表单元素中必须嵌套一个按钮，其类型属性设置为“提交”才能提交表单。我不确定为什么要将提交按钮放在表单之外...

此外，还不清楚为什么要使用JavaScript！做什么的？您了解该表格不是真正提交给服务器的吗？ Blazor是在浏览器上运行的SPA应用程序（如果使用客户端Blazor），并且与服务器的所有通信都是通过AJAX（HttpClient（JavaScript提取API））和/或SignalR完成的。

实际上，这是Blazor中唯一一种阻止控件的默认操作（event.preventDefault = true）的情况：

const preventDefaultEvents：{[eventType：string]：boolean} = { 提交：true};

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

来源：https://github.com/aspnet/AspNetCore/blob/master/src/Components/Browser.JS/src/Rendering/BrowserRenderer.ts

如何在组件外部放置Blazor EditForm的提交按钮

1 个答案: