添加基于模型属性的CSS类

本文关键字：属性 CSS 模型 于模型 添加 | 更新日期: 2023-09-27 18:03:24

我有一个模型元素，像这样:

[Required]
[Display(Name = "First name")]
[StringLength(50)]
public string FirstName { get; set; }

，我使用EditorFor将其抽出到页面，如下所示:

@Html.EditorFor(x => x.FirstName )

我在一个页面上有很多这样的元素，并且希望根据模型是否具有[Required]属性向名为'Required'的输入字段添加一个CSS类。

添加…

@Html.EditorFor(x => x.FirstName, new { @class = "Required" }) )

…看起来有点手动。有没有办法可以动态地做到这一点?

Thanks in advance

添加基于模型属性的CSS类

似乎有点手动。

，最重要的是不能工作。与TextBoxFor帮助器相反，EditorFor帮助器的第二个参数并没有做您认为它做的事情。您可以编写一个自定义元数据提供程序，它允许您使用自定义属性来修饰视图模型属性，并指定要应用于编辑器模板的类:

[Required]
[Display(Name = "First name")]
[StringLength(50)]
[HtmlProperties(CssClass = "Required")]
public string FirstName { get; set; }

如果你不需要支持最老的浏览器，你也可以使用data-val-required html属性，它已经自动添加到字段。在CSS中，这将是例如input[type="text"][data-val-required] { border-left: 2px solid blue; }。

我建议重写创建一个EditorTemplate:/Views/Shared/EditorTemplates/String.cshtml

把这个放到内容中(对不起，未经测试!):

@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = "text-box single-line" + (ViewData.ModelMetadata.IsRequired ? " required" : "") })
相关文章：