@foreach (var item in Model)
{
<img src='ShowShowcaseImage/@Html.Encode(item.ProductID)' id='@item.ProductID' />
<b>@Html.DisplayFor(m => item.ProductName)</b>
<a href="#" class="enlargeImg" id="@item.ProductID">Enlarge</a>
}
<div id="EnlargeContent" class="content">
<span class="button bClose"><span>X</span></span>
<div style="margin: 10px;" id="imageContent">
</div>
<p align="center"></p>
</div>
//Specific Javascript for Popup Functionality
$('.enlargeImg').bind('click', function (e) {
$.post('/Home/EnlargeShowcaseImage/' + $(this).attr('id'), null, function (data) {
document.getElementById("imageContent").innerHTML += data;
});
$('#EnlargeContent').bPopup();
});
});
// C# method implementation
public ActionResult EnlargeShowcaseImage(string id)
{
var imageData = //linq query to retrieve bytes from the database;
StringBuilder builder = new StringBuilder();
if (imageData != null)
builder.Append("<img src='" + imageData.ImageBytes + "' />");
return Json(builder);
}
An interactive feature allows users to view an enlarged image on clicking the "Enlarge" link. The images are stored in byte format within the database, with two versions for each product - a thumbnail and an enlarged version. While the thumbnail is displayed by default, the functionality showcases the larger image upon user interaction without directly retrieving it from the database.