在 Razor 视图中为 @Html.DisplayFor 文本设置颜色样式答案

【问题标题】：Style @Html.DisplayFor text with color in Razor view在 Razor 视图中为 @Html.DisplayFor 文本设置颜色样式
【发布时间】：2019-12-17 02:15:47
【问题描述】：

我正在尝试更改@Html.DisplayFor 调用的输出颜色。是简单的文字。我创建了 css 类并尝试直接在 Razor 视图中对其进行样式设置，但没有任何效果。模型没有问题（它呈现正确的文本）。有很多类似的问题（one、two、three），但这些解决方案都没有对我有用。最初的尝试是在<h3> 标记内，但我也在它之外尝试过。这是我在视图中的尝试（我已经尝试了一些事情......）：

<h3>@Html.DisplayFor(model => model.Title, new { @class = "h3.link-colour;" })</h3>
@Html.DisplayFor(model => model.Title, new { @class = "h3.link-colour" })
@Html.DisplayFor(model => model.Title, new { @class = "link-colour"})
@Html.DisplayFor(model => model.Title, new { @class = "link-colour" })
@Html.DisplayFor(model => model.Title, new { @style = "color:#00BFFF" })
@Html.DisplayFor(model => model.Title, new { @style = "color:#00BFFF !important;" })

site.css 的相关部分在这里：

/* colour links */
a.link-colour {
    color: #00BFFF !important;
}

h3.link-colour {
    color: #00BFFF !important;
}

.link-colour {
    color: #00BFFF !important;
}

CSS 适用于视图的其他方面。在 Views/Shared/_Layout.cshtml 文件中，有<link rel="stylesheet" href="~/css/site.css" />。我已经能够在这个项目的另一个视图中调用@Html.ActionLink 中应用new { @class = "link-colour" } 的技术，所以我不确定发生了什么。我也清除了浏览器缓存。感谢您的任何想法。

【问题讨论】：

你试过了吗stackoverflow.com/a/33547367/10585321
谢谢你——用<span class="link-colour"> 把对@Html.DisplayFor() 的调用打包成功了！不知道我是怎么错过那个 Q/A 的 :)

标签： c# html css asp.net-mvc razor

【解决方案1】：

试试这个

@Html.Label("GP", item.GP, new {  @style = "color:Red;" })

【讨论】：

【解决方案2】：

由于某种原因 <div> 标签搞砸了我的页面格式，然后我尝试在 cshtml 页面上插入 <span> 并且它工作。

示例代码： “Total Hits”将显示为 Black ，<span> 标签之间的任何值都将为 Red

<h2>Total Hits : <span style="color:Maroon;"> @Html.DisplayFor(m => m.UserAccessCount)</span> </h2>

【讨论】：

【解决方案3】：

这是一个旧线程，但这对我有用。希望这有助于现在搜索的人： @Html.LabelForModel(model.Whatever, new { @style = "color: red" })

【讨论】：

【解决方案4】：

我有两种方法：

1：给<label></label> 一个类和样式：

@Html.LabelFor(model => model.Title, new { @class = "myCssClass" })

2：使用必须呈现内容的代码，但将其包装在 div 中并定位其内容：

<div class="myClass">
    <h3>@Html.DisplayFor(model => model.Title)</h3>
    @Html.DisplayFor(model => model.Title)
    @Html.DisplayFor(model => model.Title)
    @Html.DisplayFor(model => model.Title)
    @Html.DisplayFor(model => model.Title)
    @Html.DisplayFor(model => model.Title)
</div>

CSS：

div.myClass {
    color: #00BFFF;
}
div.myClass h3{
    color: Gold;
}

【讨论】：

【解决方案5】：

我们可以使用它周围的 div 并为 div 添加类，

<div class="style">
@Html.DisplayNameFor(model => model.title)
</div>

并为 .style 类编写样式，我不知道这是否正确，但它对我有用。

【讨论】：

【解决方案6】：

@Html.DisplayFor 将不起作用，因为它不呈现任何 html 标签，而是呈现纯文本。您可以在浏览器中按 F12 并检查，您会发现没有标签，只有原始内容。

使用

@Html.LabelFor(model => model.Whatever, htmlAttributes: new { @class = "your css" })

【讨论】：

谢谢，但这只是呈现模型属性的标签（在本例中为“标题”），而不是显示的模型的实际 Title 属性。