自适应卡中的轮播

Question

请指导我在 MS bot 框架中创建轮播自适应卡。我正在使用.Net sdk。我尝试使用自适应卡设计器进行设计，但无法做到。

Answer 1

您的问题不够具体，我无法理解您遇到问题的地方，但我可以为您提供创建卡片轮播的基本轮廓。我的代码是nodejs，但它应该足够相似，可以给你一个想法。

您将需要 CardFactory 和 MessageFactory 首先生成卡片，然后生成 Carousel（它采用卡片数组作为输入）。

// First create an empty array for your carousel
var cardArray = [];

// Populate the array with your cards (can use any method, I used a for loop)
for (var idx = 0; idx < dataForCards.length; idx++) {
   // Create the adaptive card
   var adaptiveCard = CardFactory.adaptiveCard({

   // YOUR CARD DEFINITION HERE

   });
   // Push the card to the array for the carousel
   cardArray.push(adaptiveCard);
}
// Send the array as a carousel
await step.context.sendActivity(MessageFactory.carousel(cardArray));

Answer 2

那么，自适应卡片设计器可以帮助您为一张卡片创建模板。在您的情况下，根据您的列表从循环中创建的模板创建附件，并将每个生成的附件添加到 Activity.Attachments。

if(listOfReservationCardsData.Any())
        {
            foreach (var checkInStatusCardData in listOfReservationCardsData.OrderBy(l => Convert.ToDateTime(l.StartDate)))
            {
                listOfAttachments.Add(CreateAdaptiveCardAttachment(filePath, data));
            }
        }

        if (listOfAttachments.Any())
        {
            turnContext.Activity.AttachmentLayout = AttachmentLayoutTypes.Carousel;
            turnContext.Activity.Attachments = listOfAttachments.Take(5).ToList();
            await turnContext.SendActivityAsync(turnContext.Activity, cancellationToken);
        }


private static Attachment CreateAdaptiveCardAttachment(string filePath, object data)
    {
        var adaptiveCardJson = File.ReadAllText(filePath);
        // Create a Template instance from the template payload
        AdaptiveCardTemplate template = new AdaptiveCardTemplate(adaptiveCardJson);

        string cardJson = template.Expand(data);

        var adaptiveCardAttachment = new Attachment()
        {
            ContentType = "application/vnd.microsoft.card.adaptive",
            Content = JsonConvert.DeserializeObject(cardJson),
        };
        return adaptiveCardAttachment;
    }