自适应卡片 HTML 渲染未将复选框设置为选中

Question

我正在使用 C# 库来呈现 appaptive 卡片。

• 我有一个绑定到数据模板的简单卡片模板。
• 我将数据模板展开到下面的基本卡片中，可以看到复选框值的值是正确的。
• 然后我使用 C# 库渲染自适应卡。

不幸的是，为输入呈现的 HTML 内容没有任何应检查的项目的 "checked" 属性。

任何人对此有任何想法，我做错了什么，或者误解了图书馆应该做什么。

我在下面包含了示例卡片、JSON 和 CS 程序。

亲切的问候

程序

using AdaptiveCards;
using AdaptiveCards.Rendering.Html;
using System;
using System.IO;

namespace CardLoader
{
    class Program
    {
        static void Main(string[] args)
        {
            var basePath = System.IO.Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAssembly().Location);
            var cardJson = File.ReadAllText($"{basePath}/BasicCheckList.json");
            var sampleData = Newtonsoft.Json.JsonConvert.DeserializeObject(File.ReadAllText($"{basePath}/SampleJsonData.json"));
            var template = new AdaptiveCards.Templating.AdaptiveCardTemplate(cardJson);
            var cardPayload = template.Expand(sampleData);
            var card = AdaptiveCard.FromJson(cardPayload);
            AdaptiveCardRenderer renderer = new AdaptiveCardRenderer();
            RenderedAdaptiveCard renderedCard = renderer.RenderCard(card.Card);
            HtmlTag html = renderedCard.Html;
        }
    }
}

样本数据

{
  "status": {
    "code": "Pending",
    "label": "Pending",
    "url": "https://adaptivecards.io/content/pending.png"
  },
  "approveItems": [
    {
      "id": "pay-docs",
      "title": "Received Proof of Payment",
      "value": "true",
      "separator": false
    }
  ]
}

样本卡

{
  "type": "AdaptiveCard",
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.2",
  "body": [
    {
      "type": "Container",
      "items": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "width": "stretch",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "**CLAIMS APPROVAL**",
                  "wrap": true,
                  "size": "Large",
                  "weight": "Bolder"
                }
              ]
            },
            {
              "type": "Column",
              "width": "auto",
              "items": [
                {
                  "type": "Image",
                  "url": "${status.url}",
                  "altText": "${status.label}",
                  "height": "30px"
                }
              ]
            }
          ]
        }
      ],
      "style": "emphasis",
      "bleed": true
    },
    {
      "type": "Container",
      "items": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "width": "stretch",
              "items": [
                {
                  "$data": "${approveItems}",
                  "type": "Input.Toggle",
                  "title": "${title}",
                  "value": "${value}",
                  "separator": "${separator}",
                  "id": "${id}"
                }
              ]
            }
          ]
        }
      ],
      "style": "warning"
    }
  ]
}

Answer 1

如果数据与您在示例数据中显示的一样，则此处的 value 属性是错误的。 您想要一个布尔值（用于复选框），但您发送的是一个包裹在字符串中的布尔值。

错误：

"approveItems": [{
    "id": "pay-docs",
    "title": "Received Proof of Payment",
    "value": "true", <-- this is a string
    "separator": false
}]

正确：

"approveItems": [{
    "id": "pay-docs",
    "title": "Received Proof of Payment",
    "value": true, <-- This has to be a bool
    "separator": false
}]