TextSearch With Overlay Screen(AJAX)

Mahak Gupta
14y
7k
0
0

Article

I create a code for overlay and TextSeach(ajax)

Step 1:-> In .aspx page:

First create two Textbox in HTML( txtsearch,txtlname (In my case) )  and a ListBox(ListBox1)

Write the Following Code in Head :

<head id="Head1" runat="server">
   
<title>Untitled 
Page</title>

    </script>

    <style type="text/css">
            .black_show{
                  display: none;
                  position: absolute;
                  top: 0%;
                  left: 0%;
                  width: 100%;
                  height: 100%;
                  background-color: black;
                  z-index:1001;
                  -moz-opacity: 0.8;
                  opacity:.90;
                  filter: alpha(opacity=80);
            }
            .white_show {
                  display: none;
                  position: absolute;
                  top: 25%;
                  left: 25%;
                  width: 50%;
                  height: 50%;
                  padding: 16px;
                  -webkit-border-radius:20px;
                  border: 16px solid orange;
                  background-color: white;
                  z-index:1002;
                  overflow: auto;
            }
            .txtname
             {
            border: 5px solid orange;
             }
      </style>
</head>

And the following Code in Body:-

<body>

<div >

<p>

plz click the button to fill the gridview <input id="Button1" type="button" value="Search" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'" /></p>

<tr>

</td>

</td>

</td>

</td>

<%--<asp:ImageButton ID="ImageButton1" Height="20px" ImageUrl="~/close_icon.gif"

OnClientClick="close()" />--%>

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</td>

</tr>

<tr>

<strong style="color: orange">First Name</strong></td>

</td>

<%--<select id="ListBox1" runat="server" style="display: none; width: 153px;" onchange="dis()"

enableviewstate="false">

<option>Please Select</option>

</select>--%></td>

<div >

 </div>

</td>

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</td>

</tr>

<tr>

<strong style="color: orange">Location</strong></td>

</td>

</td>

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</td>

</tr>

<tr>

</td>

</td>

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

</asp:GridView>

</td>

</td>

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</tr>

<tr>

</td>

</td>

<asp:Button ID="Submitbttn" runat="server" Text="Submit" OnClick="Submitbttn_Click" BackColor="Orange" BorderColor="White" BorderStyle="Outset" Font-Bold="True" ForeColor="White" />

<asp:Button ID="Closebttn" runat="server" Text="Close" BackColor="Orange" BorderColor="White" BorderStyle="Outset" Font-Bold="True" ForeColor="White" Width="64px" /></td>

</td>

</td>

</tr>

</table>

 <br />

<%--<asp:TextBox ID="txtsearch" onkeyup="showHint()" runat="server" ></asp:TextBox>--%>

</div>

gdfggfhfghd</div>

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

</asp:GridView>

</div>

</form>

</body>

Step 2:- In .cs page:

Write the following code:-

         protected void Page_Load(object sender, EventArgs e)
        {

            string str1 = "";
            if (Request.QueryString["name"] == "")
            {
                Response.Clear();
                Response.End();

            }

            else if (Request.QueryString["name"] != null)
            {
                Response.Clear();
                string name = Request.QueryString["name"].ToString();
                int len = name.Length;
                ListBox1.Visible = true;

                for (int i = 0; i <= len; i++)
                {
                    string c = name.Substring(i, len);

                    string str = "";

                    str += c;

                    SqlConnection conn1 = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ToString());

                    SqlCommand cmd1 = new SqlCommand("select DISTINCT fname from testseach where fname like '" + str
+ "%'", conn1);

                    conn1.Open();
                    SqlDataReader dr;
                    if (txtsearch.Value != null)
                    {
                         dr = cmd1.ExecuteReader();

                        int a = 0;

                        while (dr.Read())
                        {
                            if (str1 == "")
                            {

                                str1 = dr["fname"].ToString();
                            }
                            else
                            {

                                str1 += "," + dr["fname"].ToString();
                            }

                            a = a + 1;

                        }
                        GridView2.DataSource = dr;
                        GridView2.DataBind();
                        dr.Close();
                        conn1.Close();
                        //else
                        //{
                        //    ListBox1.Items.Clear();
                        //}
                        //str1.Remove(len-1,2);
                        Response.Write(str1);
                        Response.End();
                     }
                }

}
}

        protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
        {
            //txtsearch.Value = ListBox1.SelectedItem.Text;
        }
        protected void Submitbttn_Click(object sender, EventArgs e)
        {
            SqlConnection conn1 = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ToString());
            conn1.Open();
            SqlCommand cmd1 = new SqlCommand("select * from testseach where fname='" + txtsearch.Value + "' or lname='" + txtlname.Value + "'", conn1);
            SqlDataReader dr1;
            dr1 = cmd1.ExecuteReader();
            GridView1.DataSource = dr1;

            GridView1.DataBind();
            conn1.Close();
            txtsearch.Value = "";
            txtlname.Value = "";
        }

Up Next

Ebook Download

View all

Node Js and Angular CheatSheet

Read by 26 people

Download Now!

Learn

View all