web-dev-qa-db-ja.com

ASP.NET MVC3 Razor-Html.ActionLinkスタイル

私はアクションリンクのスタイルを次のように設定しようとしています：

  <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にスタイルが追加されます。私は何を間違えていますか？

cssasp.net-mvc-3razor
33
3Dave

これが署名です。

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;" });
92
Daniel A. White

VBサンプル：

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

サンプルCss：

.someClass
{
    color: Green !important;
}

私の場合、site.cssをオーバーライドするには！important属性が必要であることがわかりましたa：link css class

8
Ed DeGagne

検索結果の上部に表示されるように見えるため、古い質問を復活させる。

アクションリンクのスタイルを設定しながらトランジション効果を保持したかったので、このソリューションを思いつきました。

  1. 親スタイルを含むdivでアクションリンクをラップしました。
<div class="parent-style-one">
      @Html.ActionLink("Homepage", "Home", "Home")
</div>
  1. 次に、divのCSSを作成します。これは親CSSであり、アクションリンクなどの子要素に継承されます。
  .parent-style-one {
     /* your styles here */
  }
  1. すべてのアクションリンクはHTMLとして分解されると要素であるため、css選択でその要素をターゲットにするだけです。
  .parent-style-one a {
     text-decoration: none;
  }
  1. トランジション効果のために私はこれをしました：
  .parent-style-one a:hover {
        text-decoration: underline;
        -webkit-transition-duration: 1.1s; /* Safari */
        transition-duration: 1.1s;         
  }

この方法では、この場合はアクションリンクのdivの子要素のみをターゲットにし、トランジション効果を適用できます。

3
Tahir Khalid