如何在ASP.NET C#中使用Google AMP的amp-form标签解决验证报错

兼容性说明 #

ASP.NET C# 完全可以搭配 Google AMP 使用，你遇到的问题属于配置和标签适配问题，并非两者不兼容。

报错原因 #

你看到的 Validation (HTML5): Element 'amp-form' is not supported. 报错分为两层原因：

1. Visual Studio 自带的 HTML5 静态验证规则没有收录 AMP 自定义元素，仅属于编辑器提示，不影响代码实际运行
2. 你直接给 <amp-form> 标签添加了 runat="server" 属性，而 ASP.NET Web Forms 原生的服务端表单逻辑只识别 <form> 标签，无法识别自定义的 <amp-form> 标签

修复步骤 #

• 首先处理编辑器提示：可以直接忽略该验证警告，不影响项目运行；也可以在 Visual Studio 的 HTML 验证配置中添加 AMP 对应的 schema 规则消除提示。
• 其次调整表单实现逻辑，两种可选方案：
  1. 非服务端表单方案（推荐）
     不需要依赖 Web Forms 默认的表单回发逻辑，按 AMP 官方规范写 <amp-form>，提交地址对接后端接口（可以是 Ashx 处理程序、Web API 接口、MVC Action 等），使用前需要先在页面 <head> 中引入 amp-form 对应的官方组件脚本，示例表单写法如下：

  <body>
    <amp-form id="form1" method="post" action-xhr="/your-backend-handler">
      <div>
        <!-- 表单控件 -->
        <input type="text" name="username" required>
        <input type="submit" value="提交">
      </div>
      <!-- 提交状态提示 -->
      <div submit-success>提交成功</div>
      <div submit-error>提交失败</div>
    </amp-form>
  </body>
  

  2. 服务端表单适配方案
     如果你需要保留 Web Forms 服务端表单的相关特性（视图状态、服务端控件事件等），可以新增表单控件适配器，修改原生 <form runat="server"> 的渲染输出，将默认的 <form> 标签自动替换为 <amp-form> 标签，不需要修改原有业务代码即可完成适配。

注意事项 #

• 若使用 AMP 表单提交，不需要 Web Forms 默认视图状态和事件验证的话，可以在页面头部的 Page 指令中添加 EnableViewState="false" EnableEventValidation="false" 减少冗余代码。
• 所有页面代码需要符合 AMP 官方规范，不能引入自定义外部 JS 代码，所有交互逻辑需使用 AMP 官方提供的组件实现。

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