ASP.NET MVC3 Razor - Html.ActionLink 样式答案

【问题标题】：ASP.NET MVC3 Razor - Html.ActionLink styleASP.NET MVC3 Razor - Html.ActionLink 样式
【发布时间】：2011-06-03 01:11:49
【问题描述】：

我正在尝试像这样设置操作链接的样式：

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

改为将样式附加到 url。我做错了什么？

【问题讨论】：

标签： css asp.net-mvc-3 razor

【解决方案1】：

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

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

我用包含父样式的 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 的子元素，在这种情况下是动作链接，并且仍然能够应用过渡效果。

【讨论】：

第 3 步：“因为所有操作链接都是，当分解为 html 时是一个元素，所以你只需要在你的 css 选择中定位那个元素”宾果......这就是我需要的阅读让我的生活无限美好。谢谢。

【解决方案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 类

【讨论】：

如果您只是将 .someClass 行移到站点中的 a:link 行下方，您可能不需要 !important 属性。 css。您还可以将其添加到您的样式属性以覆盖它。通常，浏览器应用 CSS 文件中的最低项，然后应用样式属性。 CSS 文件中最不重要的东西应该在顶部，最重要的应该在底部。
在这种情况下，不正确。有一个默认的 css 文件，然后是一个特定于站点的 css 文件（不是我的架构）。在这种特定情况下，!important 属性是必需的。不过我同意你的评价。

【解决方案3】：

这是签名。

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

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

你可能想这样做。

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

【讨论】：

我很高兴你没有......我发现这个答案很有用。
我必须注意，即使我省略了 Context.User.Identity.Name，此解决方案也有效，您如何向具有 Java 背景的人解释此解决方案的原因?
@Lauri 它只是一个函数调用，但有一个称为扩展方法的 C# 概念。
注意 - 样式不需要 @ - 只是转义保留字，如 C# 中的 class