Capturing Textbox Enter Key Press Form Submission

I had created a DNN module with a TextBbox and LinkButton submission. The result was to retrieve the set of results and populate a DataGrid.

Textbox was to be used to filter the results. All somewhat typical.

The client had asked for the pressing of the Enter key to be supported, rather than clicking on the search button. In the past forms had simply worked submitting as expected if the return key was pressed in place of clicking on the relevant form button.

However, on this occasion the problem with this was that when the return key was pressed the website navigated to the home page.

Here’s a part of the code, showing the Panel, TextBbox and LinkButton for form submission:

 <asp:Panel ID="pnlSearchOptions" runat="server" Visible="true" CssClass="pagesizeOptions" >
   <div class="searchOptions">
     <span>Product</span>
     <asp:TextBox ID="tbxSearch" runat="server" type="text" />
     <asp:LinkButton ID="cmdSearch" runat="server" resourcekey="cmdSearch" BorderStyle="none" CausesValidation="False" />
   </div>
 </asp:Panel>

Reading around I had seen mention of adding a public sub which would be called. This was to be added as a reference to the textbox.

In the example below is the call to the sub EnterClicked, using the reference added to the textbox PreviewKeyDown=”EnterClicked”

 <asp:Panel ID="pnlSearchOptions" runat="server" Visible="true" CssClass="pagesizeOptions" ">
   <div class="searchOptions">
     <span>Product</span>
     <asp:TextBox ID="tbxSearch" runat="server" type="text" PreviewKeyDown="EnterClicked" />
     <asp:LinkButton ID="cmdSearch" runat="server" resourcekey="cmdSearch" BorderStyle="none" CausesValidation="False" />
   </div>
 </asp:Panel>

And its associated sub:

 
Public Sub EnterClicked()
  Try
    'relevant actions here
  Catch exc As Exception 'Module failed to load
ProcessModuleLoadException(Me, exc)
  End Try
End Sub

I had also seen the use of key handlers and the ubiquitous jQuery.

Private Sub txtDiscount_KeyPress(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyPressEventArgs) Handles tbxSearch.KeyPress
::::
End Sub

Option that worked for me was as given in this Stack Overflow article:

Stackoverflow: submit search with enter key

I simply added a reference to the LinkButton form search within its wrapping panel. All rather easy.

The item added was defaultbutton=”cmdSearch”

 <asp:Panel ID="pnlSearchOptions" runat="server" Visible="true" CssClass="pagesizeOptions" defaultbutton="cmdSearch">
   <div class="searchOptions">
     <span>Product</span>
     <asp:TextBox ID="tbxSearch" runat="server" type="text" />
     <asp:LinkButton ID="cmdSearch" runat="server" resourcekey="cmdSearch" BorderStyle="none" CausesValidation="False" />
   </div>
 </asp:Panel>

Having anticipated the use of a public function, to be called, or another function to capture the key event I was surprised that the solution involved an amendment to the wrapping panel. And such an easy solution!