Microsoft Bot Framework WebChat (DirectLine) causing Postback on AJAX Page

what is microsoft bot framework
microsoft bot framework forum
microsoft bot framework interview questions
microsoft bot framework tutorial
microsoft bot framework tutorial pdf
chatbot using microsoft bot framework
bot framework debugging
bot framework document

I am following the steps as detailed here: https://github.com/Microsoft/BotFramework-WebChat to implement Microsoft Bot Framework (in C# SDK). I have tested it on a standalone page and it is working fine. I require to use the DirectLine version as I have to pass values from webpage to the bot (for user initalization).

However, the page where I have to implement this is an ASP.NET WebForms (using ScriptManager and AJAXToolkit).

The issue arises when using the bot. By typing any content in the chat window and pressing enter, the whole page refreshes and the bot reinitailizes to start. This makes the bot unusable.

I am guessing that the chat control's "Send" button is somehow triggering a postback via ScriptManager causing the whole page to refresh. I had to include e.preventDefault() on the click event of the button that shows the chat window to take care of this situation. I am lost when it comes to within the Directline chat control.

Can someone help?

The issue arises when using the bot. By typing any content in the chat window and pressing enter, the whole page refreshes and the bot reinitailizes to start. This makes the bot unusable.

I have same issue when I embed my bot in webform page (.aspx), to solve this problem, I put the chat bot container <div id="mybot" /> inside UpdatePanel control and set ChildrenAsTriggers property to false, which works for me, you can try it.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
    <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
                <ContentTemplate>
                    <div id="mybot" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>
<script>
    BotChat.App({
        directLine: { secret: 'directline_secret_here' },
        user: { id: '1234', firstname: 'firstname_here', lastname: 'lastname_here' },
        bot: { id: 'fehantestbot' },
        resize: 'detect'
    }, document.getElementById("mybot"))
</script>

Screenshot of my test:

microsoft/BotFramework-WebChat, Hi, My bot application requires the username to start the chat conversation. Currently https://github.com/Microsoft/BotFramework-WebChat/blob/master/​public/index.html#L37 The postback message provided got an ajax 403 error, as displayed below. Better Direct Line lifecycle, error handling #238. Handling Postbacks from A Popup Control With an UpdatePanel (VB) 06/02/2008; 2 minutes to read +1; In this article. by Christian Wenz. Download Code or Download PDF. The PopupControl extender in the AJAX Control Toolkit offers an easy way to trigger a popup when any other control is activated.

I had this issue when trying to build this into a DNN module. Prevented it by inserting e.preventDefault to onKeyPress function in the Shell.tsx file in the BotFramework-WebChat project, and rebuilding it.

BotFramework-WebChat\src\Shell.tsx:

//...
    private onKeyPress(e: React.KeyboardEvent<HTMLInputElement>) { 
        if (e.key === 'Enter') {   
            e.preventDefault();  //new line: prevent page reload
            this.sendMessage();
        }
    }
//...

Troubleshooting bots - Bot Service, Troubleshoot general problems in bot development using technical authentication requirements such as Direct Line or Web Chat. What causes an error with HTTP status code 429 "Too Many Requests"? The Bot Framework will preserve message ordering as much as possible. Is this page helpful? sorry. button specified as postBack. document states 'postBack Text of message which client will post to bot. Client applications will not display this message.' but on webchat echo of the value field is shown instead of title

Use this code to prevent page refresh while sending chat from direclineJS webchat:

$(document).keypress(function (e) {
    if (e.keyCode === 13) {
        e.preventDefault();
        return false;
    }
});

Designing and Building Bots with Node.js and Microsoft Bot , and eBook Bulk Sales web page at www.apress.com/bulk-sales. Microsoft's Bot Framework, and custom machine learning models, bot via the Direct Line API. doing everything from ordering pizza to buying clothes to saving Messenger, Slack, and the other public messaging apps; web chat; voice. Multiple questions about Bot Framework V4. Change the input field place holder text Change the status message Auto scroll on new message On new message, chat bot is not scrolling down. This iss

Microsoft/BotBuilder, hi I found out about bot framework because I need no implement the following in my If WebChat is ok for u, that it's 2 lines of HTML code in ur html file/page. what I fail - sending JS POST/ajax request to BotAPI and return message to chat. This is very close to DirectLine, but I don't have much experience , and I feel I  @kanwal019 The bot won't have access to the username until WebChat sends a message (at which point you can access it in the from field in the message). If you'd like to proactively send a message to the bot before the formal conversation begins, you can send a postBack message (a message that is not shown by the control).

Quickreply line bot, How to post user and bot acitivities to conversation - botframework. This Pull Request: https://github.com/Microsoft/BotFramework-WebChat/pull/615 for the WebChat the event of the user typing in my bot through the DirectLine API (​REST). AJAX going on in the background sending individual keystroke info to the bot,  In issue #2022, it was brought to the Web Chat team's attention that the speech behavior of v3 and v4 of Web Chat do not match. In the 4.5 release, the expected behavior of a speech bot has been modified in order to bring parity to v3 behavior regarding input hint.

How to post user and bot acitivities to conversation, ADAL is a great accelerator for application developers working with Microsoft This OAuth flow (which includes a redirect) will cause the application to loose these Many single page applications in Angular 1 make use of Angular routing (or samples will leverage the Bot Framework WebChat control and the DirectLine  Everything starts with a Direct Line secret. You get that by provisioning a Direct Line (not WebChat) channel for your bot in the Bot Framework portal. You can test that with the same code you have above, replacing {token: your_token} with {secret: your_secret}. Once that's working you can consider whether you need to use tokens instead of secrets.

Comments
  • Is it possible for you to use FormFlow instead of a web form?
  • Another option would be to put your form in an Adaptive card take a look at the input sample it is probably a good starting point for what you need to accomplish if you do choose to go this route
  • @JasonSowers The bot is already built using Dialogs... Need that flexibility...
  • Hi @Chints, any updates? do you try to put it inside UpdatePanel control? does it work for you?
  • Thanks for sharing this.. However this didn't solve my issue.. Even with this, I am constantly getting a postback :(
  • Can you edit your question to share your relevant code? It will help reproduce the issue.