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