如何在Microsoft聊天机器人中获取AdaptiveCard控件变更值并实现联动？

嘿，我来帮你搞定这个在Microsoft Bot Framework的AdaptiveCard里实现控件联动的问题！要实现选择Country的ChoiceSet后自动填充Mobile输入框的国家代码，核心思路是利用AdaptiveCard的OnChange触发器结合Bot后端处理，下面是具体步骤和代码示例：

核心实现思路 #

• 给ChoiceSet添加OnChange动作，当选项变更时自动提交当前卡片数据到Bot
• Bot接收数据后，根据选中的国家代码更新TextInput的占位符或默认值
• 将更新后的AdaptiveCard返回给用户，完成联动效果

修改后的AdaptiveCard构建代码（C#） #

首先要确保AdaptiveCard版本使用1.3及以上（OnChange特性在1.3版本引入），然后给ChoiceSet添加变更触发动作：

// 定义国家选项，Value存对应的国家代码
var countryChoices = new List<AdaptiveChoice>
{
    new AdaptiveChoice { Title = "United States", Value = "+1" },
    new AdaptiveChoice { Title = "China", Value = "+86" },
    new AdaptiveChoice { Title = "United Kingdom", Value = "+44" }
};

// 构建带联动逻辑的AdaptiveCard
var adaptiveCard = new AdaptiveCard(new AdaptiveSchemaVersion(1, 3))
{
    Body = new List<AdaptiveElement>
    {
        new AdaptiveTextBlock { Text = "Country" },
        new AdaptiveChoiceSetInput
        {
            Id = "Country",
            Speak = "<s>Please enter your country.</s>",
            IsMultiSelect = false,
            Style = AdaptiveChoiceInputStyle.Compact,
            Separation = AdaptiveSeparationStyle.Default,
            Choices = countryChoices,
            Value = "+1", // 设置默认选中项
            // 添加OnChange触发器，选项变更时提交数据到Bot
            OnChange = new AdaptiveActionSet
            {
                Actions = new List<AdaptiveAction>
                {
                    new AdaptiveSubmitAction
                    {
                        Title = "Update Mobile Field",
                        Data = new { ActionType = "CountryChanged" } // 自定义标识，方便Bot识别该提交
                    }
                }
            }
        },
        new AdaptiveTextInput
        {
            Id = "Mobile",
            Speak = "<s>Please enter your mobile with country code.</s>",
            Placeholder = "+(country code)(Your Phone Number)",
            Style = AdaptiveTextInputStyle.Tel,
            IsRequired = true
        }
    }
};

Bot后端处理逻辑 #

在Bot的消息处理方法中，监听来自ChoiceSet变更的提交，更新卡片后返回给用户：

protected override async Task OnMessageActivityAsync(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken)
{
    // 判断是否是AdaptiveCard的提交数据
    if (turnContext.Activity.Value != null)
    {
        var submittedData = JObject.FromObject(turnContext.Activity.Value);
        
        // 识别是否是Country选择变更的提交
        if (submittedData["ActionType"]?.ToString() == "CountryChanged")
        {
            var selectedCountryCode = submittedData["Country"]?.ToString();
            
            // 重新构建更新后的卡片
            var updatedCard = new AdaptiveCard(new AdaptiveSchemaVersion(1, 3))
            {
                Body = new List<AdaptiveElement>
                {
                    new AdaptiveTextBlock { Text = "Country" },
                    new AdaptiveChoiceSetInput
                    {
                        Id = "Country",
                        Speak = "<s>Please enter your country.</s>",
                        IsMultiSelect = false,
                        Style = AdaptiveChoiceInputStyle.Compact,
                        Separation = AdaptiveSeparationStyle.Default,
                        Choices = countryChoices,
                        Value = selectedCountryCode,
                        OnChange = new AdaptiveActionSet
                        {
                            Actions = new List<AdaptiveAction>
                            {
                                new AdaptiveSubmitAction
                                {
                                    Title = "Update Mobile Field",
                                    Data = new { ActionType = "CountryChanged" }
                                }
                            }
                        }
                    },
                    new AdaptiveTextInput
                    {
                        Id = "Mobile",
                        Speak = "<s>Please enter your mobile with country code.</s>",
                        // 更新占位符为选中的国家代码
                        Placeholder = $"{selectedCountryCode} (Your Phone Number)",
                        Style = AdaptiveTextInputStyle.Tel,
                        IsRequired = true
                    }
                }
            };
            
            // 将更新后的卡片作为附件发送给用户
            var updatedAttachment = new Attachment
            {
                ContentType = AdaptiveCard.ContentType,
                Content = updatedCard
            };
            await turnContext.SendActivityAsync(MessageFactory.Attachment(updatedAttachment), cancellationToken);
            return;
        }
    }
    
    // 首次交互或非联动提交时，发送初始卡片
    var initialAttachment = new Attachment { ContentType = AdaptiveCard.ContentType, Content = adaptiveCard };
    await turnContext.SendActivityAsync(MessageFactory.Attachment(initialAttachment), cancellationToken);
}

关键注意事项 #

• AdaptiveCard版本：必须使用1.3及以上版本才能支持OnChange特性
• 自定义标识：通过Data字段中的ActionType，可以让Bot区分是控件变更的临时提交还是最终的表单提交
• 兼容性：这种后端处理的方式兼容所有Bot支持的渠道（Teams、Web Chat等），如果是纯前端场景也可以用客户端脚本处理，但Bot场景下后端处理更通用

内容的提问来源于stack exchange，提问作者Qaisar Shabbir Awan