Отображение изображения из MS SQL FileTable в приложении MVC
Я работаю над приложением, которое должно отображать список изображений в таблице. В данный момент делаем это так:
- У меня есть сохранить изображение в папке приложения
- В MS SQL - у меня есть ImagePath(src) ex. ("/img/1.JPG") и я использую функцию рендеринга в DataTable для отображения изображения
Это код моего скрипта:
[Контроллер]
[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>
Это решение работает для меня, но я хочу сделать его более оптимизированным, и я хотел бы сохранить данные в таблице файлов MS SQL.
Так что это мой вопрос - как это сделать?
У меня есть File Table в MS SQL с теми же изображениями, сохраненными в VarBinary(max) - тип данных.
Можно ли использовать изображение из FileTable(blob) и отображать их так, как я это делаю в настоящее время? Я пробую это пару раз, но безуспешно.
В первый раз я создал специальное представление в базе данных с присоединением к File Table, затем преобразовал данные BLOB-объектов в base64 в javaScript с использованием base64.js.
var ImageContent = (from m in db.Table2
select new { Image = m.Image }).ToArray();
return Json(new { data = TableContent},JsonRequestBehavior.AllowGet);
Проблема была с ajax - возможно, массив ImageContent слишком велик, чтобы передавать их правильно для просмотра, но я создал другое действие с параметром ImageID и попытался отправить изображение одно за другим, и оно работало, но только для одного изображения.
В следующий раз я создал 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));
}
Это также работает, но только на стороне сервера, я не могу передать данные между javaScript в @HtmlHelper
{ 'data': 'Image', 'render': function (data)
{
return @Html.Image(data)
}
}
У меня вопрос, какой способ является лучшим способом для отображения изображения из базы данных и как это сделать? Отправить изображение по одному или создать пакет с изображениями?