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

Last Reply one year ago By ramkiran

Posted one year ago

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 one year ago Modified on one year ago

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        table
        {
            border: 1px solid #ccc;
        }
        table th
        {
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        }
        table th, table td
        {
            padding: 5px;
            border-color: #ccc;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                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);
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table class="tblProducts">
            <thead>
                <tr class="headings" style="background-color: #4495d1;">
                    <th>
                        Id
                    </th>
                    <th>
                        Image
                    </th>
                    <th>
                        Name
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    </form>
</body>
</html>

C#

[System.Web.Services.WebMethod]
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())
            {
                sda.Fill(ds);
                return ds.GetXml();
            }
        }
    }
}

VB.Net

<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()
				sda.Fill(ds)
				Return ds.GetXml()
			End Using
		End Using
	End Using
End Function

Screenshot