【问题标题】:Applying css class using Html.DisplayFor inside razor view在剃须刀视图中使用 Html.DisplayFor 应用 css 类
【发布时间】:2016-02-06 10:18:39
【问题描述】:

在剃刀视图中,我使用模型来渲染标签,例如

 @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 不适用。 为什么?

【问题讨论】:

标签: c# .net asp.net-mvc razor


【解决方案1】:

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

这里的游戏晚了,但与 Razor 模板显示它们的方式相比,需要使复选框很大。因为我想让用户看看它是否被选中。

我试过上面的东西,没用。所以我使用 Chrome 开发者工具来查看页面正在呈现的内容,并在复选框中显示了这一点:

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>

【讨论】:

    【解决方案2】:

    DisplayFor 不像其他 *For 助手那样工作。就像EditorFor,它就是所谓的“模板化助手”。换句话说,它呈现的内容由可以修改的模板控制。重要的是,对于这两种方法,如果您在 MSDN 中查找它们的文档,您会看到通常对应于其他帮助程序的 htmlAttributes 的参数,而不是使用这两个方法引用 additionalViewData。这是因为,它们的输出本质上是由视图控制的,它们采用ViewData

    此外,特别是 DisplayFor,默认模板几乎只是输出值,没有 HTML。例如,如果您传递一个字符串属性,则输出将是该字符串的值,仅此而已。因此,没有任何东西可以绑定 HTML 属性,即使您可以传入它们。

    如果您想做自己想做的事,则必须创建自定义显示模板。这可以通过添加以types 命名的视图(例如StringBooleanByte 等)或DataType enum 的成员(CreditCardEmailAddress 等)到@987654336 @。例如,如果您在Views\Shared\DisplayTemplates\String.cshtml 创建了一个视图,那么当您使用string 类型的属性调用DisplayFor 时,该视图将用于渲染它。然后,您可以将原本直接输出的值包装在您选择的某些 HTML 中,并利用 ViewData 应用适当的 HTML 属性。例如:

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

    【讨论】:

      【解决方案3】:

      区别在于@Html.LabelFor辅助函数渲染一个&lt;label&gt;&lt;/label&gt;标签,而@Html.DisplayFor辅助函数不渲染任何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>
      

      【讨论】:

      • 需要=那里。 @Html.DisplayFor(model => model.MyName)
      • 我不认为这是正确的 - LabelFor 不会返回属性的 name,而不是值“Martin”?
      • 同意@msulis。 LabelFor 不会返回任何字段值,它将返回属性名称。
      • 假设您的班级有一个名为 FirstName 的属性。 LabelFor(model => model.FirstName) 将返回“FirstName”。如果您将 Display(Name = "First Name") 属性添加到该类,LabelFor 将返回“First Name”(或您在 Display 属性中添加的任何内容)。
      猜你喜欢
      • 2013-09-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-06-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多