在razor视图中使用Html.DisplayFor应用CSS类

Question

在剃刀内部，我使用模型来渲染标签，例如

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

现在我想使用它的值而不是数据注释属性。 值，所以我尝试用DisplayFor喜欢

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

此CSS类control-label col-md-6不适用。 为什么？

Answer 1

区别在于@Html.LabelFor helper函数呈现<label></label>标签，而@Html.DisplayFor helper函数不呈现任何html标签，而是呈现纯文本。 例如下面的代码：

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

返回原始文本：

Martin

考虑到MyName的值为“ Martin”。 和代码：

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

将返回：

<label class="control-label col-md-6">Martin</label>

考虑差异。

使用以下命令（如果要使用@ Html.DisplayFor）：

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

Answer 2

DisplayFor与其他*For助手不同。 像EditorFor一样，这就是所谓的“模板帮助器”。 换句话说，它呈现的内容由可以修改的模板控制。 重要的是，对于这两种方法，如果你在MSDN中查找他们的文档，你会看到，这将正常的对应参数htmlAttributes与其他帮手，而不是指additionalViewData这两个。 再次是因为这是因为它们的输出基本上由采用ViewData视图控制。

此外，特别是对于DisplayFor ，默认模板几乎只输出该值，而没有HTML。 例如，如果传递字符串属性，则输出将是该字符串的值，而没有其他值。 因此，没有什么可绑定HTML属性的，即使您可以传入它们也是如此。

如果您想做自己想做的事情，则必须创建自定义显示模板。 这可以通过将以类型 （例如String ， Boolean ， Byte等）或数据DataType枚举成员（ CreditCard ， EmailAddress等）命名的视图添加到Views\\Shared\\DisplayTemplates 。 例如，如果您在Views\\Shared\\DisplayTemplates\\String.cshtml创建了一个视图，那么当您使用类型为string的属性调用DisplayFor时，该视图将被用于呈现它。 然后，您可以包装将直接在您选择的某些HTML中直接输出的值，并利用ViewData来应用适当的HTML属性。 例如：

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

Answer 3

.NET Core 2.2 Razor页面调整大小复选框

这里的游戏比较晚，但是与Razor Template显示它们相比，需要使复选框很大。 因为我希望用户查看是否已检查它。

我尝试了上面的东西，没有用。 因此，我使用了Chrome Developer Tool来查看页面正在呈现的内容，并为复选框显示了该内容：

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

而且我打算在CSS文件中找到它，因为我可以使用所有复选框将其放大。 但是，它说它位于这里：

reboot.scss：373

现在，我发誓当我第一次在开发人员中打开它时，它引用了一个不同的scss文件。 但是由于它对我来说像希腊语，是一个代码错误，因此我决定将其（在上面的样式中尝试过之后）放在我的Razor页面的顶部。 注意，我只是克隆了上面的隐藏样式，并添加了宽度和高度：

<style>
    input[type="radio"],
    input[type="checkbox"] {
        box-sizing: border-box;
        width: 40px;
        height:40px;
    }
</style>

现在，这是我正在显示的Razor控件。 它最终以html中的复选框结尾，但是我相信Razor Page足够聪明，可以知道它是True / False字段并将其显示为文本框。 但。 。 。 不是在应用我添加的尺寸之前！ 希望这对某人有帮助。

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

</td>