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 )

Results 1 - 5 of 7 12
Posted on Sep 26, 2017 05:03 AM

Hi ramkiran,

Please share the relevant code with HTML.


Posted on Sep 26, 2017 09:24 AM

by using this i convert image to binary format.

Byte[] fileData = null;
using (var binaryReader = new BinaryReader(Request.Files[0].InputStream))
{
fileData = binaryReader.ReadBytes(Request.Files[0].ContentLength);
}

in database it looks like that: 0xFFD8FFE000104A46494600010101......

here I'm return json data

[HttpGet]
public JsonResult mydata()
{

// some code

while (reader.Read())
{
employee.Add(
new empM
{
id = int.Parse(reader["id"].ToString()),
name = reader.GetValue(1).ToString(),
images=(byte[])(reader["imageis"])
});
}

return Json(employee, JsonRequestBehavior.AllowGet);
}

here my problem is i don't know how to append binary image to table like text column's filed.

in following link : 

https://www.aspsnippets.com/Articles/Populate-Bind-HTML-Table-from-database-using-jQuery-AJAX-and-JSON-in-ASPNet-MVC.aspx

i succeed  to Bind data as the above link,but while working with images i'm not succeed 

below is the code as same in above article with  very minor changes

so can u please try to solve this 

<body>
    <table id="tblCustomers" cellpadding="0" cellspacing="0">
        <tr>
            <th>CustomerID</th>
            <th>ContactName</th>
            <th>image</th>
          
        </tr>
        <tr style="display:none">
            <td>CustomerID</td>
            <td>ContactName</td>
            <td>image</td>
          
        </tr>
    </table>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="~/Scripts/ASPSnippets_Pager.min.js"></script>
    <script type="text/javascript">
        $(function () {
            GetCustomers(1);
        });
        $("body").on("click", ".Pager .page", function () {
            GetCustomers(parseInt($(this).attr('page')));
        });
        function GetCustomers(pageIndex) {
            $.ajax({
                type: "POST",
                url: "/Home/AjaxMethod",
                data: '{pageIndex: ' + pageIndex + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        }
 
        function OnSuccess(response) {
            var model = response;
            var row = $("#tblCustomers tr:last-child").removeAttr("style").clone(true);
            $("#tblCustomers tr").not($("#tblCustomers tr:first-child")).remove();
            $.each(model.Customers, function () {
                var customer = this;
                $("td", row).eq(0).html(customer.id);
                $("td", row).eq(1).html(customer.name);
                $("td", row).eq(2).html(customer.images);
                
                $("#tblCustomers").append(row);
                row = $("#tblCustomers tr:last-child").clone(true);
            });
            
        };
    </script>
</body>

 


Posted on Sep 27, 2017 12:32 AM

in the below code i'm getting id & name column's data,but image column data not comes.

i'm returning json data from controller.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type = "text/javascript" >
$(document).ready(function()
{

$.ajax
({
type: 'GET',
url: '@Url.Action("imimage")',
//url:"/Default1/imimage",
dataType: 'json',
data: { },
success: function (data) {
var rows = '';
$.each(data, function(i, item)
{
rows += "<tr>" +
"<td>" + item.Id + "</td>" +
"<td>" + '<img src="data:image/jpg;base64,' +item.oimg + '" />' + "</td>" +
"<td>" + item.Name + "</td>" +
"</tr>";
});
$('.tblProducts tbody').append(rows);
},
error: function(ex)
{
var r = jQuery.parseJSON(response.responseText);
alert("Message: " + r.Message);
}
});

});
</script>
<style type = "text/css" >
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

th, td {
padding: 15px;
}
th {
text-align:center;
}
table {
border-spacing: 5px;
}
</style>

<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>

 


Posted on Sep 27, 2017 05:31 AM

Hi ramkiran,

Please share the Json Data which you are returning from controller so that we can help you out.


Posted on Sep 27, 2017 09:04 AM

 

        public ActionResult im()
        {
            return View();
        }

        public JsonResult imimage()
        {
            SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["myConnectionString1"].ToString());
            SqlCommand cmd = new SqlCommand("select * from imgmvc", con);
            con.Open();
            SqlDataReader dr = cmd.ExecuteReader();
            List<myimageclass> items = new List<myimageclass>();
            while (dr.Read())
            {
                items.Add(new myimageclass
                {
                    Id = Convert.ToInt32(dr["id"]),
                    oimg = (byte[])(dr["imageis"]),
                    Name = dr["name"].ToString()
                });
            }
            return Json(items, JsonRequestBehavior.AllowGet);
        }