Question

It seems to be simple, but I can’t get anything to work. This code was generated by my template generator and needs to be changed.

<li><a href="../Home/Contact" class="active"><span class="l"></span><span class="r">
                        </span><span class="t">Nous contacter</span></a> </li>

My best bet up to now is:

    <li><span class="l"></span><span class="r"></span>
@Html.RouteLink("Contact", new { Controller = "Home", Action = "Contact" }, new { @class = "t" })</li>

But it doesn’t do anything.
Just to make sur that my question is clear: The link works in both cases, that’s fine. The formating doesn’t work. That’s my issue here.

Answer 1

The second will generate:

<li>
    <span class="l"></span>
    <span class="r"></span>
    <a class="t" href="/Home/Contact">Contact</a>
</li>

which is different than what you had in the first place which might explain the formatting problems:

<li>
    <a href="../Home/Contact" class="active">
        <span class="l"></span>
        <span class="r"></span>
        <span class="t">Nous contacter</span>
    </a>
</li>

The problem with Html helpers such as Html.ActionLink and RouteLink is that they by always Html encode the text, so you cannot use HTML as text. So one possibility is the following:

<li>
    <a href="@Url.RouteUrl("Contact", new { controller = "home", action = "contact" })" class="active">
        <span class="l"></span>
        <span class="r"></span>
        <span class="t">Nous contacter</span>
    </a>
</li>

Another possibility if you have lots of those to generate is to write a custom Html helper that will do the job for you:

public static class HtmlExtensions
{
    public static IHtmlString MyLink(
        this HtmlHelper htmlHelper, 
        string linkText, 
        string routeName, 
        object routeValues
    )
    {
        var spans = string.Format(
            "<span class=\"l\"></span><span class=\"r\"></span><span class=\"t\">{0}</span>", 
            htmlHelper.Encode(linkText)
        );

        var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
        var url = urlHelper.RouteUrl(routeName, routeValues);
        var anchor = new TagBuilder("a");
        var rvd = new RouteValueDictionary(routeValues);
        var rd = htmlHelper.ViewContext.RouteData;
        var currentAction = rd.GetRequiredString("action");
        var currentController = rd.GetRequiredString("controller");
        var controller = rvd["controller"] as string;
        var action = rvd["action"] as string;
        if (string.Equals(controller, currentController, StringComparison.OrdinalIgnoreCase) &&
            string.Equals(action, currentAction, StringComparison.OrdinalIgnoreCase))
        {
            anchor.AddCssClass("active");
        }
        anchor.Attributes["href"] = url;
        anchor.InnerHtml = spans;
        return new HtmlString(anchor.ToString());
    }
}

and then:

<li>
    @Html.MyLink("Nous contacter", "Contact", new { controller = "home", action = "contact" })
</li>