在Razor页面表单内交互Blazor组件如何避免触发HTTP POST？

我要创建一个表单，接收以下简化数据模型的数据：

public class MyPost {
    public string MyTitle { get; set; }
    public List<DateTime> Dates { get; set; } = new();
}

核心需求是批量生成日期：用户可按特定规则（如「单个日期」「生成截至12月30日的每周三日期」或组合规则）生成日期，需要在表单提交前实现日期生成与预览功能。我刚接触.NET Core，看了大量教程反而有些困惑。

核心问题 #

我想借助C#便捷的日期处理能力，用Blazor组件替代JavaScript实现上述功能，但组件的任何交互（比如@onclick）都会触发父Razor页面的HTTP POST，导致功能异常。能否在Razor页面的表单内与Blazor组件交互，却不触发表单POST？

示例与现象 #

以微软计数器组件的简化版为例：

<p>Count: @currentCount</p>
<button @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;
    private void IncrementCount()
    {
        currentCount++;
    }
}

将该组件放在Razor（cshtml）页面的表单内外，交互结果完全不同：

<h3>Outside form tag</h3>
<Counter  />
<form method="post">
    <h3>Inside form tag</h3>
    <Counter />
</form>

• 表单外的组件可正常计数，网络分析工具无网络请求（推测是SignalR作用）。
• 表单内的组件触发@onclick事件时，会触发页面POST请求。

我想知道：能不能用组件构建动态Razor页面表单？还是必须把整个表单移入组件（后者当前工作量较大，故先咨询该问题）？

不需要把整个表单移入组件，通过以下几种方法即可解决表单内Blazor组件触发表单POST的问题：

1. 给按钮添加type="button"属性 #

HTML按钮在表单内的默认type为submit，点击会触发表单提交。只需给Blazor组件内的按钮显式设置type="button"，就能阻止默认提交行为：

<p>Count: @currentCount</p>
<button type="button" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;
    private void IncrementCount()
    {
        currentCount++;
    }
}

这是最简单直接的方案，无需改动页面结构。

2. 在事件处理方法中阻止默认行为 #

如果不想修改按钮类型，可在Blazor的点击事件中通过MouseEventArgs阻止HTML默认提交动作：

<p>Count: @currentCount</p>
<button @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;
    private void IncrementCount(MouseEventArgs e)
    {
        e.PreventDefault();
        currentCount++;
    }
}

3. 使用Blazor的EditForm替代原生表单 #

如果后续需要扩展表单功能（如数据验证），推荐用Blazor的EditForm组件替代原生<form>标签。它专为Blazor交互设计，不会与组件内事件冲突，还能集成Blazor的表单特性：

<EditForm Model="MyPostModel" OnValidSubmit="HandleSubmit">
    <h3>Inside Blazor EditForm</h3>
    <Counter />
    <InputText @bind-Value="MyPostModel.MyTitle" />
    <button type="submit">提交</button>
</EditForm>

@code {
    private MyPost MyPostModel = new();

    private void HandleSubmit()
    {
        // 处理表单提交逻辑
    }
}

内容的提问来源于stack exchange，提问作者EvilDr