Search by typing and show in GridView without reloading page?

Question

how can I search in the database by typing in the txtbox and show the result in GridView without reloading the page every time, I use function getdate(string searchtearm).but not answer....i think my URL in ajax is incorrect.please help me. My CodeBehind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Script.Services;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;



public partial class search : System.Web.UI.Page
{
    string m;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {

        }
    }

    [System.Web.Script.Services.ScriptMethod()]
    [System.Web.Services.WebMethod()]
   public  void getdata(string searchtearm)
    {

        if (searchtearm != "")
        {
            DataSet.usersDataTable ouserD1 = new DataSet.usersDataTable();
            DataSetTableAdapters.usersTableAdapter ouserT1 = new DataSetTableAdapters.usersTableAdapter();
            ouserT1.FillBy_dhearchPeople(ouserD1,searchtearm);

            GridView1.DataSource = ouserD1;
            GridView1.DataBind();

        }

    }

My Aspx Page

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

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <title></title>


 <script src="jquery-1.6.4.min.js"></script>
    <script type="text/javascript">

            $("#txtsearch").keyup(function () {

                $.ajax({
                    type: "GET",
                    url: "search.aspx/getdata",
                    data: { mysearch: $("txtsearch").html() },
                    success: function (response) {

                    }

                });
            });`enter code here`
</script>
 </head>
<body> 
    <div id="yes">
    <form id="form1" runat="server">
        <h1>searching your friends</h1>


        <input type="search" id="txtsearch" name="txtsearch"    placeholder="Type to start searching ..."  runat="server" autocomplete="off"/>

         <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"  >
                                <Columns>
                                    <asp:TemplateField>
                                        <ItemTemplate>

                                            <asp:Image ID="Image1" runat="server" Width="50px" Height="50px" ImageUrl='<%# Eval("picture") %>' />
                                            <asp:Label ID="lblsearch" runat="server" Text='<%# Eval("username") %>'></asp:Label>
                                            <asp:Button ID="btnFollow" runat="server" Text="follow" BackColor="White" OnClick="Button1_Click" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>
                            </asp:GridView>

                    <br />
        <div class="Pager"></div>
                </td>
                <td></td>
                <td></td>
            </tr>
        </table>


    </form>

        </div> 


</body>
</html>

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

        <h1>searching your friends</h1>


        <input type="search" id="txtsearch" name="txtsearch"   placeholder="Type to start searching ..."  runat="server" autocomplete="off"/>

         <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"  >
                                <Columns>
                                    <asp:TemplateField>
                                        <ItemTemplate>

                                            <asp:Image ID="Image1" runat="server" Width="50px" Height="50px" ImageUrl='<%# Eval("picture") %>' />
                                            <asp:Label ID="lblsearch" runat="server" Text='<%# Eval("username") %>'></asp:Label>
                                            <asp:Button ID="btnFollow" runat="server" Text="follow" BackColor="White" OnClick="Button1_Click" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>
                            </asp:GridView>

                    <br />
        <div class="Pager"></div>
                </td>
                <td></td>
                <td></td>
            </tr>
        </table>


    </form>

        </div> 


</body>
</html>

score 0 · Answer 1 · edited May 23 '17 at 10:31

0

Webmethod needs to be static. So change your function accordingly:

 [System.Web.Script.Services.ScriptMethod()]
 [System.Web.Services.WebMethod()]
 public static void getdata(string searchtearm)
 {
 }

Please check WebMethod needs to be static

To bind Gridview using Ajax and WebMethod, you need to change your code as below:

         var gridView = '<%= GridView1.ClientID %>';
         $.ajax({
                type: "GET",
                url: "search.aspx/getdata",
                data: { mysearch: $("txtsearch").html() },
                success: function (response) {

                 $("#" + gridView).empty();
                 //if response contains data , create table using for loop                    
                }

            });

Please check Bind GridView using Ajax

edited May 23 '17 at 10:31

Community

1
1

answered May 14 '17 at 06:36

Jayakrishnan

4,232
2
23
35

if use static ...error is for ' GridView1.DataSource = ouserD1; GridView1.DataBind();' – yasin May 14 '17 at 06:42
@yasin, what you are trying to do is not possible, as WebMethod is stateless. If you want to bind Gridview using Ajax and WebMethod, you need to modify your html side code.Please check https://www.codeproject.com/Tips/775585/Bind-Gridview-using-AJAX. I will update answer too – Jayakrishnan May 14 '17 at 06:47
i want to bind data by ' ' – yasin May 14 '17 at 07:25

Search by typing and show in GridView without reloading page?

1 Answers1