Hi micah,
Please refer below sample
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<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" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body
{
font-family: 'Open Sans' , sans-serif;
}
.popup-box
{
background-color: #ffffff;
border: 1px solid #b0b0b0;
bottom: 0;
display: none;
height: 415px;
position: fixed;
right: 70px;
width: 300px;
font-family: 'Open Sans' , sans-serif;
}
.round.hollow
{
margin: 40px 0 0;
}
.round.hollow a
{
border: 2px solid #ff6701;
border-radius: 35px;
color: red;
color: #ff6701;
font-size: 23px;
padding: 10px 21px;
text-decoration: none;
font-family: 'Open Sans' , sans-serif;
}
.round.hollow a:hover
{
border: 2px solid #000;
border-radius: 35px;
color: red;
color: #000;
font-size: 23px;
padding: 10px 21px;
text-decoration: none;
}
.popup-box-on
{
display: block !important;
}
.popup-box .popup-head
{
background-color: #fff;
clear: both;
color: #7b7b7b;
display: inline-table;
font-size: 21px;
padding: 7px 10px;
width: 100%;
font-family: Oswald;
}
.bg_none i
{
border: 1px solid #ff6701;
border-radius: 25px;
color: #ff6701;
font-size: 17px;
height: 33px;
line-height: 30px;
width: 33px;
}
.bg_none:hover i
{
border: 1px solid #000;
border-radius: 25px;
color: #000;
font-size: 17px;
height: 33px;
line-height: 30px;
width: 33px;
}
.bg_none
{
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
}
.popup-box .popup-head .popup-head-right
{
margin: 11px 7px 0;
}
.popup-box .popup-messages
{
}
.popup-head-left img
{
border: 1px solid #7b7b7b;
border-radius: 50%;
width: 44px;
}
.popup-messages-footer > textarea
{
border-bottom: 1px solid #b2b2b2 !important;
height: 34px !important;
margin: 7px;
padding: 5px !important;
border: medium none;
width: 95% !important;
}
.popup-messages-footer
{
background: #fff none repeat scroll 0 0;
bottom: 0;
position: absolute;
width: 100%;
}
.popup-messages-footer .btn-footer
{
overflow: hidden;
padding: 2px 5px 10px 6px;
width: 100%;
}
.simple_round
{
background: #d1d1d1 none repeat scroll 0 0;
border-radius: 50%;
color: #4b4b4b !important;
height: 21px;
padding: 0 0 0 1px;
width: 21px;
}
.popup-box .popup-messages
{
background: #3f9684 none repeat scroll 0 0;
height: 275px;
overflow: auto;
}
.direct-chat-messages
{
overflow: auto;
padding: 10px;
transform: translate(0px, 0px);
}
.popup-messages .chat-box-single-line
{
border-bottom: 1px solid #a4c6b5;
height: 12px;
margin: 7px 0 20px;
position: relative;
text-align: center;
}
.popup-messages abbr.timestamp
{
background: #3f9684 none repeat scroll 0 0;
color: #fff;
padding: 0 11px;
}
.popup-head-right .btn-group
{
display: inline-flex;
margin: 0 8px 0 0;
vertical-align: top !important;
}
.chat-header-button
{
background: transparent none repeat scroll 0 0;
border: 1px solid #636364;
border-radius: 50%;
font-size: 14px;
height: 30px;
width: 30px;
}
.popup-head-right .btn-group .dropdown-menu
{
border: medium none;
min-width: 122px;
padding: 0;
}
.popup-head-right .btn-group .dropdown-menu li a
{
font-size: 12px;
padding: 3px 10px;
color: #303030;
}
.popup-messages abbr.timestamp
{
background: #3f9684 none repeat scroll 0 0;
color: #fff;
padding: 0 11px;
}
.popup-messages .chat-box-single-line
{
border-bottom: 1px solid #a4c6b5;
height: 12px;
margin: 7px 0 20px;
position: relative;
text-align: center;
}
.popup-messages .direct-chat-messages
{
height: auto;
}
.popup-messages .direct-chat-text
{
background: #dfece7 none repeat scroll 0 0;
border: 1px solid #dfece7;
border-radius: 2px;
color: #1f2121;
}
.popup-messages .direct-chat-timestamp
{
color: #fff;
opacity: 0.6;
}
.popup-messages .direct-chat-name
{
font-size: 15px;
font-weight: 600;
margin: 0 0 0 49px !important;
color: #fff;
opacity: 0.9;
}
.popup-messages .direct-chat-info
{
display: block;
font-size: 12px;
margin-bottom: 0;
}
.popup-messages .big-round
{
margin: -9px 0 0 !important;
}
.popup-messages .direct-chat-img
{
border: 1px solid #fff;
background: #3f9684 none repeat scroll 0 0;
border-radius: 50%;
float: left;
height: 40px;
margin: -21px 0 0;
width: 40px;
}
.direct-chat-reply-name
{
color: #fff;
font-size: 15px;
margin: 0 0 0 10px;
opacity: 0.9;
}
.direct-chat-img-reply-small
{
border: 1px solid #fff;
border-radius: 50%;
float: left;
height: 20px;
margin: 0 8px;
width: 20px;
background: #3f9684;
}
.popup-messages .direct-chat-msg
{
margin-bottom: 10px;
position: relative;
}
.popup-messages .doted-border::after
{
background: transparent none repeat scroll 0 0 !important;
border-right: 2px dotted #fff !important;
bottom: 0;
content: "";
left: 17px;
margin: 0;
position: absolute;
top: 0;
width: 2px;
display: inline;
z-index: -2;
}
.popup-messages .direct-chat-msg::after
{
background: #fff none repeat scroll 0 0;
border-right: medium none;
bottom: 0;
content: "";
left: 17px;
margin: 0;
position: absolute;
top: 0;
width: 2px;
display: inline;
z-index: -2;
}
.direct-chat-text::after, .direct-chat-text::before
{
border-color: transparent #dfece7 transparent transparent;
}
.direct-chat-text::after, .direct-chat-text::before
{
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: transparent #d2d6de transparent transparent;
border-image: none;
border-style: solid;
border-width: medium;
content: " ";
height: 0;
pointer-events: none;
position: absolute;
right: 100%;
top: 15px;
width: 0;
}
.direct-chat-text::after
{
border-width: 5px;
margin-top: -5px;
}
.popup-messages .direct-chat-text
{
background: #dfece7 none repeat scroll 0 0;
border: 1px solid #dfece7;
border-radius: 2px;
color: #1f2121;
}
.direct-chat-text
{
background: #d2d6de none repeat scroll 0 0;
border: 1px solid #d2d6de;
border-radius: 5px;
color: #444;
margin: 5px 0 0 50px;
padding: 5px 10px;
position: relative;
}
</style>
<script type="text/javascript">
$(function () {
$("[id*=addClass]").click(function () {
var id = $(this).closest('.menu').find($('[id*=lblid]')).html();
$.ajax({
type: "POST",
url: "Default.aspx/GetSavedpost",
data: '{id:"' + id + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
if (response != null) {
$("[id*=lblName]").html(response.d[0].Name);
$("[id*=imgPhoto]").attr('src', "Photo/" + response.d[0].UserId + ".jpg");
$('#popup-box chat-popup').modal('show');
}
}
});
$('#qnimate').addClass('popup-box-on');
return false;
});
$("[id*=removeClass]").click(function () {
$('#qnimate').removeClass('popup-box-on');
return false;
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="popup-box chat-popup" id="qnimate">
<div class="popup-head">
<div class="popup-head-left pull-left">
<img id="imgPhoto" src="" alt="iamgurdeeposahan" />
<asp:Label ID="lblName" runat="server"></asp:Label>
</div>
<div class="popup-head-right pull-right">
<div class="btn-group">
<button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">
<i class="glyphicon glyphicon-cog"></i>
</button>
<ul role="menu" class="dropdown-menu pull-right">
<li><a href="#">Media</a></li>
<li><a href="#">Block</a></li>
<li><a href="#">Clear Chat</a></li>
<li><a href="#">Email Chat</a></li>
</ul>
</div>
<button data-widget="remove" id="removeClass" class="chat-header-button pull-right"
type="button">
<i class="glyphicon glyphicon-off"></i>
</button>
</div>
</div>
<div class="popup-messages">
<div class="direct-chat-messages">
<div class="chat-box-single-line">
<abbr class="timestamp">
October 8th, 2015</abbr>
</div>
<!-- Message. Default to the left -->
<div class="direct-chat-msg doted-border">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-left">Osahan</span>
</div>
<!-- /.direct-chat-info -->
<img alt="message user image" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg"
class="direct-chat-img"><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Hey bro, how’s everything going ?
</div>
<div class="direct-chat-info clearfix">
<span class="direct-chat-timestamp pull-right">3.36 PM</span>
</div>
<div class="direct-chat-info clearfix">
<span class="direct-chat-img-reply-small pull-left"></span><span class="direct-chat-reply-name">
Singh</span>
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
<div class="chat-box-single-line">
<abbr class="timestamp">
October 9th, 2015</abbr>
</div>
<!-- Message. Default to the left -->
<div class="direct-chat-msg doted-border">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-left">Osahan</span>
</div>
<!-- /.direct-chat-info -->
<img alt="iamgurdeeposahan" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg"
class="direct-chat-img"><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Hey bro, how’s everything going ?
</div>
<div class="direct-chat-info clearfix">
<span class="direct-chat-timestamp pull-right">3.36 PM</span>
</div>
<div class="direct-chat-info clearfix">
<img alt="iamgurdeeposahan" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg"
class="direct-chat-img big-round">
<span class="direct-chat-reply-name">Singh</span>
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
</div>
</div>
<div class="popup-messages-footer">
<textarea id="status_message" placeholder="Type a message..." rows="10" cols="40"
name="message"></textarea>
<div class="btn-footer">
<button class="bg_none">
<i class="glyphicon glyphicon-film"></i>
</button>
<button class="bg_none">
<i class="glyphicon glyphicon-camera"></i>
</button>
<button class="bg_none">
<i class="glyphicon glyphicon-paperclip"></i>
</button>
<button class="bg_none pull-right">
<i class="glyphicon glyphicon-thumbs-up"></i>
</button>
</div>
</div>
</div>
<asp:DataList ID="GETSTATUS" runat="server" CssClass=" " Width="100%">
<ItemTemplate>
<ul class="menu">
<li>
<asp:LinkButton runat="server" ID="addClass" data-toggle="popup-box chat-popup" Width="100%"
target="#popup-box chat-popup">
<img src='<%# "/PROFILEPHOTOS/" + Eval("Photo")%>' class="menu-icon animated fadeInDown "
style="border: 1px solid #CCCCCC; width: 50px; height: 50px" data-toggle="tooltip"
title="Profile Photo" alt="message user image" />
<div class="menu-info" style="">
<h4 class="control-sidebar-subheading" style="margin-left: 12px">
<asp:Label ID="lblUser" runat="server" Text='<%#Eval("Name") %>' />
<br />
<asp:Label ID="lblusername5" runat="server" Text='<%# Eval("Title").ToString().Length >10 ? Eval("Title").ToString().Substring(0,10)+"..." : Eval("Title").ToString()%>'
Font-Size="Small" ForeColor="Silver" />
</h4>
<asp:Label ID="lblid" runat="server" Text='<%#Eval("EmployeeID") %>' Style="display: none" />
</div>
</asp:LinkButton>
</li>
</ul>
<!-- /.control-sidebar-menu -->
</ItemTemplate>
</asp:DataList>
</form>
</body>
</html>
Namespaces
C#
using System.Collections.Generic;
using System.Data;
using System.Web.Services;
using System.Data.SqlClient;
using System.Configuration;
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 constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT TOP 10 EmployeeID,LastName + '-' + FirstName AS Name,Title,Photo FROM Employees"))
{
cmd.Connection = con;
cmd.CommandType = CommandType.Text;
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
GETSTATUS.DataSource = dt;
GETSTATUS.DataBind();
}
}
}
}
[WebMethod]
public static List<Customer> GetSavedpost(string id)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT EmployeeID,LastName + '-' + FirstName AS Name,Title FROM Employees WHERE EmployeeID = @ID"))
{
cmd.Connection = con;
cmd.CommandType = CommandType.Text;
cmd.Parameters.AddWithValue("@ID", id);
List<Customer> customers = new List<Customer>();
con.Open();
SqlDataReader sdr = cmd.ExecuteReader();
while (sdr.Read())
{
customers.Add(new Customer
{
UserId = sdr["EmployeeID"].ToString(),
Name = sdr["Name"].ToString(),
UserName = sdr["Title"].ToString()
});
}
con.Close();
return customers;
}
}
}
public class Customer
{
public string UserId { get; set; }
public string Name { get; set; }
public string UserName { get; set; }
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As SqlConnection = New SqlConnection(constr)
Using cmd As SqlCommand = New SqlCommand("SELECT TOP 10 EmployeeID,LastName + '-' + FirstName AS Name,Title,Photo FROM Employees")
cmd.Connection = con
cmd.CommandType = CommandType.Text
Dim da As SqlDataAdapter = New SqlDataAdapter(cmd)
Dim dt As DataTable = New DataTable()
da.Fill(dt)
GETSTATUS.DataSource = dt
GETSTATUS.DataBind()
End Using
End Using
End If
End Sub
<WebMethod()>
Public Shared Function GetSavedpost(ByVal id As String) As List(Of Customer)
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As SqlConnection = New SqlConnection(constr)
Using cmd As SqlCommand = New SqlCommand("SELECT EmployeeID,LastName + '-' + FirstName AS Name,Title FROM Employees WHERE EmployeeID = @ID")
cmd.Connection = con
cmd.CommandType = CommandType.Text
cmd.Parameters.AddWithValue("@ID", id)
Dim customers As List(Of Customer) = New List(Of Customer)()
con.Open()
Dim sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
customers.Add(New Customer With {
.UserId = sdr("EmployeeID").ToString(),
.Name = sdr("Name").ToString(),
.UserName = sdr("Title").ToString()
})
End While
con.Close()
Return customers
End Using
End Using
End Function
Public Class Customer
Public Property UserId As String
Public Property Name As String
Public Property UserName As String
End Class
Screenshot
