我正在研究需要在表格中显示图像列表的应用程序。目前这样做:
- 我已将图像保存在应用程序文件夹中
- 在 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 文件表中。
所以这是我的问题 - 怎么做?
我在 MS SQL 中有 FileTable,在 VarBinary(max) 中保存了相同的图像 - 数据类型。
是否可以使用 FileTable(blob) 中的图像并像我目前那样显示它们?我尝试了几次但没有成功。
我第一次在 datebase 中创建特殊视图并加入 FileTable,接下来我使用 base64.js 在 javaScript 中将 blob 数据转换为 base64。
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)
}
}
我的问题是哪种方式是从数据库中显示图像的最佳方式以及如何做到这一点?一张一张发送图片或创建带有图片的包?