Fluent UI Blazor 中按钮表单提交行为分析与解决方案

问题现象描述

在使用 Fluent UI Blazor 组件库开发 Web 应用时，开发人员发现当表单中包含多个带有 Name 属性的 <FluentButton> 组件时，表单提交行为与原生 HTML 按钮存在差异。具体表现为：点击任一提交按钮时，表单数据中会包含所有按钮的键值对，而非仅包含被点击按钮的数据。

技术背景分析

在标准 HTML 表单中，当使用多个同名按钮时，表单提交只会包含被点击按钮的值。这是 HTML 表单的标准行为，也是大多数后端框架（如 ASP.NET Core）处理表单数据的预期方式。

然而，Fluent UI Blazor 基于 Web Components 技术实现，当前版本(v2)的底层 Web Components 实现存在一个已知问题：所有同名按钮都会参与表单提交，无论是否被点击。这导致了与标准 HTML 表单行为的不一致。

影响范围评估

此问题主要影响以下场景：

1. 需要根据用户点击的不同按钮执行不同逻辑的表单
2. 使用多个同名按钮但需要区分用户操作的表单
3. 依赖按钮值进行业务逻辑判断的后端处理

临时解决方案

对于需要立即解决此问题的项目，可以采用以下临时方案：

1. 前端处理方案：在表单提交事件中，通过 JavaScript 拦截并修改表单数据，只保留实际点击按钮的值。

2. 后端处理方案：在后端代码中，对接收到的表单数据进行过滤处理，只取最后一个按钮值或根据业务逻辑选择有效值。

3. 替代组件方案：对于关键功能，暂时使用原生 HTML 按钮替代 FluentButton 组件。

长期解决方案展望

Fluent UI Blazor 团队已在计划中的 v5 版本中升级到 Web Components v3，该版本预计会修复此问题。开发人员可以关注项目更新，在适当时机升级到新版本以获得更符合预期的表单行为。

最佳实践建议

在当前版本下，建议开发人员：

1. 避免在关键业务逻辑中依赖按钮值判断
2. 如需区分不同按钮操作，可考虑使用不同名称
3. 对于新项目，评估是否等待 v5 版本发布
4. 在必须使用多按钮场景时，实现明确的后端处理逻辑

通过理解这一技术细节，开发人员可以更好地规划项目架构，避免因组件行为差异导致的业务逻辑问题。