Click to display database image - mutiple images

Reply

Member

26 Points

Click to display database image - mutiple images

Sep 03, 2019 09:03 PM|Baze72|LINK

I have a database that has 3 binary image fields. My question is how can I create a hyperlink to open a new page to display the correct image? I can do it if there is only 1 image but I am not sure how to specify the column name for the image. My DB Columns are named File1, File2 and File3. I want each image on the view page to hyperlink to Retrieve File view (full view of image) , but I am not sure how to set the hyperlink so it knows which image to display as the ID is the same but they are different fields? Does that make sense?

Here is my controller page that I want to display the image.

 public ActionResult RetrieveFile(int id)
    {
        byte[] cover = GetFileFromDataBase(id);
        if (cover != null)
        {
            return File(cover, "File/jpg");
        }
        else
        {
            return null;
        }
    }

    public byte[] GetFileFromDataBase(int Id)
    {
        var q = from temp in db.HelpDesks where temp.ID == Id select temp.File1;
        byte[] cover = q.First();
        return cover;
    }

And here is where I am displaying in my view:

  @{
            if (Model.File1 != null)
            {
                var File1 = Convert.ToBase64String(Model.File1);
                var imgSrc1 = String.Format("data:File/gif;base64,{0}", File1);
                <img class="thumb" src='@imgSrc1' ;" />
            }
            <br />
            if (Model.File2 != null)
            {
                var File2 = Convert.ToBase64String(Model.File2);
                var imgSrc2 = String.Format("data:File/gif;base64,{0}", File2);
                <img class="thumb" src='@imgSrc2' ;" />
            }
            <br />
            if (Model.File3 != null)
            {
                var File3 = Convert.ToBase64String(Model.File3);
                var imgSrc3 = String.Format("data:File/gif;base64,{0}", File3);
                <img class="thumb" src='@imgSrc3' ;" />
            }
        }

Any ideas would be great!

EB

Reply

Yongqing Yu

Contributor

3510 Points

1009 Posts

Re: Click to display database image - mutiple images

Sep 04, 2019 08:46 AM|Yongqing Yu|LINK

Hi Baze,

According to your description, I recommend that you use model to dynamically display images when displaying image list information, and add a tag to the image outer layer to specify jumping pages to display full images.

In @Url.Action, by passing the key field corresponding to your current picture stored in the database as a parameter, in the corresponding controller method, you can get the binary array of the corresponding picture again through the key value, and display the picture through the same conversion.

  public ActionResult Index()
        {
         // display your datas
            Entities2 entity = new Entities2();
            List<Employee> customers = entity.Employees.ToList();
            return View(customers);
        }

        public ActionResult ShowImage(int imageId)
        {
            Entities2 entity = new Entities2();
            var customer = (from c in entity.Employees where c.EmplId == imageId select c).FirstOrDefault();
            return View(customer);
        }

Index.cshtml:

@model IEnumerable<MVC_Cases.Models.Employee>
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <table id="tblCustomers" class="table" cellpadding="0" cellspacing="0" style="border-collapse:collapse;text-align:center" border="1">
        <tr>
            <th style="width:100px">FileId</th>
            <th style="width:150px">FileName</th>
        </tr>
        @foreach (var customer in Model)
        {
            <tr>
                <td class="EmplId">
                    <span>@customer.EmplId</span>
                </td>
                <td class="ImageName ">
                    @{
                        if (customer.ImageByte != null)
                        {
                            int EmpId = customer.EmplId;
                            string imageBase64 = Convert.ToBase64String(customer.ImageByte );
                            string imageSrc = string.Format("data:image/png;base64,{0}", imageBase64);
                            <a href="@Url.Action("ShowImage", "UpdateTable",new { imageId = EmpId })" >
                                <img src="@imageSrc" width="100" height="100" />
                            </a>
                        }
                    }

                </td>

            </tr>
        }
    </table>

</body>
</html>

ShowImage.cshtml:

@model MVC_Cases.Models.Employee
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ShowImage</title>
</head>
<body>
    <div>
        @{
            if (Model.ImageByte != null)
            {
                string imageBase64 = Convert.ToBase64String(Model.ImageByte );
                string imageSrc = string.Format("data:image/png;base64,{0}",imageBase64 );

                <img src="@imageSrc"  />
            }
        }
    </div>
</body>
</html>

Here is the result (in my example, i use three same pictures to test):

Best Regards,

YongQing.

MSDN Community Support

Please remember to click "Mark as Answer" the responses that resolved your issue.

If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

Reply

Baze72

Member

26 Points

105 Posts

Re: Click to display database image - mutiple images

Sep 04, 2019 12:59 PM|Baze72|LINK

Hi YongQing.

Thanks for the reply. Will this work in my case where it is 1 record in the database? Same ID but 3 image fields? Do I pass the image field as the ID?

Thanks

EB

Reply

Yongqing Yu

Contributor

3510 Points

1009 Posts

Re: Click to display database image - mutiple images

Sep 05, 2019 02:03 AM|Yongqing Yu|LINK

Hi Baze,

Baze72
Will this work in my case where it is 1 record in the database? Same ID but 3 image fields? Do I pass the image field as the ID?

No, if you have same Id with these 3 image fields, you should change to another method.

I recommend that you can use ajax in jquery to pass base64 string to another action in the controller, then use Session in controller to record the src of current image.

After this, you can redirect to another view in ajax success method.

For more details, you could refer to this link:

Index.cshtml:

@model IEnumerable<MVC_Cases.Models.Employee>
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        
        $(function () {
            $("img").click(function () {
                var src = $(this).attr("src");
                $.ajax({
                    type: "post",
                    url: "/UpdateTable/ShowImage",
                    data: { "src": src },
                    datatype: "json",
                    cache: false,
                    success: function () {
                        window.location.href = "/UpdateTable/ShowImage";
                    },
                });

            })
        }))
        })
    </script>
</head>
<body>
    <table id="tblCustomers" class="table" cellpadding="0" cellspacing="0" style="border-collapse:collapse;text-align:center" border="1">
        <tr>
            <th style="width:100px">FileId</th>
            <th style="width:150px">FileName</th>
        </tr>
        @foreach (var customer in Model)
        {
            <tr>
                <td class="EmplId">
                    <span>@customer.EmplId</span>
                </td>
                <td class="FirstName">
                    @{
                        if (customer.ImageName != null)
                        {
                            string imageBase64 = Convert.ToBase64String(customer.ImageName);
                            string imageSrc = string.Format("data:image/png;base64,{0}", imageBase64);
                            <img src="@imageSrc" width="100" height="100" />
                        }
                    }

                </td>

            </tr>
        }
    </table>

</body>
</html>

    <script type="text/javascript">
        $(function () {
            $("img").click(function () {
                var src = $(this).attr("src"); 
                $.ajax({
                    type: "post",
                    url: "/UpdateTable/ShowImage",
                    data: { "src": src },
                    datatype: "json",
                    cache: false,
                    success: function () {
                        window.location.href = "/UpdateTable/ShowImage";
                    },
                });

            })
        })
    </script>

Controller:

    public ActionResult ShowImage(string src)
        {
            string imageSrc = "";
            if (src != null)
            {
                Session["src"] = src;
            }
            imageSrc = Session["src"].ToString(); 
            return View((object)imageSrc);
        }

ShowImage.cshtml:

@model string
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ShowImage</title>
</head>
<body>
    <div>
                <img src="@Model" />
    </div>
</body>
</html>

Here is the result :

Best Regards,

YongQing.

MSDN Community Support

Please remember to click "Mark as Answer" the responses that resolved your issue.

If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

Reply

Baze72

Member

26 Points

105 Posts

Re: Click to display database image - mutiple images

Sep 06, 2019 05:19 PM|Baze72|LINK

Here is what I have - but clicking on the image does nothing at all:

@model PBTIntranet.Models.HelpDesk

@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style type="text/css">
    .thumb {
        max-width: 500px;
        max-height: 500px;
        width: expression(this.width > 100 ? "500px" : true);
        height: expression(this.height > 100 ? "500px" : true);
    }
</style>

<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("img").click(function () {
            var src = $(this).attr("src");
            $.ajax({
                type: "post",
                url: "/HelpDesk/ShowImage",
                data: { "src": src },
                datatype: "json",
                cache: false,
                success: function () {
                    window.location.href = "/HelpDesk/ShowImage";
                },
            });

        })
    })


</script>

<h2>Details</h2>

<div>
    <h4>Swap Shop</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.Item)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Item)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Description)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Description)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Price)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Price)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.ContactInfo)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.ContactInfo)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Seller)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Seller)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.ExpireDate)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.ExpireDate)
        </dd>

        <dt>
            @*@Html.DisplayNameFor(model => model.Image)*@
        </dt>

        <dd>
            @if (@Model.Image != null)
            {
                @*<img src="/SwapShop/RetrieveImage/@Model.ID" alt="" height=500 width=700 />*@
                string imageBase64 = Convert.ToBase64String(Model.Image);
                string imageSrc = string.Format("data:image/png;base64,{0}", imageBase64);
                <img class="thumb" src="@imageSrc" />
            }
        </dd>

    </dl>
</div>
<p>
    @Html.ActionLink("Edit", "Edit", new { id = Model.ID }) |
    @Html.ActionLink("Back to List", "Index")
</p>

Reply

Yongqing Yu

Contributor

3510 Points

1009 Posts

Re: Click to display database image - mutiple images

Sep 09, 2019 01:40 AM|Yongqing Yu|LINK

Hi Baze,

Baze72
Here is what I have - but clicking on the image does nothing at all:

According to your description,I recommend that you use F12 to see if there is any error messages in the console tab.

Could you give us your ShowImage method in HelpDesk controller in detail, which will help us solve your issue more easily.

Best Regards,

YongQing.

MSDN Community Support

Please remember to click "Mark as Answer" the responses that resolved your issue.

If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

Reply

Baze72

Member

26 Points

105 Posts

Re: Click to display database image - mutiple images

Sep 09, 2019 01:10 PM|Baze72|LINK

I figure it out. I did not have the @model string at the begging of the view like you showed!

Thanks

Click to display database image - mutiple images [Answered]RSS

6 replies

Shortcuts

Related Links

Click to display database image - mutiple images

Re: Click to display database image - mutiple images

Re: Click to display database image - mutiple images

Re: Click to display database image - mutiple images

Baze72

Re: Click to display database image - mutiple images

Re: Click to display database image - mutiple images

Baze72

Re: Click to display database image - mutiple images