locked
Async Postback with HTML Input control on Enter RRS feed

  • Question

  • User-1937872026 posted
        Protected Sub OnInput_EnterHandler(ByVal sender As Object, ByVal e As EventArgs) Handles InputExample.ServerChange
            DebugOutput("")
            DebugOutput("<<CLICKED>> Enter key was detected and box shows " & InputExample.Value)
            DebugOutput("")
        End Sub
    
        Public Function DebugOutput(ByVal message As String)
            Dim toggle_debug As Integer = 1 ' Set to 0 to turn off debug write messages.
            If toggle_debug > 0 Then
                Debug.WriteLine(message)
            End If
            Return Nothing
        End Function

    I've created a sub and a function example above that handles an html input control on server change and outputs what it sees in the box. 

    On the aspx.page I have the input that is also being validated when the enter key is pressed.  I do not have a submit button because I'm forcing autofocus to the input control and my goal is continuous input. 

    Currently, when I put something in the input box and hit enter, it validates and the ServerChange event processes a postback.  While all of this works, what I really want is an async postback and for the entire page not to refresh.  I tried doing this with updatepanel but it's not working.  I have literally scoured for "hours" on this subject and cannot find a way to do an async postback when the enter key is pressed inside of an HTML input control.  Note that I'm referring to System.Web.UI.HtmlControls.HtmlInputText and NOT System.Web.UI.WebControls.Textbox.  I do not want to use the latter. 

    Here is an example of the aspx page:

    <asp:UpdatePanel runat="server">
    
                                            <ContentTemplate>
                                                <div class="form-group">
                                                    <div class="input-group input-group-lg">
                                                        <span class="input-group-addon" id="single-input">Enter Text</span>
    
                                                        <input type="text" class="form-control" id="InputExample" aria-describedby="InputTagHelp"
                                                            placeholder="Click Here and Enter Text" runat="server" autofocus>
                                                    </div>
                                                    <div class="center">
                                                        <asp:RequiredFieldValidator runat="server" ControlToValidate="InputExample"
                                                            CssClass="text-danger" ErrorMessage="This field is Required." />
                                                    </div>
                                            </ContentTemplate>
    
                                            <Triggers>
                                                <asp:AsyncPostBackTrigger ControlID="InputExample" EventName="ServerChange" />
                                            </Triggers>
    
                                        </asp:UpdatePanel>

    Current behavior:

    1. Page loads.
    2. Input box is focused and cursor blinking.
    3. Press enter and validation fails and states that I have to put something in - so far fine.
    4. Type a few characters and hit enter.
    5. Postback begins and entire page is refreshed.
    6. I can see in the Immediate Window in VS that it hit the correct Sub and that it captured the correct information in the input control.

    Issue is that in Step 5 an async postback should be done and the entire page should not be refreshed.

    How do I accomplish this? 

    Sunday, January 14, 2018 9:15 PM

Answers

  • User-707554951 posted

    Hi Elricstorm

    You should have something as below:

            <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
                <asp:UpdatePanel runat="server">
                    <ContentTemplate>
                        <div class="form-group">
                            <div class="input-group input-group-lg">
                                <span class="input-group-addon" id="single-input">Enter Text</span>
                                <asp:TextBox ID="InputExample2" runat="server"  
                                    placeholder="Click Here and Enter Text"   OnTextChanged="InputExample2_TextChanged" AutoPostBack="true"></asp:TextBox>
                               <%-- <input type="text" class="form-control" id="InputExample" aria-describedby="InputTagHelp"
                                    placeholder="Click Here and Enter Text" runat="server" />--%>
                            </div>
                            <div class="center">
                                <asp:RequiredFieldValidator runat="server" ControlToValidate="InputExample2"
                                    CssClass="text-danger" ErrorMessage="This field is Required." />
                            </div>
                            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="InputExample2" EventName="TextChanged" />
                    </Triggers>
                </asp:UpdatePanel>

    CodeBehind:

     protected void Page_Load(object sender, EventArgs e)
            {
                Label2.Text = DateTime.Now.ToString();
            }
    
            protected void InputExample2_TextChanged(object sender, EventArgs e)
            {
                Label1.Text = DateTime.Now.ToString();
              
            }

    Output:

    Best regards

    Cathy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 15, 2018 11:45 AM

All replies

  • User-707554951 posted

    Hi Elricstorm

    You should have something as below:

            <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
                <asp:UpdatePanel runat="server">
                    <ContentTemplate>
                        <div class="form-group">
                            <div class="input-group input-group-lg">
                                <span class="input-group-addon" id="single-input">Enter Text</span>
                                <asp:TextBox ID="InputExample2" runat="server"  
                                    placeholder="Click Here and Enter Text"   OnTextChanged="InputExample2_TextChanged" AutoPostBack="true"></asp:TextBox>
                               <%-- <input type="text" class="form-control" id="InputExample" aria-describedby="InputTagHelp"
                                    placeholder="Click Here and Enter Text" runat="server" />--%>
                            </div>
                            <div class="center">
                                <asp:RequiredFieldValidator runat="server" ControlToValidate="InputExample2"
                                    CssClass="text-danger" ErrorMessage="This field is Required." />
                            </div>
                            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="InputExample2" EventName="TextChanged" />
                    </Triggers>
                </asp:UpdatePanel>

    CodeBehind:

     protected void Page_Load(object sender, EventArgs e)
            {
                Label2.Text = DateTime.Now.ToString();
            }
    
            protected void InputExample2_TextChanged(object sender, EventArgs e)
            {
                Label1.Text = DateTime.Now.ToString();
              
            }

    Output:

    Best regards

    Cathy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 15, 2018 11:45 AM
  • User-1937872026 posted

    Hi Cathy,

    Thank you for providing me the relevant code for the TextBox control.  I was hoping to not have to use that control.  I was more or less curious if it could be accomplished with an HTML Input control versus a TextBox. 

    I will test a few things and once I've completed it, I will mark this as completed if it works.

    Thanks.

    Monday, January 15, 2018 12:58 PM
  • User-1937872026 posted

    This worked out very well.  Thank you so much.

    Thursday, January 18, 2018 5:47 PM