How do I edit the CSS of the Html.DisplayFor method in MVC 3?

Question

I am using the following code to display text from my view model in my view:

@Html.DisplayFor(m => m.Name)

When I look at the HTML details in IE9 (which I have to use at work) there is no class associated with the name, it just uses the Body CSS styling instead of the display-field class styling. Does anyone know what might be causing this issue or how I might edit the CSS for the text created?

Possible duplicate: http://stackoverflow.com/questions/4576209/asp-net-mvc-3-razor-adding-class-to-editorfor — Allov, Jul 25 '12 at 18:27

Dmitry Efimenko · Answer 1 · 2012-07-25T20:23:18.990

17

if it is a label, use proper helper for it as Nataka526 suggests

otherwise put it in a span with a class and update css for that class:

your html:

<span class="name">
    @Html.DisplayFor(m => m.Name)
</span>

your css:

.name {
    //custom css
}

UPDATE

Another option: Update your Display Templates to handle a specific ViewData key:

in Views > Shared > DisplayTemplate (create this folder if you don't have it already):

add file String.cshtml:

@model string

@{
    string myClass = ViewData["class"]
}

@if(string.IsNullOrEmpty(myClass))
{
    @:@Model
}
else
{
    <span class="@myClass">@Model</span>
}

you may need to add DisplayTemplates for other tipes as well besides string.

In the view you will write something like this:

@Html.DisplayFor(m => m.Name, new { @class= "name" })

This will add spans around it automatically.

UPDATE

Explanation:

There is an overload on Html.DisplayFor which accepts two parameters: expression and object additionalViewData. So the second parameter that I pass is that anonymous object additionalViewData. I create this object with property called class

Inside of the html helper I then check if there is a ViewData with a key class and if there is, I put output inside a span with that class value.

** updated variable name from class to myClass since "class" is not appropriate variable name.

edited Jul 25 '12 at 20:23

answered Jul 25 '12 at 18:09

Dmitry Efimenko

10,973
7
62
79

I have a lot of DisplayFors I would need to encapsulate with spans, but I will try this method if no one else suggests another method. – Jake Stout Jul 25 '12 at 18:13
what is the reason you are using DisplayFor? Please confirm it is not a label for an input. If it is, it would be a simple fix. – Dmitry Efimenko Jul 25 '12 at 18:16
Sorry guys my answer was wrong... So i voted to delete it as it will mislead someone.. – Nalaka526 Jul 25 '12 at 18:25
DisplayFor because I just want to display the value in the model.name property as text. This is for a confirmation screen to display changes made. – Jake Stout Jul 25 '12 at 18:26
Updated my answer with an alternative solution – Dmitry Efimenko Jul 25 '12 at 18:29
I don't quite understand your use of the class keyword in the example, but this looks interesting. – Jake Stout Jul 25 '12 at 19:09
Updated answer with explanation. Let me know if there is something else I can help you with. – Dmitry Efimenko Jul 25 '12 at 20:16
also fixed some minor bugs and typos – Dmitry Efimenko Jul 25 '12 at 20:25
sorry, I should have provided a link to some basic info about templates in mvc. Basically in my solution I am customizing one of these templates. – Dmitry Efimenko Jul 25 '12 at 20:26

score 12 · Accepted Answer · answered Jul 25 '12 at 18:58

12

DisplayFor is used for templating reasons. If you aren't using a template, then you should just use the item like so: @Model.Name If you want to give it a class or id, then you need to wrap it in a span or div.

Your problem is that you're using the wrong method to output data, and expecting it to do something else. There is no built-in way to output raw data with class names.

So your choices are, wrap the raw item in a container that you can apply the css to, or create a template to use for these, then specify the template name in the DisplayFor like so:

 @Html.DisplayFor(m => m.Name, "NameTemplate")

answered Jul 25 '12 at 18:58

Erik Funkenbusch

92,674
28
195
291

Thanks! I am new to MVC 3 / web development and am not aware of what templating means exactly. – Jake Stout Jul 25 '12 at 19:10
@barnone - you'll want to read this http://bradwilson.typepad.com/blog/2009/10/aspnet-mvc-2-templates-part-1-introduction.html/ – Erik Funkenbusch Jul 25 '12 at 19:14
So this rules out using LabelFor unless it's an editor, because LabelFor will generate a 'for=' attribute pointing to an ID that doesn't exist, since DisplayFor doesn't generate an ID for the model property it's displaying. Great. Awesome, intuitive design :/ – Triynko Sep 14 '15 at 21:35
@Triynko - You seem to have gone off into left field based on a bizarre assumption which isn't true. – Erik Funkenbusch Sep 15 '15 at 01:38

How do I edit the CSS of the Html.DisplayFor method in MVC 3?

2 Answers2

Linked