12

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?

Wil
  • 10,234
  • 12
  • 54
  • 81

5 Answers5

29

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>
Michael Stum
  • 177,530
  • 117
  • 400
  • 535
5

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

Jason
  • 15,915
  • 3
  • 48
  • 72
  • 1
    use Michael Stum's suggestion, but keep this hack in your back pocket, it can come in handy when using Ajax.ActionLink – Jason Nov 03 '11 at 06:46
  • +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. – Wil Nov 03 '11 at 11:24
  • 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! – Wil Nov 03 '11 at 11:47
1

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.

rossipedia
  • 56,800
  • 10
  • 90
  • 93
1

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"

Iridio
  • 9,213
  • 4
  • 49
  • 71
0

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

user1006544
  • 1,514
  • 2
  • 16
  • 26