如何在Teams自适应卡片Tab应用中将模态弹窗数据传回主页签并刷新

一、后端处理：构造任务模块提交响应 #

在OnTeamsTaskModuleSubmitAsync方法中，提取提交的Age数据后，需要返回包含数据的message类型响应，让前端能接收回传的值：

protected override Task<TaskModuleResponse> OnTeamsTaskModuleSubmitAsync(ITurnContext<IInvokeActivity> turnContext, TaskModuleRequest taskModuleRequest, CancellationToken cancellationToken)
{
    // 从提交 payload 中提取年龄值
    var selectedAge = taskModuleRequest.Data["Age"].ToString();

    // 构造回传响应，将年龄数据放入Value中
    return Task.FromResult(new TaskModuleResponse
    {
        Task = new TaskModuleContinueResponse
        {
            Type = "message",
            Value = new { Age = selectedAge }
        }
    });
}

二、前端处理：监听任务模块回调并更新主页签 #

主页签的前端页面（通常是HomeTab对应的HTML/JS）需要在调用任务模块时指定success回调，接收回传数据后刷新卡片：

1. 初始化Teams SDK（页面加载时执行）

microsoftTeams.initialize();

2. 调用任务模块并设置回调

// 打开任务模块的函数
function openAgeSelectorTaskModule() {
    const taskModuleConfig = {
        url: "/taskmodule", // 你的任务模块页面URL
        title: "选择年龄组",
        height: 300,
        width: 400
    };

    // 启动任务模块，指定提交后的回调函数
    microsoftTeams.tasks.startTask(taskModuleConfig, handleTaskModuleSubmit);
}

// 处理任务模块提交的回调
function handleTaskModuleSubmit(result) {
    if (result && result.Age) {
        // 更新主页签的自适应卡片
        renderUpdatedCard(result.Age);
    }
}

3. 刷新并渲染更新后的卡片

可以选择前端直接构造卡片或调用后端接口获取更新后的卡片，以下是两种实现方式：

方式一：前端直接构造卡片

function renderUpdatedCard(selectedAge) {
    // 获取卡片容器（假设页面中有id为adaptiveCardContainer的元素）
    const cardContainer = document.getElementById("adaptiveCardContainer");

    // 构造包含年龄显示的自适应卡片
    const updatedCard = {
        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
        "type": "AdaptiveCard",
        "version": "1.4",
        "body": [
            // 新增年龄显示控件
            {
                "type": "TextBlock",
                "text": `已选择年龄组：${selectedAge}`,
                "size": "Medium",
                "weight": "Bolder"
            },
            // 保留原有卡片内容...
        ]
    };

    // 渲染更新后的卡片
    AdaptiveCards.renderCard(cardContainer, updatedCard);
}

方式二：调用后端接口获取更新后的卡片

如果卡片内容需要后端生成，可以新增后端接口保存数据并返回卡片：
// 后端HomeTab控制器新增接口

[HttpPost("update-selected-age")]
public IActionResult UpdateSelectedAge(string age)
{
    // 可选：将年龄存储到Session/数据库（根据业务需求）
    HttpContext.Session.SetString("SelectedAge", age);

    // 构造更新后的自适应卡片
    var adaptiveCard = new AdaptiveCard(new AdaptiveSchemaVersion(1, 4))
    {
        Body = new List<AdaptiveElement>
        {
            new AdaptiveTextBlock
            {
                Text = $"已选择年龄组：{age}",
                Size = AdaptiveTextSize.Medium,
                Weight = AdaptiveTextWeight.Bolder
            },
            // 原有卡片元素...
        }
    };

    return Json(adaptiveCard);
}

// 前端调用接口并渲染

function renderUpdatedCard(selectedAge) {
    fetch(`/homeTab/update-selected-age?age=${encodeURIComponent(selectedAge)}`, {
        method: "POST"
    })
    .then(res => res.json())
    .then(updatedCard => {
        const cardContainer = document.getElementById("adaptiveCardContainer");
        AdaptiveCards.renderCard(cardContainer, updatedCard);
    });
}

内容的提问来源于stack exchange，提问作者user2065205