Type record in textbox and move the focus out of it then all records related to this will be displayed in a grid view without refreshing

In this blog we will know when we type record in textbox and move the focus out of it then all records related to this will be displayed in a grid view without refreshing the whole webpage.


Table Creation


Create table Contacts (id varchar(50),name varchar(50),city varchar(50))

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Untitled Page</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

  

        <asp:UpdatePanel ID="up1" runat="server">

           <ContentTemplate >

           <asp:Label ID="Label1" runat="server" Text="Insert Name" BackColor="#FFFF99"

                   ForeColor="Red" Width="100px"></asp:Label>

           <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"

            ontextchanged="TextBox1_TextChanged"></asp:TextBox>

        </ContentTemplate>

 

      <Triggers>

       <asp:AsyncPostBackTrigger ControlID ="TextBox1" />

      </Triggers>

   </asp:UpdatePanel>

        <br />

 

  <asp:UpdatePanel ID="up2" runat="server">     

     <ContentTemplate >

    <asp:GridView ID="GridView1" runat="server">

    </asp:GridView>

   

      

     </ContentTemplate>

     <Triggers >

        <asp:AsyncPostBackTrigger ControlID ="GridView1" />

        </Triggers>

     </asp:UpdatePanel>

        <br />

    </div>

    </form>

</body>

</html>

 

using System;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page

{

    string connStr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;

    SqlDataAdapter ad = new SqlDataAdapter();

    SqlCommand cmd = new SqlCommand();

    SqlDataAdapter sqlda;

    DataSet ds;

    string str;

   

    protected void TextBox1_TextChanged(object sender, EventArgs e)

    {

        SqlConnection conn = new SqlConnection(connStr);

        conn.Open();

        str = "select * from Contacts where name like '" + TextBox1.Text + "%'";

        cmd = new SqlCommand(str, conn);

        sqlda = new SqlDataAdapter(cmd);

        ds = new DataSet();

        sqlda.Fill(ds, "Contacts");

        conn.Close();

        GridView1.DataSource = ds;

        GridView1.DataMember = "Contacts";

        GridView1.DataBind();

    }

    }