Display Image from DB in Modal Bootstrap Window - asp.net-mvc

Question

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>

Answer 1

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>
}

Answer 2

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>