Applying css class using Html.DisplayFor inside razor view

Question

Inside razor view I used model for rendering label like

 @Html.LabelFor(model => model.MyName, htmlAttributes: new { @class = "control-label col-md-6" })

and now I want to use it's value instead of data annotation attr. value so I tried with DisplayFor like

@Html.DisplayFor(model => model.MyName, new { @class = "control-label col-md-6" })

this css class control-label col-md-6 is not apply. Why?

http://stackoverflow.com/questions/11655810/how-do-i-edit-the-css-of-the-html-displayfor-method-in-mvc-3 — AAlferez, Nov 05 '15 at 14:27

score 43 · Answer 1 · answered Nov 05 '15 at 14:39

43

The difference is that @Html.LabelFor helper function renders a <label></label> tag, and the @Html.DisplayFor helper function does not render any html tag, instead it renders plain text. For example the following code:

@Html.DisplayFor(model => model.MyName, new { @class = "control-label col-md-6" })

returns raw text:

Martin

considering that MyName had the value "Martin". And the code:

@Html.LabelFor(model => model.MyName, htmlAttributes: new { @class = "control-label col-md-6" })

will return:

<label class="control-label col-md-6">Martin</label>

Consider the difference.

Use following (if you want to use @Html.DisplayFor):

<span class"control-label col-md-6">@Html.DisplayFor(model => model.MyName)</span>

answered Nov 05 '15 at 14:39

Numan Ijaz

878
1
8
18

3

needs = there. @Html.DisplayFor(model => model.MyName) – coder771 Apr 03 '17 at 09:39
9

I don't think this is correct - won't LabelFor return the *name* of the property, and not the value "Martin"? – msulis Sep 28 '17 at 04:39
3

Agreed with @msulis . LabelFor will not return any Field Value it will return Property Name. – Sam Jun 08 '18 at 10:07
Let's say your class has a property called FirstName. LabelFor(model => model.FirstName) will return "FirstName". If you add the Display(Name = "First Name") attribute to that class, LabelFor will return "First Name" (or whatever you put in your Display attribute). – Bil Simser Sep 13 '18 at 13:05

score 15 · Accepted Answer · edited Oct 13 '17 at 12:51

DisplayFor doesn't work like the other *For helpers. Like EditorFor, it's what's referred to as a "templated helper". In other words, what it renders is controlled by a template that can be modified. Importantly, for both of these methods, if you look up their documentation in MSDN, you'll see that the parameter that would normal correspond to htmlAttributes with the other helpers, instead refers to additionalViewData with these two. This is because, again, their output is controlled by essentially views, which take ViewData.

Additionally, with DisplayFor in particular, the default templates pretty much just output the value, with no HTML. If you pass a string property, for example, the output will be the value of that string and nothing else. Therefore, there's nothing to tie the HTML attributes to, even if you could pass them in.

If you want to do what you're trying to do, you'd have to create custom display templates. This can be done by adding views named after types (e.g. String, Boolean, Byte etc.) or members of the DataType enum (CreditCard, EmailAddress etc.), to Views\Shared\DisplayTemplates. For example, if you created a view at Views\Shared\DisplayTemplates\String.cshtml, then when you called DisplayFor with a property of type string, that view would be utilized to render it. You could then wrap the value that would otherwise be just output directly in some HTML of your choice and utilize ViewData to apply the appropriate HTML attributes. For example:

<span class="@ViewData["class"]">@ViewData.TemplateInfo.FormattedModelValue</span>

score 1 · Answer 3 · answered Jul 06 '19 at 21:07

.NET Core 2.2 Razor Pages Resize Checkboxes

Late to the game here but needed to make check-boxes huge compared to how Razor Template displays them. Because I wanted user to see if it was checked or not.

I tried above stuff, didn't work. So I used Chrome Developer Tool to look at what the page was rendering and it showed this for the checkbox:

input[type="radio"], input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0;
}

And I was going to go find it in the CSS file because I could use all check-boxes to be bigger. However, it said it was located here:

reboot.scss:373

Now, I swear it referenced a different scss file when I first opened in developer. But since it looked like Greek to me, a code slob, I just decided to put this (after trying it in style above) at the top of my Razor Page. Notice I just cloned the hidden style above and just added width and height:

<style>
    input[type="radio"],
    input[type="checkbox"] {
        box-sizing: border-box;
        width: 40px;
        height:40px;
    }
</style>

Now, Here is the Razor control I was displaying. It ends up as a checkbox in html at end, but I believe Razor Page is smart enough to know it was a True/False field and showed it as a text box. But. . . not before it applied the sizing I added!! Hope this helps someone.

<td>
    @Html.DisplayFor(modelItem => item.Moderated)

</td>

Applying css class using Html.DisplayFor inside razor view

3 Answers3

.NET Core 2.2 Razor Pages Resize Checkboxes

Linked