Hi jovceka,
Inside the success function first you need to bind the respective texts, then loop through the table and make ajax call to load the image based on the id.
Refer below sample.
HTML
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebService.asmx/GetProducts",
dataType: "json",
success: function (data) {
for (var i = 0; i < data.d.length; i++) {
var id = data.d[i].Id;
var name = data.d[i].Name;
$("#tblImages").append(
"<div class=trclass>" +
" <tr><td class=tdcolumn>" +
" <div class=tabledivprod>" +
" <img class=pdtimgclnt src='' />" +
" <div class=Productname>(" + name + ")</div>" +
" <div class=PdtID>" + id + "</div>" +
" <br /><br />" +
" </div>" +
" </td></tr>" +
"</div>");
}
$("#tblImages .tabledivprod").each(function (index, item) {
var id = $(item).find('.PdtID').html();
var image = $(item).find('.pdtimgclnt');
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebService.asmx/GetImages",
data: '{ id:' + id + '}',
dataType: "json",
async: false,
success: function (data) {
$(image).attr('src', "data:image/jpg;base64," + data.d);
}
});
});
}
});
});
</script>
<div id="tblImages">
</div>
WebService
C#
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Services;
/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
[WebMethod]
public List<Product> GetProducts()
{
List<Product> products = new List<Product>();
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
string query = "SELECT Id,Name FROM tblFiles WHERE ContentType = 'image/jpeg'";
using (SqlConnection con = new SqlConnection(conString))
{
SqlCommand cmd = new SqlCommand(query, con);
con.Open();
SqlDataReader sdr = cmd.ExecuteReader();
while (sdr.Read())
{
products.Add(new Product
{
Id = Convert.ToInt32(sdr["Id"]),
Name = sdr["Name"].ToString()
});
}
con.Close();
}
return products;
}
[WebMethod]
public string GetImages(int id)
{
string base64String = "";
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
string query = "SELECT Data FROM tblFiles WHERE Id = @Id";
using (SqlConnection con = new SqlConnection(conString))
{
SqlCommand cmd = new SqlCommand(query, con);
cmd.Parameters.AddWithValue("@Id", id);
con.Open();
SqlDataReader sdr = cmd.ExecuteReader();
if (sdr.Read())
{
base64String = Convert.ToBase64String((byte[])sdr["Data"], 0, ((byte[])sdr["Data"]).Length);
}
con.Close();
}
return base64String;
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public string ProdImage { get; set; }
}
}
VB.Net
Imports System
Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Services
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WebService
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function GetProducts() As List(Of Product)
Dim products As List(Of Product) = New List(Of Product)()
Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim query As String = "SELECT TOP 3 Id,Name FROM tblFiles WHERE ContentType = 'image/jpeg'"
Using con As SqlConnection = New SqlConnection(conString)
Dim cmd As SqlCommand = New SqlCommand(query, con)
con.Open()
Dim sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
products.Add(New Product With {
.Id = Convert.ToInt32(sdr("Id")),
.Name = sdr("Name").ToString()
})
End While
con.Close()
End Using
Return products
End Function
<WebMethod()> _
Public Function GetImages(ByVal id As Integer) As String
Dim base64String As String = ""
Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim query As String = "SELECT Data FROM tblFiles WHERE Id = @Id"
Using con As SqlConnection = New SqlConnection(conString)
Dim cmd As SqlCommand = New SqlCommand(query, con)
cmd.Parameters.AddWithValue("@Id", id)
con.Open()
Dim sdr As SqlDataReader = cmd.ExecuteReader()
If sdr.Read() Then
base64String = Convert.ToBase64String(CType(sdr("Data"), Byte()), 0, (CType(sdr("Data"), Byte())).Length)
End If
con.Close()
End Using
Return base64String
End Function
Public Class Product
Public Property Id As Integer
Public Property Name As String
Public Property ProdImage As String
End Class
End Class
Screenshot
