Hi Amit1992,
Refer below sample.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.ShowDiv
{
background-color: #FB66AA;
color: White;
font-family: Arial;
font-size: 10pt;
border: 1px solid #d4d4d4;
border-radius: 3px;
position: absolute;
width: 250px;
box-shadow: 8px 8px 5px #888888;
}
.items
{
cursor: pointer;
}
</style>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".items").mouseenter(function (e) {
ShowDetails($(this).find('[id*=lblId]').html());
$(".ShowDiv").css({ "top": e.pageY, "left": e.pageX }).show();
}).mouseleave(function (e) {
$(".ShowDiv").hide();
});
});
function ShowDetails(id) {
PageMethods.GetDetails(id, OnSuccess);
}
function OnSuccess(response, userContext, methodName) {
$('[id*=divDetail]').html(response);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<div>
<asp:DataList runat="server" ID="dlCustomers" RepeatLayout="Table" RepeatColumns="3"
CellPadding="2" CellSpacing="2">
<ItemTemplate>
<div class="items" style="border: dashed 2px #04AFEF; background-color: #B0E2F5">
<p>
Id :
<asp:Label Text='<%#Eval("CustomerId") %>' ID="lblId" runat="server" /></p>
<p>
Name :
<asp:Label ID="lblName" Text='<%#Eval("ContactName") %>' runat="server" /></p>
</div>
</ItemTemplate>
</asp:DataList>
</div>
<div style="display: none;" id="divDetail" class="ShowDiv">
</div>
</form>
</body>
</html>
Namespaces
C#
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
using System.Web.Services;
VB.Net
Imports System.Data.SqlClient
Imports System.Data
Imports System.Web.Services
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
string query = "SELECT TOP 6 CustomerId,ContactName FROM Customers";
DataTable dt = GetData(query);
dlCustomers.DataSource = dt;
dlCustomers.DataBind();
}
}
private static DataTable GetData(string query)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
SqlConnection con = new SqlConnection(constr);
SqlCommand cmd = new SqlCommand(query, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
return dt;
}
[WebMethod]
public static string GetDetails(string id)
{
string query = "SELECT * FROM Customers WHERE CustomerID = '" + id + "'";
DataTable dt = GetData(query);
string customerData = System.String.Empty;
customerData = "<span><h3>Customers More Details</h3></span>";
if (dt.Rows.Count > 0)
{
customerData = customerData + "<p><strong>Company Name: </strong>" + dt.Rows[0]["CompanyName"] + "</p>";
customerData = customerData + "<p><strong>Address: </strong>" + dt.Rows[0]["Address"] + "</p>";
customerData = customerData + "<p><strong>City: </strong>" + dt.Rows[0]["City"] + "</p>";
customerData = customerData + "<p><strong>Country: </strong>" + dt.Rows[0]["Country"] + "</p>";
}
return customerData;
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim query As String = "SELECT TOP 6 CustomerId,ContactName FROM Customers"
Dim dt As DataTable = GetData(query)
dlCustomers.DataSource = dt
dlCustomers.DataBind()
End If
End Sub
Private Shared Function GetData(ByVal query As String) As DataTable
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim con As SqlConnection = New SqlConnection(constr)
Dim cmd As SqlCommand = New SqlCommand(query, con)
Dim da As SqlDataAdapter = New SqlDataAdapter(cmd)
Dim dt As DataTable = New DataTable()
da.Fill(dt)
Return dt
End Function
<WebMethod()>
Public Shared Function GetDetails(ByVal id As String) As String
Dim query As String = "SELECT * FROM Customers WHERE CustomerID = '" & id & "'"
Dim dt As DataTable = GetData(query)
Dim customerData As String = System.String.Empty
customerData = "<span><h3>Customers More Details</h3></span>"
If dt.Rows.Count > 0 Then
customerData = customerData & "<p><strong>Company Name: </strong>" & dt.Rows(0)("CompanyName") & "</p>"
customerData = customerData & "<p><strong>Address: </strong>" & dt.Rows(0)("Address") & "</p>"
customerData = customerData & "<p><strong>City: </strong>" & dt.Rows(0)("City") & "</p>"
customerData = customerData & "<p><strong>Country: </strong>" & dt.Rows(0)("Country") & "</p>"
End If
Return customerData
End Function
Screenshot
