0 
<li class="rtsLI" id="Summary"><a href="javascript:void(0);" onclick="javascript:rtsXXX.OnClientTabSelected(this‌​, 0);" class="rtsLink"><span class="rtsTxt">Test</span></a></li>

Above I am replacing with following actionlink:

<li class="rtsLI" >@Html.ActionLink("test1", "Index", new { Area = "Area1", Controller = "controller1" }, new { @class = "rtsLink rtsTxt"})</li> "

At first css is working fine. But when using Actionlink, css not working. Thanks

Improve this question

3 Answers 3

Reset to default
2

The standard ActionLink helper always HTML encodes the link text. This means that you cannot use it if you want to render HTML inside. You have 3 possibilities:

  1. Modify your CSS so that you don't need a span inside the link and so that the rtsTxt class could directly be applied to the link

  2. Write a custom ActionLink helper that doesn't HTML encode the text and which would allow you to generate the same markup:

    public static class ActionLinkExtensions
{
    public static IHtmlString ActionLinkUnencoded(
        this HtmlHelper htmlHelper, 
        string linkText, 
        string actionName, 
        object routeValues, 
        object htmlAttributes
    )
    {
        var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
        var link = new TagBuilder("a");
        link.MergeAttributes(new RouteValueDictionary(htmlAttributes));
        link.Attributes["href"] = urlHelper.Action(actionName, routeValues);
        link.InnerHtml = linkText;
        return new HtmlString(link.ToString());
    }
}

    and then:

    <li>
    @Html.ActionLinkUnencoded(
        "<span class=\"rtsTxt\">User Security</span>", 
        "index", 
        new { area = "Tools", controller = "UserSecurity" }, 
        new { @class = "rtsLink" }
    )
</li>

  3. Use the Url.Action helper:

    <li class="rtsLI">
    <a href="@Url.Action("index", new { area = "Tools", controller = "UserSecurity" })" class="rtsLink">
        <span class="rtsTxt">User Security</span>
    </a>
</li>
Improve this answer
Sign up to request clarification or add additional context in comments.

12 Comments

Thanks very much. It works fine with CSS. How to use the above onclick event in Action method.
You could include it in the htmlAttributes: new { @class = "rtsLink", onclick = "javascript:rtsMemoTextMenuContainerTabsManager.OnClientTabSelected(this‌​, 0);" }.
i used like this. Is this correct or I need to do any change. <a href="@Url.Action("Index", new { Area = "Tools", Controller = "UserSecurity"})" "javascript:void(0);" onclick="javascript:rtsMemoTextMenuContainerTabsManager.OnClientTabSelected(this, 0);" class="rtsLink"> <span class="rtsTxt">User Security</span> </a>
Seems fine. It's just that in your initial link the href was empty.
What change I need to do for the 'href' being empty. Thanks.
|
0

Best option will be to use @Url.Action extension method

<li class="rtsLI" id="Summary"><a href="@Url.Action("Index", new { Area = "Tools", Controller = "UserSecurity" })" class="rtsLink"><span class="rtsTxt">User Security</span></a></li>
Improve this answer

Comments

0

Write code this way:

<li class="rtsLI" >@Html.ActionLink("<span class='rtsTxt'>User Security</span>", "Index", new { Area = "Tools", Controller = "UserSecurity" }, new { @class = "rtsLink"})</li>`
Improve this answer

3 Comments

This one should create almost the same html as presented. Try to add id="Summary" for li node that wrapping @Html.ActionLink
displaying as "<span class='rtsTxt'>User Security</span>" instead of "User Security" without any css.
Use variant with Url.Action this is the best option