MVC - RouteLink and Image

Question

I'd like this output:

<a href="\Catalog\Flooring">
    <img src="http://site.com/dot.jpg" width="100px" height="100px" alt="" />
    <span>Some text here</span>
</a>

using a RouteLink similar to:

<%= Html.RouteLink(myFPV.ProductTypeName, "CatalogType", new { controller = "Catalog", action = "Types", group = myFPV.ProductGroupName, type = myFPV.ProductTypeName })%>

I cannot figure out how to add an <img> and <span> (with text) tags inside my <a> tag.

Make sense?

Answer 1

The first parameter of the RouteLink method is for the link text. But unfortunately, it gets encoded automatically, so you cannot send <, > characters to it. (Well, you can. But they'd get encoded.)

Take a look at this page.

Route values are URL encoded automatically. For example, the string “Hello World!” is encoded to “Hello%20World!”.

Rendering Image Links

Unfortunately, you can’t use the Html.ActionLink() helper to render an image link. Because the Html.ActionLink() helper HTML encodes its link text automatically, you cannot pass an tag to this method and expect the tag to render as an image.

Instead, you need to use the Url.Action() helper to generate the proper link. Here’s how you can generate a delete link with an image:

<a href="<%= Url.Action("Delete") %>">
  <img src="../../Content/Delete.png" alt="Delete" style="border:0px" />
</a>

Answer 2

I suggest use the Url.RouteUrl.

<a href="@Url.RouteUrl("Default", new { action = "Index", controller = "Department", id = 1 })">
 <img src="http://site.com/dot.jpg" width="100px" height="100px" alt="" />  </a>

Answer 3

There is a better option to do that. you should try some thing like

<a href="@Url.RouteUrl("index-lang")">
  <img src="~/images/logo.png" alt="">
 </a>

where the "index-lang" is the route name in route mapping table.