Hi micah,
I have created a sample to demonstrate how you can achieve this task.
Here i have used northwind database. So you need to change the code as per your database and change the image path as per your data.
In the profile page i have passed userId in querystring to retrieve the details based on the userid. So if you want any other details then pass accordingly and retrieve the details in profile page as you wish.
CS.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
<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 ClickTextbox() {
$('#myModal').modal('show');
$('#myModal').on('shown.bs.modal', function () {
$('#txtSearch').focus();
});
}
$(function () {
$('[id*=txtSearch]').on("keyup", function () {
$("#dvCustomers").html('');
if (($(this).val().length) > 1) {
$.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 users = $(this);
var userID = users.find("CustomerID").text();
var name = users.find("ContactName").text();
var userName = users.find("CompanyName").text();
var image = "PROFILEPHOTOS/" + userID + ".jpg";
table += "<tr><td><b> Name:</b>" + name + "<br/><b> UserId:</b>" + userID + "<br/><b>UserName :</b>" + userName + "</td>";
table += "<td><a href='UserProfile.aspx?UserId=" + userID + "'><img src=" + image + " alt=" + userID + ".jpg" + " /><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>
<br />
<input type="text" onclick="ClickTextbox()" class="form-control" style="width: 300px"
name="name" value=" " />
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">
Modal title</h4>
</div>
<div class="modal-body">
<input type="textusername" id="txtSearch" class="form-control" style="width: 300px"
name="name" value="" />
<hr />
<div id="dvCustomers">
<asp:DataList ID="dlCustomers" runat="server" RepeatLayout="Table" Style="width: 300px;
height: 100px; border: dashed 2px #04AFEF; background-color: #B0E2F5">
<ItemTemplate>
<b>Contact Name:</b><span class="contactName">
<%# Eval("ContactName")%></span><br />
<b>Customer ID:</b><span class="customerID">
<%# Eval("CustomerID")%></span><br />
<b>Company Name:</b> <span class="companyName">
<%# Eval("CompanyName")%></span><br />
<hr />
</ItemTemplate>
</asp:DataList>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
CS.aspx.cs
public static DataSet GetCustomersData(string search)
{
string query = "GetCustomerRecords";
SqlCommand cmd = new SqlCommand(query);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@search", search);
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 "";
}
}
UserProfile.aspx
<div>
This is User Profile page.
<hr />
User Id: <b>
<asp:Label ID="lblUserId" runat="server" /></b>
<hr />
Get details based on the userid.
</div>
UserProfile.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(Request.QueryString["UserId"]))
{
lblUserId.Text = Request.QueryString["UserId"];
}
}
Screenshot
