Bind binary image in HTML Table from Database using jQuery Ajax and JSON in ASP.Net

Last Reply on Sep 30, 2017 04:31 AM By ramkiran

Posted on Sep 26, 2017 05:01 AM

Populate (Bind) HTML Table from database using jQuery AJAX and JSON in  ASP.Net MVC :-

In my database one image column is there ,which is in the form of binary format. 

in the  view :by using this    

" ImageUrl='<%# "data:image/jpg;base64," + Convert.ToBase64String((byte[])Eval("images")) %>'   "

i'm getting result.

but my problem is while using jquery ajax call with json data(asyn call) i'm not able to bind the data to table  for the image column .

can u please solve my problem .

bind binary image data to table:-using jquery ajax call with json data 

like this following article(Populate (Bind) HTML Table from database using jQuery AJAX and JSON in  ASP.Net MVC )

Posted on Sep 29, 2017 12:50 AM Modified on on Oct 01, 2017 11:10 PM

Hi ramkiran,

I have created sample as per your requirement in ASP.Net by refering the below link. You need to implement the same in your mvc project.

How to insert,update and Delete data from Html Table using Ajax Jquery in ASP.Net

DataBase Record

Id Name Data
14 00000002.jpg 0xFFD8FFE000...
15 00000018.jpg 0xFFD8FFE000...
16 00000001.jpg 0xFFD8FFE000...


<html xmlns="">
<head runat="server">
    <style type="text/css">
            font-family: Arial;
            font-size: 10pt;
            border: 1px solid #ccc;
        table th
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        table th, table td
            padding: 5px;
            border-color: #ccc;
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        $(function () {
                type: "POST",
                url: "CS.aspx/PopulateImages",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    var xmlDoc = $.parseXML(response.d);
                    var xml = $(xmlDoc);
                    var customers = xml.find("Table");
                    var rows = '';
                    $.each(customers, function () {
                        var id = $(this).find("Id").text();
                        var name = $(this).find("Name").text();
                        var img = $(this).find("Data").text();
                        rows += "<tr><td>" + id + "</td><td>" + '<img src="data:image/jpg;base64,' + img + '" />' + "</td><td>" + name + "</td></tr>";
                    $('.tblProducts tbody').append(rows);
                error: function (response) {
                    var r = jQuery.parseJSON(response.responseText);
                    alert("Message: " + r.Message);
    <form id="form1" runat="server">
        <table class="tblProducts">
                <tr class="headings" style="background-color: #4495d1;">


public static string PopulateImages()
    using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["myConnectionString1"].ToString()))
        SqlCommand cmd = new SqlCommand("SELECT Id,Name,Data FROM tblFiles WHERE ContentType = 'image/jpeg'");
        using (SqlDataAdapter sda = new SqlDataAdapter())
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet())
                return ds.GetXml();


<System.Web.Services.WebMethod> _
Public Shared Function PopulateImages() As String
	Using con As New SqlConnection(ConfigurationManager.ConnectionStrings("myConnectionString1").ToString())
		Dim cmd As New SqlCommand("SELECT Id,Name,Data FROM tblFiles WHERE ContentType = 'image/jpeg'")
		Using sda As New SqlDataAdapter()
			cmd.Connection = con
			sda.SelectCommand = cmd
			Using ds As New DataSet()
				Return ds.GetXml()
			End Using
		End Using
	End Using
End Function