Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2175
  • Last Modified:

In ASP.NET 4.0 MVC 3, How to make html.actionlink without text but with image inside. We do not want to create a helper class

Let me explain the scenario. We have a index page where we are displaying 4 products, and one of the sample product is attached as an image (product image). Along the product there is Details and Order now image button.
Click on Details image button will open a model popup containing details about the product, this also attached as product detail popup image

We are using ASP.NET 4.0 MVC 3 Razor View, The problem we are facing is we are not able to use HTML.Actionlink with image, were as with Text we are able to call model popup please have a look at my third attached product with text link image

We have googled for some solution, but every were they are mentioning to use helper class. We want to avoid it, if there are any other straight forward solution available.

Sincere appreciation for any help

Aji
product.JPG
product-detail-model-popup.JPG
product-with-text.JPG
0
swsbuyer
Asked:
swsbuyer
  • 2
2 Solutions
 
HohlovDimaCommented:
Hi,
<a href="<%= Url.Action("ActionName", "ControllerName") %>">
    <img src="<%= Url.Content("~/Content/img/imgname.jpg") %>" /></a>

Open in new window

Best regards,
Dima.
0
 
HohlovDimaCommented:
Or you can try to do something like this
@Html.ActionLink(" ", "Edit", new { id = item.Id },
new { @class = "edit-item-link", @title = "Edit" })

Open in new window

Link text is empty.

And here is CSS class which adds image:

.edit-item-link
{
display: block;
width: 200px;
height: 60px;
background-image: url(images/edit.png);
}

Open in new window

0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now