Am new to MVC, am am trying to apply CSS styles to Html.DisplayFor helper inside my template file: Shared>>EditorTemplate>>Contacts.cshtml. Below is my code:
@model People.Contacts
<div>
@Html.DisplayNameFor(m => m.Name) <span class="myclass">@Html.DisplayFor(m => m.FirstName) @Html.DisplayFor(m => m.LastName)</span></div>
and my css class outside this template looks like this:
.myclass{font:italic bold;}
Html.DisplayFor does not support passing HTML attributes, including class/style. At it's most basic it merely renders the value, without any HTML, and with editor/display templates, it just renders whatever's in the template.
First, if you have EditorTemplates\Contacts.cshtml, that will actually never be used by DisplayFor. For DisplayFor you need a separate template in Views\Shared\DisplayTemplates. As its name implies EditorTemplates is used by EditorFor.
Either DisplayFor or EditorFor are basically the same as calling Html.Partial. There's just some additional logic to deal with a specific model property and look by default in DisplayTemplates/EditorTemplates for the view. That said, you can pass additional data to them the same as you would with a partial, via ViewData.
For example, if you were to call @Html.DisplayFor(m => m.FirstName, new { @class = "myclass" }), then nothing would happen by default, but you would have a value of "myclass" in ViewData["class"]. You could then use that to modify a part of your template. For example:
Views\Shared\DisplayTemplates\Contacts.cshtml
<span @(ViewData["class"] != null ? "class='" + ViewData["class"] + "'" : string.Empty)>
@ViewData.TemplateInfo.FormattedModelValue
</span>
That checks to see if ViewData["class"] has a value, and if so, adds a class attribute with that value to the span.
Html.DisplayFor is currently not well designed (as well as Html.EditorFor). We do need sometimes apply the same attributes, css classes to all top levels elements rendered inside the display & editor template. Also almost the cases we have just 1 top level element rendered for each display & editor template. You can do that task in each specific display & editor template but sometimes we need to abstract the code, we do one thing in one place instead of repeating it on all templates.As a different solutions you can use Html.DisplayFor in <Label> tag
<label class="control-label"> @Html.DisplayNameFor(p => p.HeadLine)</label>
