CSS ASP.NET MVC3 Razor - Html.ActionLink 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4588059/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ASP.NET MVC3 Razor - Html.ActionLink style
提问by 3Dave
I'm trying to set the style of an action link like so:
我正在尝试设置操作链接的样式，如下所示：
<text><p>Signed in as @Html.ActionLink(Context.User.Identity.Name,"Index",new { Controller="Account", @style="text-transform:capitalize;" })</p>
I'd expect this to be rendered as
我希望这被渲染为
<p>Signed in as <a href="Index" style="text-transform:capitalize;">MyName</a></p>
However, what's generated is
然而，产生的是
<p>Signed in as <a href="/Account?style=text-transform%3Acapitalize%3B">MyName</a></p>
with the style appended to the url instead. What am I doing wrong?
将样式附加到 url 中。我究竟做错了什么？
回答by Daniel A. White
Here's the signature.
这是签名。
public static string ActionLink(this HtmlHelper htmlHelper,
string linkText,
string actionName,
string controllerName,
object values,
object htmlAttributes)
What you are doing is mixing the valuesand the htmlAttributestogether. valuesare for URL routing.
您正在做的是将values和混合htmlAttributes在一起。values用于 URL 路由。
You might want to do this.
您可能想要这样做。
@Html.ActionLink(Context.User.Identity.Name, "Index", "Account", null,
new { @style="text-transform:capitalize;" });
回答by Ed DeGagne
VB sample:
VB示例：
@Html.ActionLink("Home", "Index", Nothing, New With {.style = "font-weight:bold;", .class = "someClass"})
Sample Css:
示例 CSS：
.someClass
{
color: Green !important;
}
In my case, I found that I need the !important attribute to over ride the site.css a:linkcss class
就我而言，我发现我需要 !important 属性来覆盖 site.css a:linkcss 类
回答by Tahir Khalid
Reviving an old question because it seems to appear at the top of search results.
恢复一个旧问题，因为它似乎出现在搜索结果的顶部。
I wanted to retain transition effects while still being able to style the actionlink so I came up with this solution.
我想保留过渡效果，同时仍然能够设置 actionlink 的样式，所以我想出了这个解决方案。
- I wrapped the action link with a div that would contain the parent style:
- 我用包含父样式的 div 包裹了动作链接：
<div class="parent-style-one"> @Html.ActionLink("Homepage", "Home", "Home") </div>
<div class="parent-style-one"> @Html.ActionLink("Homepage", "Home", "Home") </div>
- Next I create the CSS for the div, this will be the parent css and will be inherited by the child elements such as the action link.
- 接下来我为 div 创建 CSS，这将是父 css，并将由子元素（例如操作链接）继承。
.parent-style-one { /* your styles here */ }
.parent-style-one { /* your styles here */ }
- Because all an action link is, is an element when broken down as html so you just need to target that element in your css selection:
- 因为所有的操作链接在分解为 html 时都是一个元素，所以你只需要在你的 css 选择中定位该元素：
.parent-style-one a { text-decoration: none; }
.parent-style-one a { text-decoration: none; }
- For transition effects I did this:
- 对于过渡效果，我这样做了：
.parent-style-one a:hover { text-decoration: underline; -webkit-transition-duration: 1.1s; /* Safari */ transition-duration: 1.1s; }
.parent-style-one a:hover { text-decoration: underline; -webkit-transition-duration: 1.1s; /* Safari */ transition-duration: 1.1s; }
This way I only target the child elements of the div in this case the action link and still be able to apply transition effects.
这样我只针对 div 的子元素，在这种情况下是动作链接，并且仍然能够应用过渡效果。
