样式 @Html.DisplayFor Razor 视图中带有颜色的文本

Question

我正在尝试更改呼叫输出的颜色@Html.DisplayFor。这是简单的文字。我创建了 css 类并尝试直接在 Razor 视图中对其进行样式设置，但没有任何效果。模型没有问题（它呈现正确的文本）。有很多类似的问题（一、二、三），但这些解决方案都不适合我。最初的尝试是在<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" />. 我已经能够在这个项目的另一个视图中应用new { @class = "link-colour" }调用内的技术@Html.ActionLink，所以我不确定发生了什么。我也清除了浏览器缓存。感谢您的任何想法。

Answer 1

我们可以使用它周围的 div 并为 div 添加类，<div class="style">@Html.DisplayNameFor(model => model.title)</div>并为 .style 类编写样式，我不知道这是否是正确的方法，但它对我有用。

Answer 2

@Html.DisplayFor不会工作，因为它不渲染任何 html 标签，而是渲染纯文本。您可以在浏览器中按 F12 并检查，您会发现没有标签，只有原始内容。使用@Html.LabelFor(model&nbsp;=>&nbsp;model.Whatever,&nbsp;htmlAttributes:&nbsp;new&nbsp;{&nbsp;@class&nbsp;=&nbsp;"your&nbsp;css"&nbsp;})

Answer 3

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

Answer 4

尝试这个@Html.Label("GP",&nbsp;item.GP,&nbsp;new&nbsp;{&nbsp;&nbsp;@style&nbsp;=&nbsp;"color:Red;"&nbsp;})

Answer 5

我有两种方法可以做到这一点：1：给<label></label>类和风格：@Html.LabelFor(model => model.Title, new { @class = "myCssClass" })2：使用您必须渲染内容的代码，但将其包装在 div 中并定位其内容：<div class="myClass">&nbsp; &nbsp; <h3>@Html.DisplayFor(model => model.Title)</h3>&nbsp; &nbsp; @Html.DisplayFor(model => model.Title)&nbsp; &nbsp; @Html.DisplayFor(model => model.Title)&nbsp; &nbsp; @Html.DisplayFor(model => model.Title)&nbsp; &nbsp; @Html.DisplayFor(model => model.Title)&nbsp; &nbsp; @Html.DisplayFor(model => model.Title)</div>CSS：div.myClass {&nbsp; &nbsp; color: #00BFFF;}div.myClass h3{&nbsp; &nbsp; color: Gold;}