Hi micah,
I have created sample. Check this example. Now please take its reference and correct your code.
For this sample I have used of NorthWind database that you can download using the link given below.
Download Northwind Database
Database record and project folder structure
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
$('[id*=txtSearch]').on("keyup", function () {
$("#dvCustomers").html('');
if (($(this).val().length) > 0) {
$.ajax({
type: "POST",
url: "CS.aspx/GetCustomers",
data: '{search:"' + $(this).val() + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) { alert(response.d); },
error: function (response) { alert(response.d); }
});
}
});
});
function OnSuccess(response) {
var table = "<table Style='width:100%' class='table table-bordered table-hover dataTable' ";
if (response.d != '') {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var users = xml.find("User3");
users.each(function () {
var user = $(this);
var name = user.find("FirstName").text() + ' ' + user.find("LastName").text();
var userName = user.find("FirstName").text();
var userID = user.find("EmployeeID").text();
var userimg = "PROFILEPHOTO/" + user.find("FirstName").text() + '.jpg';
table += "<tr><td>" + name + "<br/>" + userName + "<br/>" + userID + "</td></tr>";
table += "<td><a href='MyProfile.aspx?Id=" + userID + "'><img height='50px' width='50px' src=" + userimg + " alt=" + userID + " /><a /></td></tr>";
});
table += "</table>";
}
else {
table += "<tr align='center'><td><b>No Result For the Criteria</b></td></tr>";
}
$("#dvCustomers").html(table);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input class="form-control" placeholder="Search" data-toggle="modal" data-target="#myModal" />
<div id="myModal" class="modal overlay" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog popup">
<div class="modal-content">
<div class="modal-body">
<div class="input-group">
<input type="text" class="form-control" id="txtSearch" runat="server" aria-label="..." />
<div class="input-group-btn">
<button type="button" style="float: right;" class="btn btn-danger" data-dismiss="modal">
<i class="glyphicon glyphicon-search"></i>Search</button>
</div>
</div>
<div id="dvCustomers">
</div>
</div>
<div class="modal-footer">
<button type="button" style="float: right; background-color: #444; color: White;"
class="btn btn-default" data-dismiss="modal">
Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
</form>
</body>
</html>
Namespaces
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
VB
Imports System.Data.SqlClient
Imports System.Data
Code
C#
public static DataSet GetCustomersData(string search)
{
SqlCommand cmd = new SqlCommand("SELECT EmployeeID,FirstName,LastName,City,Country FROM Employees WHERE FirstName LIKE '" + search + "%'");
cmd.CommandType = CommandType.Text;
return GetData(cmd);
}
private static DataSet GetData(SqlCommand cmd)
{
string strConnString = ConfigurationManager.ConnectionStrings["constr"].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, "User3");
return ds;
}
}
}
}
[System.Web.Services.WebMethod]
public static string GetCustomers(string search)
{
DataSet ds = GetCustomersData(search);
if (ds.Tables[0].Rows.Count > 0)
{
return GetCustomersData(search).GetXml();
}
else
{
return "";
}
}
VB.Net
Public Shared Function GetCustomersData(ByVal search As String) As DataSet
Dim cmd As SqlCommand = New SqlCommand("SELECT EmployeeID,FirstName,LastName,City,Country FROM Employees WHERE FirstName LIKE '" & search & "%'")
cmd.CommandType = CommandType.Text
Return GetData(cmd)
End Function
Private Shared Function GetData(ByVal cmd As SqlCommand) As DataSet
Dim strConnString As String = ConfigurationManager.ConnectionStrings("constr").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, "User3")
Return ds
End Using
End Using
End Using
End Function
<System.Web.Services.WebMethod()>
Public Shared Function GetCustomers(ByVal search As String) As String
Dim ds As DataSet = GetCustomersData(search)
If ds.Tables(0).Rows.Count > 0 Then
Return GetCustomersData(search).GetXml()
Else
Return ""
End If
End Function
Screenshot
