テーブルに画像のリストを表示する必要があるアプリケーションに取り組んでいます。現在、そのようにしています:
- アプリフォルダーに画像を保存しました
- MS SQL では、ImagePath(src) ex があります。("/img/1.JPG") で、DataTable の render 関数を使用して画像を表示します
それは私のスクリプトコードです:
[コントローラ]
[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 ファイル テーブルにデータを保存したいと考えています。
だからそれは私の質問です - それを行う方法は?
VarBinary(max) - データ型に保存された同じ画像を含む MS SQL の FileTable があります。
FileTable(blob) の画像を使用して、現在のように表示することはできますか? 数回試してみましたが、成功しませんでした。
最初に、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パラメーターを使用して他のアクションを作成し、画像を1つずつ送信しようとしましたが、機能しましたが、1つの画像に対してのみ.
次回は 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)
}
}
私の質問は、データベースから画像を表示する最良の方法とその方法です。画像を 1 つずつ送信するか、画像を含むパッケージを作成しますか?