load text followed by image from database to ajax table using ajax json

Last Reply 14 days ago By arunkurmi

Posted 16 days ago

how to load text followed by image from database to ajax table using ajax json

You are viewing reply posted by: arunkurmi 14 days ago.
Posted 14 days ago

Hi jovceka,

Check this sample. now take its reference.

HTML

<body>
    <form id="form1" runat="server">
    <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 .trclass").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>
    </form>
</body>

Namespaces

C#

using System.Configuration;
using System.Data.SqlClient;
using System.Web.Services;

VB.Net

Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Services

WebServices

C#

[WebMethod]
public List<Product> GetProducts()
{
    List<Product> products = new List<Product>();
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    string query = "SELECT TOP 3 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 TOP 3 Id,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

<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 TOP 3 Id,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

Screenshot