Remove From My Forums

Click to display database image - mutiple images

Question

User982203039 posted

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!

Tuesday, September 3, 2019 9:03 PM

Answers

User665608656 posted

Hi Baze,

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.

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Thursday, September 5, 2019 2:03 AM

All replies

User665608656 posted

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.

Wednesday, September 4, 2019 8:46 AM

0

Sign in to vote

User982203039 posted

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

Wednesday, September 4, 2019 12:59 PM

User665608656 posted

Hi Baze,

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.

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Thursday, September 5, 2019 2:03 AM

User982203039 posted

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>

Friday, September 6, 2019 5:19 PM

0

Sign in to vote

User665608656 posted

Hi Baze,

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.

Monday, September 9, 2019 1:40 AM
0

Sign in to vote

User982203039 posted

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

Thanks

Monday, September 9, 2019 1:10 PM

Answered by:

Click to display database image - mutiple images

Question

Answers

All replies