Is it possible to use an ActionLink containing an element?

Question

As the question says, Is it possible to use an ActionLink containing an element, and if not, what is the best way to achieve it?

For example, lets say I have a Span element, I want the whole thing to be a hyperlink... The following works:

<a href="/Site/Page/@Model.ID?Type=test">
                <span class="box5">Click anywhere in this box</span> </a>

Imagine that span/css class box5 makes this large... Was originally a DIV, but, I found that didn't follow standards and this appears to follow ok.

This renders and works fine, but, is there anyway to use an ActionLink instead? I have tried to guess the syntax such as (copying from forms):

@using (Html.Actionlink){<span class="box5">Click anywhere in this box</span>}

and many other combinations without any luck.

Now, my manual HTML workaround works fine and I am happy to leave it, but, is it possible to use a MVC ActionLink, and if it is, should I even worry/would there be any benefits?

Gilda

Answer 1

Just use @Url.Action instead:

<a href="@Url.Action("Page","Site", new { id = Model.Id, @Type = "test" })">
 <span class="box5">Click anywhere in this box</span> </a>

Poynter

Answer 2

There's a hack you can use to work around the limitation

@Html.Raw(
     Html
        .ActionLink("-replace-me-", .....)
        .ToString()
        .Replace(
              "-replace-me-", 
              @"<span class=""box5"">Click anywhere in this box</span>"))

it's not elegant, but it does the job

Lifeordeath

use Michael Stum's suggestion, but keep this hack in your back pocket, it can come in handy when using Ajax.ActionLink – Lifeordeath

+1 certainly - I didn't want to edit/rephrase the question after getting the answer, but, I have decided that I want these to be Ajax links and, it looks like this solution works (after being stuck all morning)... so, +1/answer to Michael, but +1 to you as well. – Gilda

I am not sure if I am doing it wrong, but, it just renders as text... I am guessing razor is doing its thing behind the scenes. Encasing it all in @Html.Raw() seems to do the trick... At first this looks confusing, but, it is amazing! – Gilda

Answer 3

Html.ActionLink is just a plain old Extension Method to the HtmlHelper object.

You can create your own custom extension methods for HtmlHelper as well, and they're pretty simple to do and will save you tons of time.

Spirula

Answer 4

You can not specify a html tag inside actionlink, but I can suggest you two solutions: 1 extend the actionlink with your function. So you can also implement actionlink that generate href with other htmal tag inside (img or span like in your case)

2 using the url.content in the href. It's like your actual workaround but better because you use the rules you have defined in the global.asax instead of using "magic string"

Yet

Answer 5

Just Write <span> </span> and in between the span use the @html>ActionLink Method It will work

Extract

I think the original poster wanted a way to include just part of the link text within the span--in other words, the <span> is nested in the <a> and not vice versa. – Nonanonage