Hi micah,
I have modified your code as per your requirement. So please refer the below code.
HTML
<div>
<asp:DataList ID="dlUsers" runat="server" RepeatColumns="2" CellSpacing="10" RepeatDirection="Horizontal"
RepeatLayout="Table">
<ItemTemplate>
<table>
<tr>
<td>
<b>ID : </b>
<asp:Label ID="lblGallaryId" runat="server" Text='<%#Eval("Id") %>' /><br />
<b>Name : </b>
<asp:Label ID="lblName" runat="server" Text='<%#Eval("Name") %>' /><br />
<b>UserName : </b>
<asp:Label ID="Label2" runat="server" Text='<%#Eval("UserName") %>' />
</td>
<td>
<asp:Button ID="btncall" runat="server" Text="Show" class="btn btn-primary btn-sm" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="container">
<div class="row">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label><br />
<%--Modal 1 Start--%>
<div class="modal fade" id="myModalprofilepopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="height: auto">
<div class=" " style="position: absolute; bottom: 60px; top: 129px; left: 9px;">
<div class=" pull-left " style="margin-bottom: 6px; background-color: transparent">
<a id="A1" href="#" runat="server">
<asp:Image ID="Image1photo" runat="server" ImageUrl='<%# String.Format("PROFILEPHOTOS/{0}",Eval("ImageName").ToString()) %>'
class="userprofilepgoto img-responsive2 animated fadeInDown img-circle" Style="width: 90px;
height: 90px" BorderStyle="Solid" BorderWidth="2" BorderColor="#CCCCCC" />
</a>
</div>
</div>
<a class=" pull-left" style="margin-left: 103px; margin-top: 2px">
<asp:Label ID="Namepro" runat="server" Text='<%# Eval("Name") %>' Font-Bold="True"
CssClass="namepro" Font-Size="Larger" ForeColor="Black" />
<asp:Label ID="UserVerifyStatus" runat="server" CssClass="userverifystatus glyphicon glyphicon-ok-sign"
title="." data-toggle="tooltip" Font-Size="Small" Style="display: none" ForeColor=""></asp:Label><asp:Label
ID="UserName" Text='<%#Eval("UserName") %>' runat="server" CssClass="username" />
</a>
<asp:Label ID="lblGallaryId" Text='<%#Eval("UserId") %>' runat="server" Font-Size="0px" />
<div class="clearfix" style="">
</div>
<div id="modalbody5" class="modal-body">
<div class="clearfix" style="">
</div>
<asp:Label ID="Summary" runat="server" Text="Hi am Test123 @ #Sportifer, one sports social community, share, hype and connect to everyone on sports world . "
CssClass="summary" Font-Size="Larger" ForeColor="Black" />
<div class="clearfix" style="">
</div>
<div class="clearfix" style="">
</div>
<%--Modal 1 End--%>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
<div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
$('[id*=btncall]').on('click', function () {
var id = $(this).closest('tr').find('[id*=lblGallaryId]').html();
$.ajax({
type: "POST",
url: "Default2.aspx/GetGallery",
data: '{id:"' + id + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
$(".userphotos").attr('src', 'BannerImage/' + response.d[0].photos);
$(".userprofilepgoto").attr('src', 'PROFILEPHOTOS/' + response.d[0].Image1photo);
$(".namepro").html(response.d[0].Namepro);
$(".username").html(response.d[0].UserName);
$(".summary").html(response.d[0].Summary);
// $(".userverifystatus").html(response.d[0].UserVerifyStatus);
if (response.d[0].UserVerifyStatus == "1") {
$('[id*=UserVerifyStatus]').show();
}
else {
$('[id*=UserVerifyStatus]').hide();
}
$('#myModalprofilepopup').modal('show');
},
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
return false;
});
});
</script>
</div>
C#
[WebMethod]
public static List<Gallery> GetGallery(int id)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT ImageName as ImageBanner,ImageName,UserName,Name,UserVerifyStatus FROM User3 WHERE UserId = '" + id + "'"))
{
cmd.Connection = con;
List<Gallery> gallery = new List<Gallery>();
con.Open();
SqlDataReader sdr = cmd.ExecuteReader();
while (sdr.Read())
{
gallery.Add(new Gallery
{
photos = sdr["ImageBanner"].ToString(),
Image1photo = sdr["ImageName"].ToString(),
UserName = sdr["UserName"].ToString(),
Namepro = sdr["Name"].ToString(),
UserVerifyStatus = sdr["UserVerifyStatus"].ToString(),
});
}
con.Close();
return gallery;
}
}
}
Vb.net
<WebMethod> _
Public Shared Function GetGallery(id As Integer) As List(Of Gallery)
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand("SELECT ImageName as ImageBanner,ImageName,UserName,Name,UserVerifyStatus FROM User3 WHERE UserId = '" + id + "'")
cmd.Connection = con
Dim gallery As New List(Of Gallery)()
con.Open()
Dim sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
gallery.Add(New Gallery() With { _
Key .photos = sdr("ImageBanner").ToString(), _
Key .Image1photo = sdr("ImageName").ToString(), _
Key .UserName = sdr("UserName").ToString(), _
Key .Namepro = sdr("Name").ToString(), _
Key .UserVerifyStatus = sdr("UserVerifyStatus").ToString() _
})
End While
con.Close()
Return gallery
End Using
End Using
End Function
