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 )

Results 1 - 5 of 7 12

Posted one year ago

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

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

Hi ramkiran,

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


Posted one year ago

 

        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);
        }