Marie Marie - 5 months ago 44
CSS Question

Wanting to use an image with text in Html.ActionLink

I am using the following:

<img src="../../Content/Images/lock_16.gif" />
@Html.ActionLink("Register",
"Register",
"Users",
null,
new { title = "Register your ID", rel = "nofollow"
})


What I would like is for the lock image to appear inside of the
<a> </a>
so it is clickable and not before it. I already use (and change color on hover) of a background image so its not possible for me to use the background-image property to display the image.

Can anyone think of a way that I can set the image so that it will show before the text and still be clickable. Hopefully I can find a way that still allows me to use the MVC Html.ActionLink.

Answer

Html helpers in ASP.NET MVC should be used when they simplify writing code, not always. Plain html would go way better in your case

<a href="@Url.Action("Register", "Users")" title="Register Your ID", rel="nofollow">
     Register <img src="@Url.Content("~/Content/Images/lock_16.gif")" />
</a>

Note that link address is still generated dynamically, using UrlHelper.Action method. This way, you do not lose link dependency to your route configuration. Also, as Nicholas mentioned, image source should be generated via Url.Content helper.

Comments