如何在带有选项&的聊天窗口中显示HTML表C#使用Microsoft BOT Framework V4模板在其中单击按钮?

问题描述:

如何在使用C#通过Microsoft BOT Framework创建的网络聊天机器人中,在聊天窗口中显示HTML表以及其中的选项和按钮?

How to display HTML table inside a chat window with options and buttons inside it in a web chat bot created through Microsoft BOT Framework using C#?

我正在开发使用具有多个对话框类的瀑布对话框进行聊天机器人,其中每个类根据在Web聊天窗口中选择的选项执行特定任务。

I am developing a Chat Bot using waterfall dialog having multiple dialog classes where each class does a specific task based upon the option selected in the web chat Window.

我需要在网络聊天机器人窗口中显示一个表,以便显示一个带有TH,TD和TR的HTML表,并且每行中都有特定按钮

What i need is to display a table in web chat bot window such that is displays a a HTML table with TH's,TD's and TR's and each row with specific button in one of its columns in each row such that the button when clicked dies the specific action?

这行可以完成吗?

如果可以做到这一点,使用自适应卡只是选项,否则我们实际上可以显示在C#程序内部创建的HTML表直接显示在Web聊天机器人中的流作家?

If this can be done, is using Adaptive Cards is only the Option or we can actually display a HTML table created inside the C# program inside a stream writer displayed directly into the web Chat Bot?

请逐步解决此问题,以逐步详细的指导方式提供帮助,因为我是C#编码的新手和BOT。

Please help in this issue as detailed as possible in a step by step detailed guide manner as i am new to C# coding and BOT.

该机器人使用以下语言构建:
语言:C#
SDK:V4模板
框架:Microsoft Bot框架

The bot is build using: Language: C# SDK : V4 template Framework: Microsoft Bot Framework

搜索时得到的答案与使用列集选项的自适应卡有关,想知道我们是否可以通过实际上直接在流内部构造HTML内容并在WebChat中显示表格来做到这一点Bot。

When searched got the answer as to do using Adaptive cards using column set options wanted to know if we can do it by actually directly constructing a HTML content inside a stream and display the table in the WebChat Bot.

默认情况下,网络聊天使用 markdown-it npm包来呈现传入的活动。默认的渲染器未配置为处理HTML,因此您将无法立即发送活动中的HTML表格;但是,您可以实现自己的支持HTML的markdown渲染器,并将其作为道具传递给网络聊天。

By default, Web Chat uses the markdown-it npm package to render incoming activities. The default renderer isn't configured to handle HTML so you won't be able to send an HTML table in activity out of the box; however, you can implement your own markdown renderer that supports HTML and pass it as a prop to Web Chat.

const markdownIt = new MarkdownIt({ html: true, linkify: true, typographer: true });
const renderMarkdown = text => markdownIt.render(text);

 ...

window.WebChat.renderWebChat({
  directLine: window.WebChat.createDirectLine({ token }),
  renderMarkdown
}, document.getElementById('webchat'));

有关更多详细信息,请查看此问题在GitHub上的Web Chat Repo中。

For more details, take a look at this issue on GitHub in the Web Chat Repo.