CODEWITHSUNDEEP
asp.net-mvcroutes
Keith Barrows
Keith Barrows

Reputation: 25308

MVC - RouteLink and Image

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?

Upvotes: 11

Views: 5527

Answers (3)

Mudasar Rauf
Mudasar Rauf

Reputation: 552

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.

Upvotes: 2

Fernando JS
Fernando JS

Reputation: 4317

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>

Upvotes: 9

&#199;ağdaş Tekin
&#199;ağdaş Tekin

Reputation: 16651

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>

Upvotes: 11

Related Questions