Using css class using Html.DisplayFor to view razor

Question

Inside the razor, I used a model for rendering, for example,

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

and now I want to use it instead of attr data annotation. so I tried with DisplayFor how

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

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

Answer 1

DisplayFor does not work like other *For helpers. Like EditorFor , this is what is called the "template helper." In other words, what it displays is controlled by a template that can be changed. It is important to note that for both of these methods, if you look at their documentation on MSDN, you will see that the parameter that will correspond normally to htmlAttributes with other helpers, and does not apply to additionalViewData with these two. This is because, again, their output is controlled essentially by the views that accept ViewData .

Also, with DisplayFor in particular, the default templates pretty much simply display the value without HTML. For example, if you pass a string property, the output will be the value of that string and nothing else. Therefore, there is nothing to associate HTML attributes with, even if you can pass them.

If you want to do what you are trying to do, you will have to create your own display templates. This can be done by adding views with names by type (for example, String , Boolean , Byte , etc.) or members of the DataType enumeration ( CreditCard , EmailAddress , etc.) in Views\Shared\DisplayTemplates . For example, if you created a view in Views\Shared\DisplayTemplates\String.cshtml , then when you call DisplayFor with a property of type string this view will be used to render it. You can then wrap the value, which otherwise would simply be output directly to some HTML of your choice, and use ViewData to apply the appropriate HTML attributes. For instance:

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

Answer 2

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

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

returns raw text:

 Martin 

given that MyName has 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 the following (if you want to use @ Html.DisplayFor):

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

Answer 3

.NET Core 2.2 Page Resize Flags

Later for the game, but it was necessary to make the flags huge compared to the way the Razor template displays them. Because I wanted the user to see if this was checked or not.

I tried above, did not work. So I used the Chrome Developer Tool to see the page render, and it showed this for the checkbox:

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

And I was going to find it in the CSS file because I could use all the checkboxes to be bigger. However, he said that he is here:

reboot.scss: 373

Now, I swear it was referencing another scss file when I first opened it in the developer. But since it looked like a Greek, code snippet to me, I just decided to put it (after trying it in the style above) at the top of my Razor Page. Note that I just cloned the hidden style above and 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 that I displayed. At the end, it ends as a flag in html, but I believe that the Razor Page is smart enough to know that this is a True / False field and display it as a text field. But. ., not before he applied the dimensions that I added !! Hope this helps someone.

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