1

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 ?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129

0 Answers0