1

テーブルに画像のリストを表示する必要があるアプリケーションに取り組んでいます。現在、そのようにしています:

  • アプリフォルダーに画像を保存しました
  • 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 つずつ送信するか、画像を含むパッケージを作成しますか?

4

0 に答える 0