Applying css class using Html.DisplayFor inside razor view

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>

.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>

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>