Unable to apply a css class to my @Html.DisplayFor inside a WebGrid, inside my asp.net MVC 5 web application

Question

I have the following code inside my asp.net MVC Razor view:-

 @{
    List<Marketing.Models.SalesData> allLevels = ViewBag.AllLevels;
    var gridcolumns = new List<WebGridColumn>();
    gridcolumns.Add(new WebGridColumn()
                {
                    ColumnName = "Status",
                    Header = Html.DisplayNameFor(model => model.Content.FirstOrDefault().Status).ToString(),
                    CanSort = true,
                    Format =

                        (item) =>
                        {
                            var banner = item.Value as Marketing.Models.SalesData;
                            return Html.DisplayFor(modelItem => banner.Status, new { @class = banner.Status });
                        }
                });

now what i am trying to do is to define a css class inside my Html.DisplayFor(modelItem => banner.Status, new { @class = banner.Status }); but this will render the without any css class, as follow:-

<td>succeed</td>

now i though the problem with the way i am defining the class, so i tried this test, to hard code the class name Html.DisplayFor(modelItem => banner.Status, new { @class = "testclass"}); but this did not render the css class.. so can anyone adivce on this please? now i am using asp.net mvc version 5.2.3.0 which should support defining css classes inside my HTML helpers.

`DisplayFor()` just generates text, not a html element. Wrap it in a `` or other element and ad the class name to that element — , Oct 17 '17 at 11:59
@StephenMuecke i did not get your point? now i should be able to apply a css class to the DisplayFor. in my case i want to color code the Status values based on the text. succed to be colored as green, failed colored as red.. i use to do these without any problem inside razor views if i am rendering the `Html.Displayfor` inside a normal html table,, but seems inside the webgrid this is not working .. — John John, Oct 17 '17 at 12:06
No you cannot. Look at the [documented overloads](https://msdn.microsoft.com/en-us/library/system.web.mvc.html.displayextensions.displayfor(v=vs.118).aspx) for `DisplayFor()` - there is no overload that adds `htmlAttributes` because there is no point - it does not generate a html element (unless you have a `DisplayTemplate`) — , Oct 17 '17 at 12:11
@StephenMuecke i remmeber in the past projects i use to apply a css classes to EditorFor & DisplaFor and those were only supported in mvc version 5 or above — John John, Oct 17 '17 at 12:15
You can in `EditorFor()` (using MVC-5.1 or higher) because `EditorFor()` generates a html element (an ``) but you have never been able to do it using `DisplayFor()` (unless you create a `DisplayTemplate` and pass the class name as `additionalViewData` using [this overload](https://msdn.microsoft.com/en-us/library/system.web.mvc.html.displayextensions.displayfor(v=vs.118).aspx#M:System.Web.Mvc.Html.DisplayExtensions.DisplayFor``2%28System.Web.Mvc.HtmlHelper{``0},System.Linq.Expressions.Expression{System.Func{``0,``1}},System.String,System.Object%29) — , Oct 17 '17 at 12:18
@StephenMuecke now am not sure if i can wrap the following with a span to apply a color for it `return Html.DisplayFor(modelItem => banner.Status);`?? — John John, Oct 17 '17 at 12:20
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/156916/discussion-between-stephen-muecke-and-john-g). — , Oct 17 '17 at 12:21

score 1 · Answer 1 · answered Oct 17 '17 at 12:33

At first take a look to this example. @Html.LabelFor() Helper function renders a <label></label> tag. Suppose if you write @Html.LabelFor(m=>m.Name, new {@class = "form-control"}) it returns <label class = "form-control">David</label>.So we can apply class to label for helper function. But @Html.DisplayFor() do not render any html tag. If you write @Html.DisplayFor(m=>m.Name) it returns your name only, like: David. So you have to wrap @Html.DisplayFor() Helper inside a span and apply class to it. Like: <span class = "form-control">@Html.DisplayFor(m=>m.Name)</span>. Then output will be <span class="form-control">David</span> . That means class applied on name property. Hope this helps..

but how i can return my displayfor inside a span , as when i tried this code `return ""+Html.DisplayFor(modelItem => banner.Status)+"";` i got this text rendered inside my web grid cells `succeed` — John John, Oct 17 '17 at 13:03

Unable to apply a css class to my @Html.DisplayFor inside a WebGrid, inside my asp.net MVC 5 web application

1 Answers1