如何在Microsoft Bot Framework中获取HTML表单字段的值？

嘿，我来帮你搞定这个问题！首先咱们先把HTML表单的消息构造出来，再讲怎么拿到用户输入的字段值，分两种场景给你说明：

一、构造HTML表单消息（适合Web Chat渠道） #

你可以像之前生成表格那样，构造包含<form>标签的HTML内容，添加文本框、密码框这些控件。注意要指定表单的提交地址（对应Bot的消息接口），示例代码如下：

bot.dialog('form_dialog', function (session) {
    // 构建带表单的HTML内容
    const formHTML = `
        <form method="POST" action="/api/messages" style="padding:15px; border:1px solid #ccc; border-radius:8px;">
            <div style="margin-bottom:12px;">
                <label style="display:block; margin-bottom:4px;">用户名:</label>
                <input type="text" name="username" placeholder="请输入用户名" style="padding:6px; width:100%;">
            </div>
            <div style="margin-bottom:12px;">
                <label style="display:block; margin-bottom:4px;">密码:</label>
                <input type="password" name="password" placeholder="请输入密码" style="padding:6px; width:100%;">
            </div>
            <div style="margin-bottom:12px;">
                <label style="display:block; margin-bottom:4px;">国家:</label>
                <input type="text" name="country" placeholder="请输入国家" style="padding:6px; width:100%;">
            </div>
            <button type="submit" style="padding:8px 16px; background:#0078d7; color:white; border:none; border-radius:4px;">提交表单</button>
        </form>
    `;
    const message = {
        type: 'message',
        textFormat: 'xml',
        text: formHTML
    };
    session.send(message);
});

二、获取HTML表单的字段值 #

当用户点击提交按钮后，表单数据会以application/x-www-form-urlencoded格式发送到Bot的后端接口（比如/api/messages），你需要在后端解析这些数据：

1. 配置表单解析中间件（Node.js为例）
   如果你的Bot用Node.js开发，需要用body-parser来解析表单数据：

const bodyParser = require('body-parser');
const express = require('express');
const app = express();

// 解析表单提交的数据
app.use(bodyParser.urlencoded({ extended: true }));

2. 在消息接口中提取字段值
   在处理/api/messages的POST请求时，直接从请求体中获取表单字段：

app.post('/api/messages', (req, res) => {
    // 判断是否是表单提交的请求
    if (req.body.username && req.body.password) {
        // 提取各个字段的值
        const username = req.body.username;
        const password = req.body.password;
        const country = req.body.country;

        // 处理获取到的数据，比如给用户回复确认消息
        const reply = `收到你的提交啦：\n用户名：${username}\n国家：${country}\n密码已为你隐藏~`;
        
        // 按照Bot Framework的格式返回回复
        res.send({
            type: 'message',
            text: reply
        });
    } else {
        // 处理普通的聊天消息（保留你原来的Bot逻辑）
        // ...
    }
});

三、跨渠道推荐方案：用自适应卡片实现表单 #

如果你的Bot需要在多个渠道（比如Teams、Slack）运行，HTML表单可能不被支持，这时候更推荐用自适应卡片，它能跨渠道兼容，而且获取字段值更简单：

1. 构造自适应卡片表单 #

bot.dialog('adaptive_form_dialog', function (session) {
    const adaptiveCard = {
        "type": "AdaptiveCard",
        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
        "version": "1.0",
        "body": [
            {
                "type": "Input.Text",
                "id": "username",
                "placeholder": "请输入用户名"
            },
            {
                "type": "Input.Text",
                "id": "password",
                "placeholder": "请输入密码",
                "isPassword": true
            },
            {
                "type": "Input.Text",
                "id": "country",
                "placeholder": "请输入国家"
            }
        ],
        "actions": [
            {
                "type": "Action.Submit",
                "title": "提交"
            }
        ]
    };

    const message = {
        type: 'message',
        attachments: [
            {
                contentType: "application/vnd.microsoft.card.adaptive",
                content: adaptiveCard
            }
        ]
    };
    session.send(message);
});

2. 获取自适应卡片的字段值 #

在Waterfall Dialog的后续步骤中，直接从activity.value里提取数据：

// 假设这是Waterfall的第二个步骤
bot.dialog('adaptive_form_dialog', [
    function (session) {
        // 发送自适应卡片（上面的代码）
        // ...
    },
    function (session, results) {
        // 获取提交的表单值
        const formValues = session.message.value;
        const username = formValues.username;
        const password = formValues.password;
        const country = formValues.country;

        session.send(`你提交的用户名是${username}，来自${country}！`);
        session.endDialog();
    }
]);

这样不管是Web Chat还是其他渠道，都能正常工作啦~

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