Hi elfoq,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
HTML
Search:
<asp:TextBox ID="txtSearch" runat="server" />
<hr />
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField HeaderStyle-Width="120px" DataField="CustomerId" HeaderText="CustomerID" />
<asp:BoundField HeaderStyle-Width="150px" DataField="ContactName" HeaderText="Customer Name" />
<asp:BoundField HeaderStyle-Width="100px" DataField="OrderId" HeaderText="OrderId" />
<asp:BoundField HeaderStyle-Width="150px" DataField="EmployeeName" HeaderText="Employee Name" />
</Columns>
</asp:GridView>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
GetCustomers();
});
$("[id*=txtSearch]").live("keyup", function () {
GetCustomers();
});
function SearchTerm() {
return jQuery.trim($("[id*=txtSearch]").val());
};
function GetCustomers() {
$.ajax({
type: "POST",
url: "CS.aspx/GetCustomers",
data: '{searchTerm: "' + SearchTerm() + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
var row;
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("Customers");
if (row == null) {
row = $("[id*=gvCustomers] tr:last-child").clone(true);
}
$("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
if (customers.length > 0) {
$.each(customers, function () {
$("td", row).eq(0).html($(this).find("CustomerId").text());
$("td", row).eq(1).html($(this).find("ContactName").text());
$("td", row).eq(2).html($(this).find("OrderId").text());
$("td", row).eq(3).html($(this).find("EmployeeName").text());
$("[id*=gvCustomers]").append(row);
row = $("[id*=gvCustomers] tr:last-child").clone(true);
});
} else {
var empty_row = row.clone(true);
$("td:first-child", empty_row).attr("colspan", $("td", row).length);
$("td:first-child", empty_row).attr("align", "center");
$("td:first-child", empty_row).html("No records found for the search criteria.");
$("td", empty_row).not($("td:first-child", empty_row)).remove();
$("[id*=gvCustomers]").append(empty_row);
}
};
</script>
Namespaces
C#
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
VB.Net
Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindDummyRow();
}
}
private void BindDummyRow()
{
DataTable dummy = new DataTable();
dummy.Columns.Add("CustomerId");
dummy.Columns.Add("ContactName");
dummy.Columns.Add("OrderId");
dummy.Columns.Add("EmployeeName");
dummy.Rows.Add();
gvCustomers.DataSource = dummy;
gvCustomers.DataBind();
}
[WebMethod]
public static string GetCustomers(string searchTerm)
{
SqlCommand cmd = new SqlCommand();
string sql = "SELECT TOP 10 c.CustomerId, c.ContactName, o.OrderId,";
sql += " (e.FirstName + ' ' + e.LastName) EmployeeName";
sql += " FROM Customers c INNER JOIN Orders o on c.CustomerId = o.CustomerId";
sql += " INNER JOIN Employees e ON e.EmployeeId = o.EmployeeId";
if (!string.IsNullOrEmpty(searchTerm))
{
sql += " WHERE c.ContactName LIKE @SearchText + '%'";
cmd.Parameters.AddWithValue("@SearchText", searchTerm);
}
sql += " ORDER BY NEWID()";
cmd.CommandText = sql;
cmd.CommandType = CommandType.Text;
return GetData(cmd).GetXml();
}
private static DataSet GetData(SqlCommand cmd)
{
string strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
using (SqlConnection con = new SqlConnection(strConnString))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds, "Customers");
return ds;
}
}
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
BindDummyRow()
End If
End Sub
Private Sub BindDummyRow()
Dim dummy As DataTable = New DataTable()
dummy.Columns.Add("CustomerId")
dummy.Columns.Add("ContactName")
dummy.Columns.Add("OrderId")
dummy.Columns.Add("EmployeeName")
dummy.Rows.Add()
gvCustomers.DataSource = dummy
gvCustomers.DataBind()
End Sub
<WebMethod>
Public Shared Function GetCustomers(ByVal searchTerm As String) As String
Dim cmd As SqlCommand = New SqlCommand()
Dim sql As String = "SELECT TOP 10 c.CustomerId, c.ContactName, o.OrderId,"
sql += " (e.FirstName + ' ' + e.LastName) EmployeeName"
sql += " FROM Customers c INNER JOIN Orders o on c.CustomerId = o.CustomerId"
sql += " INNER JOIN Employees e ON e.EmployeeId = o.EmployeeId"
If Not String.IsNullOrEmpty(searchTerm) Then
sql += " WHERE c.ContactName LIKE @SearchText + '%'"
cmd.Parameters.AddWithValue("@SearchText", searchTerm)
End If
sql += " ORDER BY NEWID()"
cmd.CommandText = sql
cmd.CommandType = CommandType.Text
Return GetData(cmd).GetXml()
End Function
Private Shared Function GetData(ByVal cmd As SqlCommand) As DataSet
Dim strConnString As String = ConfigurationManager.ConnectionStrings("conString").ConnectionString
Using con As SqlConnection = New SqlConnection(strConnString)
Using sda As SqlDataAdapter = New SqlDataAdapter()
cmd.Connection = con
sda.SelectCommand = cmd
Using ds As DataSet = New DataSet()
sda.Fill(ds, "Customers")
Return ds
End Using
End Using
End Using
End Function
Screenshot