3

I'm trying to change the color of the output of a @Html.DisplayFor call. It's simple text. I've created css classes and tried to style it directly in the Razor view, but nothing is working. There is no issue with the model (it renders the correct text). There are many similar questions (one, two, three), but none of those solutions have worked for me. The initial attempt was within an <h3> tag, but I've tried outside it as well. Here's my attempts in the view (I've tried a few things...):

<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;" })

Relevant part of site.css here:

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

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

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

The css works for other aspects of the view. In the Views/Shared/_Layout.cshtml file, there is <link rel="stylesheet" href="~/css/site.css" />. I've been able to apply the technique of new { @class = "link-colour" } within a call to @Html.ActionLink in another view in this project, so I'm not sure what's going on. I've cleared the browser cache, too. Thanks for any ideas.

heds1
  • 3,203
  • 2
  • 17
  • 32

6 Answers6

2

we can use the div around it and add class for div,

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

and write styles for .style class, i don't know whether it's correct approach or not but it's working for me.

harsha reddy
  • 72
  • 1
  • 13
1

@Html.DisplayFor will not work because it does not render any html tag, instead it renders plain text. You can press F12 in the browser and check and you will notice there is no tag but just raw content.

Use

@Html.LabelFor(model => model.Whatever, htmlAttributes: new { @class = "your css" })
CodingYoshi
  • 25,467
  • 4
  • 62
  • 64
  • 1
    Thanks, but that just renders the label for the model attribute (in this case, "Title"), rather than the actual `Title` property of the model that's displayed. – heds1 Aug 09 '19 at 10:58
1

This is an old thread, but this worked for me. Hope this helps someone searching now: @Html.LabelForModel(model.Whatever, new { @style = "color: red" })

ApurvaB
  • 19
  • 1
0

I have two ways of doing this:

1: Give the <label></label> a class and style that: 

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

2: Use the code that you have to render you content, but wrap it in a div and target its content:

<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;
}
Sondre
  • 105
  • 2
  • 11
0

For some reason <div> tag just screw up my page format , then I try insert <span> on cshtml page and it work.

Sample code : "Total Hits" will display in Black , and whatever value in between <span> tag will be Red

<h2>Total Hits : <span style="color:Maroon;"> @Html.DisplayFor(m => m.UserAccessCount)</span> </h2>
HO LI Pin
  • 1,441
  • 13
  • 13
0

Try This

@Html.Label("GP", item.GP, new {  @style = "color:Red;" })
Lahiru
  • 141
  • 1
  • 4