mvc3 - adding CSS class based on model attributes

Question

I've got a model element like so:

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

and I'm using an EditorFor to pump it out to the page like so:

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

I have many of these elements on a page and would like to add a CSS class to the input field called 'Required' based on whether or not the model has a [Required] attribute.

Adding...

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

...seems a bit manual. Is there a way I can do this dynamically?

Thanks in advance

Darin Dimitrov · Accepted Answer · 2011-07-22 09:47:19Z

6

seems a bit manual.

and most importantly not working. The second argument of the EditorFor helper doesn't do what you think it does, contrary to the TextBoxFor helper. You could write a custom metadata provider which would allow you to decorate our view model property with a custom attribute and specify the class to apply on the editor template:

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

answered Jul 22, 2011 at 9:47

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mika Tähtinen · Accepted Answer · 2011-07-22 09:58:19Z

4

In case you don't need to support the oldest browsers, you could also use the data-val-required html attribute which is already automatically added to the fields. In CSS this would be for example input[type="text"][data-val-required] { border-left: 2px solid blue; }.

answered Jul 22, 2011 at 9:58

Mika Tähtinen

9837 silver badges10 bronze badges

1 Comment

Sniffer Over a year ago

That'll do for me. Thanks for all the comments!

Martin Booth · Accepted Answer · 2011-07-22 10:00:02Z

0

I would suggest overriding creating an EditorTemplate: /Views/Shared/EditorTemplates/String.cshtml

Put this in the contents (sorry untested!):

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

answered Jul 22, 2011 at 10:00

Martin Booth

8,59533 silver badges31 bronze badges

Collectives™ on Stack Overflow

mvc3 - adding CSS class based on model attributes

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related