Click on thumbnail and route to Controller method - asp.net

Question

I written a view that display a table listing of thumbnails. It is working now. Next I am writing another view, which display a new view with detailed information of the
item thumbnail which was clicked. Right now, I am not sure how to add the information which makes the thumbmail clickable that routes to the GetDetailInfo Controller method
that return a detailed information view.
Here is my thumbnail table list code:
<table class="table-responsive" width="100%">
<tbody>
#foreach (var productGroup in Model.Select((e, i) => new { Product = e, Grouping = (i / 4) }).GroupBy(e => e.Grouping))
{
<tr>
#foreach (var product in productGroup)
{
<td>
<div><br /></div>
<img src=#product.Product.Thumbnail style="width: 100px; height: 100px" />
<div><br /></div>
</td>
}
</tr>
}
</tbody>
</table>
Here is my the Controller method which I am writing which is called when the thumbnail is click and return a detailed view.
[MvcSiteMapNode(Title = "Item Detail", ParentKey = "Item-Home", Key = "Item-Detail", PreservedRouteParameters = "itemId")]
[Route("~/item/{itemId}/detail")]
public async Task<ActionResult> GetDetailInfo(int itemId)
{
var result = await ItemService.GetDetailInfo(contentId) );
return View(result.Dto);
}
I am not sure how to route the click on thumnbnail to this controller method to return a new detail info view. Any help is appreciated. Thanks

Answer 1

There are two common ways to make an image as a link.
1 - Using a link tag.
<a href="#Url.Action("GetDetailInfo", "Controller", new { itemId = product.Product.Id })">
<img src="#product.Product.Thumbnail" style="width: 100px; height: 100px" />
</a>
2 - Using a custom Html Helper
Source:
public MvcHtmlString ActionImage(this HtmlHelper htmlHelper,
string controller,
string action,
object routeValues,
string imagePath,
string alternateText = "",
object htmlAttributes = null)
{
var anchorBuilder = new TagBuilder("a");
var url = new UrlHelper(HtmlHelper.ViewContext.RequestContext);
anchorBuilder.MergeAttribute("href",url.Action(action,controller,routeValues));
var imgBuilder = new TagBuilder("img");
imgBuilder.MergeAttribute("src", url.Content(imagePath));
imgBuilder.MergeAttribute("alt", alternateText);
var attributes = (IDictionary<string, object>) HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
imgBuilder.MergeAttributes(attributes);
string imgHtml = imgBuilder.ToString(TagRenderMode.SelfClosing);
anchorBuilder.InnerHtml = imgHtml;
return MvcHtmlString.Create(anchorBuilder.ToString());
}
Using:
#Html.ActionImage("Controller", "GetDetailInfo", new { itemId = #product.Product.Id }, "#product.Product.Thumbnail", "alternateText")
Asp.Net MVC Html Helper to create link with an image
The first method is handy - and rightly commented by Bardicer in your question, - but the second one is more practical.