c# - 自适应卡 : Dynamically show Card on dropdown click in Adaptive Card : Bot Builder

Question

我必须创建一个自适应卡片，其中包含城市名称并且每个城市都有不同的假期列表。我必须在下拉列表中显示城市名称，并且在选择每个城市时我必须显示包含假期列表的子卡。

我开发了以下代码:

private async Task<DialogTurnResult> ShowCard(WaterfallStepContext stepContext, CancellationToken cancellationToken)
{
    List<string> city = new List<string>() { "Delhi", "Bangalore", "Mumbai" };
    List<string> date = new List<string>() { "1-Jan", "26-Jan", "15-Aug" };
    List<string> des = new List<string>() { "New Year", "Republic Day", "Independence Day" };

    List<string> date1 = new List<string>() { "1-Jan", "26-Jan", "15-Aug", "25-Dec" };
    List<string> des1 = new List<string>() { "New Year", "Republic Day", "Independence Day", "Christmas Day" };

    List<string> date2 = new List<string>() { "1-Jan", "25-Dec" };
    List<string> des2 = new List<string>() { "New Year", "Christmas Day" };

    List<AdaptiveCard> cards = new List<AdaptiveCard>();
    cards.Add(HolidayListAdaptiveCard(date, des));
    cards.Add(HolidayListAdaptiveCard(date1, des1));
    cards.Add(HolidayListAdaptiveCard(date2, des2));

    var mainCard = new AdaptiveCard(new AdaptiveSchemaVersion(1, 0));
    var column3 = new AdaptiveColumn();
    column3.Items.Add(new AdaptiveTextBlock() { Text = "Holiday City", Weight = AdaptiveTextWeight.Bolder });
    var columnSet1 = new AdaptiveColumnSet();
    columnSet1.Columns.Add(column3);
    var container1 = new AdaptiveContainer();
    container1.Style = AdaptiveContainerStyle.Emphasis;
    container1.Items.Add(columnSet1);
    mainCard.Body.Add(container1);

    List<AdaptiveShowCardAction> adaptiveShowCardActions = new List<AdaptiveShowCardAction>();
    for (int i = 0; i < city.Count; i++)
    {
        mainCard.Actions.Add(new AdaptiveShowCardAction() { Title = city[i], Card = cards[i] });
    }

    var attachment = new Attachment
    {
        ContentType = AdaptiveCard.ContentType,
        Content = mainCard
    };
    var reply = MessageFactory.Attachment(attachment);
    await stepContext.Context.SendActivityAsync(reply);
    return new DialogTurnResult(DialogTurnStatus.Waiting);
}

private AdaptiveCard HolidayListAdaptiveCard(List<string> date, List<string> description)
{
    var card = new AdaptiveCard(new AdaptiveSchemaVersion(1, 0));
    List<AdaptiveColumn> columns = new List<AdaptiveColumn>();
    var column = new AdaptiveColumn();
    var column1 = new AdaptiveColumn();
    var column2 = new AdaptiveColumn();

    var textBlock = new AdaptiveTextBlock();
    textBlock.Text = "Sr. No";
    textBlock.Weight = AdaptiveTextWeight.Bolder;
    textBlock.Size = AdaptiveTextSize.Large;
    textBlock.Color = AdaptiveTextColor.Accent;
    column.Items.Add(textBlock);

    var textBlock1 = new AdaptiveTextBlock();
    textBlock1.Text = "Date";
    textBlock1.Weight = AdaptiveTextWeight.Bolder;
    textBlock1.Size = AdaptiveTextSize.Large;
    textBlock1.Color = AdaptiveTextColor.Good;
    column1.Items.Add(textBlock1);

    var textBlock2 = new AdaptiveTextBlock();
    textBlock2.Text = "Description";
    textBlock2.Weight = AdaptiveTextWeight.Bolder;
    textBlock2.Size = AdaptiveTextSize.Large;
    textBlock2.Color = AdaptiveTextColor.Dark;
    column2.Items.Add(textBlock2);

    for (int i = 0; i < date.Count; i++)
    {
        column.Items.Add(new AdaptiveTextBlock() { Text = (i + 1).ToString() });
        column1.Items.Add(new AdaptiveTextBlock() { Text = date[i] });
        column2.Items.Add(new AdaptiveTextBlock() { Text = description[i] });
    }

    var columnSet = new AdaptiveColumnSet();
    columnSet.Columns.Add(column);
    columnSet.Columns.Add(column1);
    columnSet.Columns.Add(column2);
    var container = new AdaptiveContainer();
    container.Style = AdaptiveContainerStyle.Emphasis;
    container.Items.Add(columnSet);
    card.Body.Add(container);
    return card;
}

O/P:

问题:城市名称作为单独的按钮出现，但我需要下拉列表中的城市名称。

Answer 1

您可以使用 Input.ChoiceSet 在自适应卡片中创建下拉菜单元素并将 style 设置为 "compact"。请注意，紧凑样式是 Teams 中的默认样式。

如果您正在使用网络聊天，您只能扩展自适应卡片功能，因此您将无法响应此下拉列表中的事件，并且您将无法在用户填写卡片时修改卡片。您需要让用户选择一个城市，然后单击提交按钮。虽然 Teams 允许消息更新，因此您可以更新卡片以响应提交操作，但发送一张包含假期列表的全新卡片可能更好也更容易。