Set Enter on keypress to start search asp.net c#

Question

I've a page with a GridView and a search textbox with his button near to it and i want to set that when the user press "ENTER" start the search and only that. I don't know how to set this thing in ASP.NET C#.

And how can I do to modify the style of:

Messaggio_Ricerca.Text = " I caratteri inseriti nella barra di ricerca non sono validi. "

when it comes out ?

ASP Code:

     Ricerca :
            <asp:TextBox ID="CampoRicerca" runat="server" CssClass="textbox" Width="300px" Height="25px" Placeholder="Inserisci qui i dati che vuoi cercare" ></asp:TextBox>
            <asp:Button ID="BTN_Ricerca" OnClick="Ricerca_NomeInserito" runat="server" Text="" Width="35" Height="35" CssClass="ricerca"></asp:Button>
            <asp:Label ID="Messaggio_Ricerca" runat="server"></asp:Label>

C# Code:

protected void Ricerca_NomeInserito(object sender, EventArgs e)
        {
            this.RicercaCliente();
        }

private void RicercaCliente()
        {
            //String query code

            if (String.IsNullOrWhiteSpace(CampoRicerca.Text))
            {
                Messaggio_Ricerca.Text = " I caratteri inseriti nella barra di ricerca non sono validi. ";
            }

            else
            {
                //SqlCommand code
            }
       }

I think you could find the right direction to solve your problem here: https://stackoverflow.com/questions/1305954/asp-net-postback-with-javascript — Steve, Feb 08 '22 at 12:04

Albert D. Kallal · Accepted Answer · 2022-02-08T16:53:01.643

ok, so say we have this markup:

A simple grid and a search:

<asp:Label ID="Label1" runat="server" Text="Search for Fighter jet" Font-Size="Large"></asp:Label>
<asp:TextBox ID="txtSearch" runat="server" Style="margin-left:15px" Font-Size="Large"></asp:TextBox>
<asp:Button ID="cmdSearch" runat="server" Text="search"
    style="margin-left:15px" CssClass="btn" OnClick="cmdSearch_Click"
    />
<br />
<br />

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="ID" CssClass="table"  >
        <Columns>
            <asp:BoundField DataField="Fighter" HeaderText="Fighter"  />
            <asp:BoundField DataField="Engine" HeaderText="Engine"  />
            <asp:BoundField DataField="Thrust" HeaderText="Thrust"  />
            <asp:BoundField DataField="Description" HeaderText="Description" />

            <asp:TemplateField HeaderText="View">
                <ItemTemplate>
                <asp:ImageButton ID="btnImage" runat="server" Height="68px" Width="149px"
                    OnClientClick ="popimage(this);return false"
                    ImageUrl = '<%# Eval("ImagePath") %>' /> 
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

Our code to load is thus this:

   protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            LoadGrid("");
    }

    void LoadGrid(string MySearch)
    {
        using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
        {
            using (SqlCommand cmdSQL = new SqlCommand("SELECT * from Fighters ", conn))
            {
                if (MySearch != "")
                {
                    cmdSQL.CommandText += @" WHERE Fighter LIKE @Fighter + '%'";
                    cmdSQL.Parameters.Add("Fighter", SqlDbType.NVarChar).Value = MySearch;
                }
                conn.Open();
                DataTable rstData = new DataTable();
                rstData.Load(cmdSQL.ExecuteReader());
                GridView1.DataSource = rstData;
                GridView1.DataBind();
            }
        }
    }

    protected void cmdSearch_Click(object sender, EventArgs e)
    {
        LoadGrid(txtSearch.Text);
    }

And now we have this:

So, in place of typing in the search text and THEN hitting the search button?

Sure, lets drop (remove) the search button. Now we use the text changed event of the text box, and we set auto postback = true.

So, we now have this markup:

<asp:Label ID="Label1" runat="server" Text="Search for Fighter jet" Font-Size="Large"></asp:Label>
<asp:TextBox ID="txtSearch" runat="server" Style="margin-left:15px" Font-Size="Large"
    AutoPostBack="true" OnTextChanged="txtSearch_TextChanged" >
</asp:TextBox>
    
<br />
<br />

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"

So, with the text box set as auto postback = true, then all of its events will trigger - and fire the events.

And the code behind? We grab the button code and move it over to the text changed event like this:

    protected void txtSearch_TextChanged(object sender, EventArgs e)
    {
        LoadGrid(txtSearch.Text);
    }

So now we just type some text, and hit enter key, we get this:

Set Enter on keypress to start search asp.net c#

1 Answers1