CODEWITHSUNDEEP
asp.net-mvctwitter-bootstrapmodal-dialogtwitter-bootstrap-3asp.net-mvc-5
Rob Bowman
Rob Bowman

Reputation: 8731

Display Image from DB in Modal Bootstrap Window

I'm using ASP.net MVC5 with Bootstrap 3 I have the following View

@model WilhanWebsite.Models.PhotoViewModel
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Gallery</h2>

<p>
    @Html.ActionLink("Upload Photo", "Create")

    <br/>


    @for (var i = 0; i < Model.DownloadedImages.Count; i++)
    {
        <a data-toggle="modal" data-target="#img-thumbnail@i" class="img_modal" href="data:image/jpg;base64,@(Convert.ToBase64String(Model.DownloadedImages[i].ImageData))">
            <img id="img-thumbnail@i"  class="img-thumbnail" src="data:image/jpg;base64,@(Convert.ToBase64String(Model.DownloadedImages[i].ImageData))" alt="@Model.DownloadedImages[i].Description" />
        </a>
    }

    <div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Title to go here</h3>
        </div>
        <div class="modal-body">
            <img id="modal_img_target">
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
    </div>

</p>

When I click an image from the gallery I would like it to display in a modal window.

My problem is, when I click the link, the modal window displays without the image. All the examples I've seen use images from the file system whereas my site uses images from a db via a byte array. I guess the fix may be to change the line of javascript that is assigning the source attribute on the modal image but I've tried various things here without a result. The problem can be seen at the following address: Problem page

** EDIT ** Updated view to use for loop to identify images as suggested. Problem changed, now rather than displaying a blank modal page, the image is displayed on a blank page.

** EDIT Working View **

 @model WilhanWebsite.Models.PhotoViewModel
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Gallery</h2>

<p>
    @Html.ActionLink("Upload Photo", "Create")

    <br/>


    @for (var i = 0; i < Model.DownloadedImages.Count; i++)
    {
        <a data-toggle="modal" data-target="#img-thumbnail@i" class="img_modal" href="data:image/jpg;base64,@(Convert.ToBase64String(Model.DownloadedImages[i].ImageData))">
            <img id="img-thumbnail@i"  class="img-thumbnail" src="data:image/jpg;base64,@(Convert.ToBase64String(Model.DownloadedImages[i].ImageData))" alt="@Model.DownloadedImages[i].Description" />
        </a>
    }

    <div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Title to go here</h3>
        </div>
        <div class="modal-body">
            <img id="modal_img_target">
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
    </div>

</p>


<script type="text/javascript">
    $('.img_modal').on('click', function (e) {
        e.preventDefault();
        $("#modal_img_target").attr("src", this);
        $("#modal").removeClass("hide");
        $('#modal').modal('show');
    });
</script>

Upvotes: 1

Views: 4623

Answers (2)

Anup
Anup

Reputation: 9738

The problem is with your jquery, as you are getting the "#modal_img_target" src value correctly. Your onClick event is hiding the image.

Try this :-

<script type="text/javascript">
    $('.img_modal').on('click', function (e) {
        e.preventDefault();
        $("#modal_img_target").attr("src", this);
        $("#modal").removeClass("hide");
        $('#modal').modal('show');
    });
</script>

Upvotes: 1

hutchonoid
hutchonoid

Reputation: 33306

You need to add the toggle and target to the link:

<a ... data-toggle="modal" data-target="#img-thumbnail1"

Then add the target id to the image:

<img id="img-thumbnail1" class="img-thumbnail"

This means that you will have to add an incrementing number to the loop so that id's are unique.

You can do this like this:

@for (var i = 0; i < Model.DownloadedImages.Count; i++)
{
    <a data-toggle="modal" data-target="#img-thumbnail@i" class="img_modal" href="data:image/jpg;base64,@(Convert.ToBase64String(photo.ImageData))">
        <img id="img-thumbnail@i"  class="img-thumbnail" src="data:image/jpg;base64,@(Convert.ToBase64String(photo.ImageData))" alt="@photo.Description" />
    </a>
}

Upvotes: 1

Related Questions