Question

我正在尝试设置动作链接的样式，如下所示：

  <text><p>Signed in as @Html.ActionLink(Context.User.Identity.Name,"Index",new { Controller="Account", @style="text-transform:capitalize;" })</p>

我希望将其呈现为

<p>Signed in as <a href="Index" style="text-transform:capitalize;">MyName</a></p>

但是，生成的是

<p>Signed in as <a href="/Account?style=text-transform%3Acapitalize%3B">MyName</a></p>

将样式附加到网址上。我做错了什么？

Answer 1

这是签名。

public static string ActionLink(this HtmlHelper htmlHelper, 
                                string linkText,
                                string actionName,
                                string controllerName,
                                object values, 
                                object htmlAttributes)

您正在做的是将values和htmlAttributes混合在一起。 values用于网址路由。

您可能想要这样做。

@Html.ActionLink(Context.User.Identity.Name, "Index", "Account", null, 
     new { @style="text-transform:capitalize;" });

Answer 2

VB示例：

 @Html.ActionLink("Home", "Index", Nothing, New With {.style = "font-weight:bold;", .class = "someClass"})

示例Css：

.someClass
{
    color: Green !important;
}

在我的情况下，我发现我需要！important属性来覆盖site.css a：link css class

Answer 3

恢复旧问题，因为它似乎出现在搜索结果的顶部。

我想保留过渡效果，同时仍然可以设置动作链接的样式，所以我提出了这个解决方案。

我用一个包含父样式的div包装了动作链接：

<div class="parent-style-one">
      @Html.ActionLink("Homepage", "Home", "Home")
</div>

接下来，我为div创建CSS，这将是父css，并将由子元素（如动作链接）继承。

  .parent-style-one {
     /* your styles here */
  }

因为所有动作链接都是，当被分解为html时是一个元素所以你只需要在你的css选择中定位该元素：

  .parent-style-one a {
     text-decoration: none;
  }

对于过渡效果，我这样做了：

  .parent-style-one a:hover {
        text-decoration: underline;
        -webkit-transition-duration: 1.1s; /* Safari */
        transition-duration: 1.1s;         
  }

这样我只针对div的子元素，在这种情况下是动作链接，并且仍然能够应用过渡效果。

ASP.NET MVC3 Razor - Html.ActionLink样式

3 个答案: