在Bot框架中将数据绑定到自适应卡中

Question

我们如何从后端将数据绑定到自适应卡？我从https://adaptivecards.io/designer设计了一张卡片，它返回了一个JSON文件。

Answer 1

AdaptiveCards本质上只是JSON对象，因此向其中添加内容就像编辑使用AdaptiveCard Designer创建的JSON一样简单。在NodeJs中，这非常简单。但是，在C＃中，您需要使用JObject和JArray从设计器中解析和修改JSON文件。

自适应卡

这是我与设计人员创建的简单AdaptiveCard，将在下面的NodeJ和C＃的示例中使用。

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "horizontalAlignment": "Center",
            "weight": "Bolder",
            "text": "My Adaptive Card",
            "isSubtle": true
        },
        {
            "type": "TextBlock",
            "text": "New TextBlock"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}

NodeJS BotFramework SDK V4

一旦我们从JSON文件中读取了AdaptiveCard，我们就可以直接更改卡中的值或添加其他组件。然后，我们可以使用CardFactory渲染卡并将其发送给用户。

const { CardFactory } = require('botbuilder');
const Card = require('./resources/my-adaptive-card');

...

// Change Text Field
Card.body[1].text = "Item 1";

// Add Text Field
Card.body.push({
    type: "TextBlock",
    text: "Item 2"
});

await turnContext.sendActivity({attachments: [CardFactory.adaptiveCard(Card)]});

C＃BotFramework SDK V4

由于我们无法像在NodeJS中那样直接在C＃中修改JSON，因此必须使用Newtonsoft.Json.Linq名称空间，以便我们可以使用JObject和JArray对卡进行更改。一旦进行了必要的更改，就可以呈现卡，并将其作为AdaptiveCard发送给用户。

有关在C＃中修改JSON的更多信息，请查看JSON.Net Documentation。

using Newtonsoft.Json.Linq;

...

// Parse AdaptiveCard JSON from file
var adaptiveCardJson = File.ReadAllText(@".\Resources\AdaptiveCard.json");
JObject json = JObject.Parse(adaptiveCardJson);

// Get the `body` of the AdaptiveCard
JArray body = (JArray)json["body"];

// Change Text Field
((JObject)body[1])["text"] = "Item 1";

// Add Text Field
body.Add(JObject.Parse("{\"type\": \"TextBlock\", \"text\": \"Item 2\"}"));

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

var reply = turnContext.Activity.CreateReply();
reply.Attachments = new List<Attachment>() { adaptiveCardAttachment };
await turnContext.SendActivityAsync(reply, cancellationToken);

结果

更改前的AdaptiveCard

更改后的AdaptiveCard