How to display text and binary images in table using asp.net mvc jquery ajax from database
public List<Products> DealAll()
{
List<Products> deals1 = new List<Products>();
using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString))
{
con.Open();
SqlCommand cmd = new SqlCommand("select * from products", con);
// cmd.CommandType = CommandType.StoredProcedure;
// cmd.CommandType = CommandType.StoredProcedure;
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
deals1.Add(new Products
{
Productid = Convert.ToInt32(dr["Productid"]),
Proddetails = dr["Proddetails"].ToString(),
Prodimage = Convert.ToBase64String((byte[])dr["Prodimage"]),
});
}
return deals1;
}
}
in Homecontroller.cs
public JsonResult Listdeals()
{
return Json(dblayer.DealAll(), JsonRequestBehavior.AllowGet);
}
public class Products
{
public int Productid { get; set; }
public string Proddetails { get; set; }
public string Prodimage { get; set; }
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
.lazyImages {
text-align: center;
}
.lazyImages img {
max-width: 200px;
margin-bottom: 50px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/Home/Listdeals",
dataType: "json",
success: function (data) {
for (var i = 0; i < data.d.length; i++) {
var Productid = data.d[i].Productid;
var Proddetails = data.d[i].Proddetails;
var prodimage = "data:image/jpg;base64," + data.d[i].prodimage;
$("#tblImages").append(
"<div class='trclass lazyImages'>" +
" <tr><td class='tdcolumn'>" +
" <div class='tabledivprod'>" +
" <img class='pdtimgclnt' src='" + prodimage + "' />" +
" <div class='Productname'>(" + Proddetails + ")</div>" +
" <div class='PdtID'>" + Productid + "</div>" +
" <br /><br />" +
" </div>" +
" </td></tr>" +
"</div>");
}
},
});
});
</script>
</head>
<body>
<form>
<div>
<div id="tblImages">
</div>
</div>
</form>
</body>
</html>
