使用 CSS 时如何使用 Action Link答案

【问题标题】：How to work with Action Link when using CSS使用 CSS 时如何使用 Action Link
【发布时间】：2012-08-31 06:47:46
【问题描述】：

<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>

上面我将替换为以下操作链接：

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

起初 css 工作正常。但是在使用 Actionlink 时，css 不起作用。谢谢

【问题讨论】：

标签： asp.net-mvc html css razor asp.net-mvc-4

【解决方案1】：

标准的 ActionLink 帮助程序总是对链接文本进行 HTML 编码。这意味着如果你想在里面渲染 HTML，你就不能使用它。您有 3 种可能性：

修改你的 CSS，这样你就不需要在链接中使用 span 并且 rtsTxt 类可以直接应用于链接

编写一个不对文本进行 HTML 编码并允许您生成相同标记的自定义 ActionLink 帮助器：

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());
    }
}

然后：

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

使用 Url.Action 助手：

<li class="rtsLI">
    <a href="@Url.Action("index", new { area = "Tools", controller = "UserSecurity" })" class="rtsLink">
        <span class="rtsTxt">User Security</span>
    </a>
</li>

【讨论】：

非常感谢。它适用于 CSS。如何在 Action 方法中使用上述 onclick 事件。
您可以将其包含在 htmlAttributes 中：new { @class = "rtsLink", onclick = "javascript:rtsMemoTextMenuContainerTabsManager.OnClientTabSelected(this‌, 0);" }。
我是这样用的。这是正确的还是我需要做任何改变。用户安全
看起来不错。只是在您的初始链接中，href 是空的。
我需要为“href”为空做些什么改变。谢谢。

【解决方案2】：

最好的选择是使用@Url.Action 扩展方法

<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>

【讨论】：

【解决方案3】：

这样写代码：

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

【讨论】：

这个应该创建几乎与呈现相同的 html。尝试为包装 @Html.ActionLink 的 li 节点添加 id="Summary"
显示为“用户安全”而不是“用户安全”，没有任何 css。
使用带有 Url.Action 的变体这是最好的选择