Bot Framework adaptive/hero卡片如何创建点击不即时post back的3个选项按钮

优先方案：使用Adaptive Card实现 #

Adaptive Card原生支持前端本地状态存储，无需点击选项就触发服务端回发，完全匹配需求：

• 卡片内添加Input.ChoiceSet控件，设置style: "expanded"、isMultiSelect: false渲染为单选按钮样式，三个选项对应ChoiceSet的三个选项值，用户点击选项只会在本地更新选中状态，不会触发任何服务端请求
• 卡片末尾添加Action.Submit类型的提交按钮，用户点击后才会将ChoiceSet的选中值封装到Activity的Value字段回发到Bot后端

示例卡片结构如下：

{
  "type": "AdaptiveCard",
  "version": "1.2",
  "body": [
    {
      "type": "TextBlock",
      "text": "请选择您的选项："
    },
    {
      "type": "Input.ChoiceSet",
      "id": "selectedOption",
      "style": "expanded",
      "isMultiSelect": false,
      "choices": [
        { "title": "选项1", "value": "opt1" },
        { "title": "选项2", "value": "opt2" },
        { "title": "选项3", "value": "opt3" }
      ]
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "提交"
    }
  ]
}

后端获取选中值逻辑：直接从turnContext.Activity.Value.selectedOption字段即可读取用户选中的选项值。 #

兼容方案：使用Hero Card实现 #

如果场景限制必须使用Hero Card，可通过会话状态暂存选中值的方式实现：

• 三个选项按钮设置为messageBack类型，按钮的text字段添加特殊标识前缀（比如select:opt1），同时设置displayText为您已选中：选项1给用户可见反馈
• Bot后端接收到带select:前缀的Activity时，不执行业务逻辑，仅将选中的选项值存入会话状态（ConversationState或UserState），然后返回刷新后的Hero卡片，将已选中的按钮标题添加高亮标识
• Hero Card额外添加第四个提交按钮，按钮的text字段带submit:confirm前缀，后端接收到该标识时，从会话状态取出之前存储的选中值，执行后续业务逻辑

注意事项 #

• Hero Card方案每次点击选项都会触发一次轻量回发，交互体验略差于Adaptive Card方案，优先选择Adaptive Card实现
• Adaptive Card渲染需要对应渠道的渲染器版本不低于v1.2，主流渠道（Web Chat、Teams、微信等）均已支持

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