通过在GridView中键入和显示而无需重新加载页面进行搜索?

时间:2017-05-14 06:17:00

标签: javascript c# asp.net

如何通过输入txtbox在数据库中搜索并在GridView中显示结果而不必每次都重新加载页面,我使用函数getdate(string searchtearm)。但不回答....我认为我在ajax中的URL是不正确的。请帮助我。 我的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();

        }

    }

我的Aspx页面

<%@ 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>

1 个答案:

答案 0 :(得分:0)

Webmethod需要是静态的。因此,相应地更改您的功能:

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

请检查WebMethod needs to be static

要使用Ajax和WebMethod绑定Gridview,您需要更改代码,如下所示:

         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                    
                }

            });

请检查Bind GridView using Ajax