如何在MS Bot Framework中实现点击Yes/No后禁用按钮？

嘿，我来帮你搞定这个需求！在MS Bot Framework里实现点击Yes/No按钮后禁用它们，核心思路就是按钮触发后更新卡片状态，把按钮设为不可用。下面分两种常见场景给你具体方案：

自适应卡片是Bot Framework里最常用的交互卡片类型，它原生支持按钮的禁用属性，实现起来最直接。

步骤1：定义初始自适应卡片 #

给每个按钮添加唯一id，方便后续识别，同时设置点击时提交的数据：

// C# 示例
var adaptiveCard = new AdaptiveCard(new AdaptiveSchemaVersion(1, 0))
{
    Body = { new AdaptiveTextBlock { Text = "Do you want to proceed?" } },
    Actions = {
        new AdaptiveSubmitAction
        {
            Title = "Yes",
            Id = "yesBtn",
            Data = new { choice = "Yes" }
        },
        new AdaptiveSubmitAction
        {
            Title = "No",
            Id = "noBtn",
            Data = new { choice = "No" }
        }
    }
};

// 发送初始卡片给用户
await turnContext.SendActivityAsync(MessageFactory.Attachment(new Attachment
{
    ContentType = AdaptiveCard.ContentType,
    Content = adaptiveCard
}), cancellationToken);

如果是Node.js环境，语法如下：

// Node.js 示例
const adaptiveCard = {
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [{"type": "TextBlock", "text": "Do you want to proceed?"}],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Yes",
            "id": "yesBtn",
            "data": {"choice": "Yes"}
        },
        {
            "type": "Action.Submit",
            "title": "No",
            "id": "noBtn",
            "data": {"choice": "No"}
        }
    ]
};

// 发送卡片
await context.sendActivity({
    attachments: [CardFactory.adaptiveCard(adaptiveCard)]
});

步骤2：处理按钮点击并禁用按钮 #

在消息处理逻辑中，解析用户提交的按钮数据，然后构建一个按钮已禁用的新卡片，替换掉原来的消息：

// C# 处理逻辑
if (turnContext.Activity.Value != null)
{
    // 解析用户选择的数据
    var choiceData = JsonConvert.DeserializeObject<dynamic>(turnContext.Activity.Value.ToString());
    string userChoice = choiceData.choice;

    // 构建更新后的卡片，将两个按钮设为禁用
    var updatedCard = new AdaptiveCard(new AdaptiveSchemaVersion(1, 0))
    {
        Body = { new AdaptiveTextBlock { Text = $"You chose: {userChoice}" } },
        Actions = {
            new AdaptiveSubmitAction
            {
                Title = "Yes",
                Id = "yesBtn",
                IsEnabled = false, // 禁用Yes按钮
                Data = new { choice = "Yes" }
            },
            new AdaptiveSubmitAction
            {
                Title = "No",
                Id = "noBtn",
                IsEnabled = false, // 禁用No按钮
                Data = new { choice = "No" }
            }
        }
    };

    // 替换原来的消息，实现按钮禁用效果
    await turnContext.UpdateActivityAsync(MessageFactory.Attachment(new Attachment
    {
        ContentType = AdaptiveCard.ContentType,
        Content = updatedCard
    }, turnContext.Activity.ReplyToId), cancellationToken);
}

Node.js的处理逻辑：

// Node.js 处理逻辑
if (context.activity.value) {
    const userChoice = context.activity.value.choice;
    // 构建更新后的卡片，禁用按钮
    const updatedCard = {
        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
        "type": "AdaptiveCard",
        "version": "1.0",
        "body": [{"type": "TextBlock", "text": `You chose: ${userChoice}`}],
        "actions": [
            {
                "type": "Action.Submit",
                "title": "Yes",
                "id": "yesBtn",
                "isEnabled": false,
                "data": {"choice": "Yes"}
            },
            {
                "type": "Action.Submit",
                "title": "No",
                "id": "noBtn",
                "isEnabled": false,
                "data": {"choice": "No"}
            }
        ]
    };
    // 替换原消息
    await context.updateActivity({
        id: context.activity.replyToId,
        attachments: [CardFactory.adaptiveCard(updatedCard)]
    });
}

如果你用的是Hero Card，它本身没有按钮禁用属性，这时候可以通过替换成无按钮的卡片来实现类似效果：

// C# 初始Hero Card
var heroCard = new HeroCard
{
    Text = "Do you want to proceed?",
    Buttons = new List<CardAction>
    {
        new CardAction(ActionTypes.PostBack, "Yes", value: "Yes"),
        new CardAction(ActionTypes.PostBack, "No", value: "No")
    }
};

await turnContext.SendActivityAsync(MessageFactory.Attachment(heroCard.ToAttachment()), cancellationToken);

处理点击逻辑：

if (turnContext.Activity.Text == "Yes" || turnContext.Activity.Text == "No")
{
    string userChoice = turnContext.Activity.Text;
    // 发送不带按钮的新卡片替换原消息
    var updatedCard = new HeroCard
    {
        Text = $"You chose: {userChoice}"
    };
    await turnContext.UpdateActivityAsync(MessageFactory.Attachment(updatedCard.ToAttachment(), turnContext.Activity.ReplyToId), cancellationToken);
}

• 确保你的Web Chat/Teams客户端是最新版本，自适应卡片的isEnabled属性需要客户端支持。
• 使用UpdateActivityAsync（C#）或updateActivity（Node.js）替换原消息，比发送新消息的用户体验更好，不会出现重复卡片。
• 如果是在Teams环境中，自适应卡片的禁用按钮功能同样生效，无需额外配置。

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