I'm working about application which need to display list of images in table. Currently do it like that:
- I have save image in app folder
- In MS SQL - I have ImagePath(src) ex. ("/img/1.JPG") and I use render function in DataTable to display image
It's my scripts code :
[Controller]
[HttpGet]
public ActionResult GetTable()
{
using (Entities db = new Entities())
{
var TableContent = (from m in db.Table select m).ToArray();
return Json(new { data = TableContent }, JsonRequestBehavior.AllowGet);
}
}
[JS]
function Table() {
TableContent = $('#Table').DataTable({
"info": false,
"dom": 'rtip',
"pageLength": 9,
"ajax": {
"url": "@(Html.Raw(Url.Action("GetTable", "Production")))",
"type": "GET"
},
"columns": [
{ 'data': 'ID' },
{ 'data': 'Location' },
{ 'data': 'Action'},
{ 'data': 'WhenDo' },
{ 'data': 'OperationTime'},
{ 'data': 'Image', 'render': function (data)
{
return '<img height="80" width="120" src="'+data+'">'
}
}
]
})
[HTML]
<table class="table table-bordered text-center" id="TPMTable">
<thead>
<tr>
<th> # </th>
<th> Location</th>
<th> Action</th>
<th> WhenDo</th>
<th> Duration</th>
<th> Image</th>
</tr>
</thead>
</table>
This solution is working for me but I want to do it more optimized and I would like to save data in MS SQL File Table.
So It's my question - how to do it ?
I have FileTable in MS SQL with the same images saved in VarBinary(max) - datatype.
Is it possible to use the image from FileTable(blob) and display them like I do it currently ? I try it few times but without success.
On first time I created special view in datebase with join to FileTable next I converted blob data to base64 in javaScript using base64.js.
var ImageContent = (from m in db.Table2
select new { Image = m.Image }).ToArray();
return Json(new { data = TableContent},JsonRequestBehavior.AllowGet);
The problem was with ajax - probably the ImageContent array is to large to pass them correctly to view but I created alse other action with ImageID parameter and try to send image one by one and it's worked but only for one image.
Next time I created HTML Helper :
public static MvcHtmlString Image(this HtmlHelper helper, int ImageID)
{
var builder = new TagBuilder("img");
//Take data from dbo
using (Entities db = new Entities())
{
var ImageContent = (from m in db.Table2
where ImageID == m.ID
select new { Image = m.Image }).ToArray();
string ImagePath = "data:image/jpg;base64," + Convert.ToBase64String(ImageContent[0].Image, 0, ImageContent[0].Image.Length);
//Create attribute
builder.GenerateId("image" + ImageID);
builder.MergeAttribute("src", ImagePath);
// Redner tag
return new MvcHtmlString(builder.ToString(TagRenderMode.SelfClosing));
}
It's also working but only on server side I can't pass the data between javaScript to @HtmlHelper
{ 'data': 'Image', 'render': function (data)
{
return @Html.Image(data)
}
}
My question is which way is the best way to display image from database and how to do it? Send image one by one or create package with images ?