In # MVC3, is there a way to add the HTML5 placeholder attribute using the DataAnnotations attribute?

Question

considering that this is my model

public class ValidationModel { #region Properties [Display(Prompt = "type a PostCode here")] public string PostCode { get; set; } } 

and this is my opinion

 @using (Html.BeginForm()) { @Html.LabelFor(m => m.PostCode) @Html.TextBoxFor(m => m.PostCode) } 

there is a way to do the rendering

 <input data-val="true" id="PostCode" name="PostCode" placeholder="type a PostCode here" type="text" value="" /> 

I could not get it to work, even if from the documentation http://bit.ly/jVpM8X I can clearly see that the task should be executed in the help window

Answer 1

I can’t be 100% sure, but it looks like the watermarks turned it into metadata code (there is a clear standard way to define the string that comes with the property), but not the presentation code, since there is no but a universal way to handle watermarks on the client side .

If adding attributes manually does not work, the best option is probably to create a new HTML helper Html5TextBoxFor and use this instead of the standard TextBoxFor.

Inside this helper, you can get the invitation text using ModelMetadata.FromLambdaExpression and then call TextBox to use the custom html attribute object generated from the metadata.

Answer 2

 @Html.TextBoxFor(m => m.PostCode, new { placeholder = "type a postcode ..." } ) 

Answer 3

I need this exact functionality, but I did not want to get EditorFor and change all my EditorFor to something else (I have a lot of pages :)).

For this, I simply created an EditorTemplate for String (you can do this for other types if you need it).

Based on my model properties, which I use DisplayName , like this:

 [DisplayName("Client Name")] public string ClientName { get; set; } 

The template was simple:

 @model string @Html.TextBoxFor(m => m, new { @placeholder = ViewData.ModelMetadata.DisplayName }) 

And then my calling code remained the same:

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

Alternatively, you can use this work for non-HTML5 browsers with this exact code. All I did was add a script link to this great jQuery plugin poster , and all my placeholders even work in IE6 (!!!!).

Answer 4

Any html attribute in the razor view can be added to the HTML helper by assigning a property value to @html.control using the new {} keyword, then defining the attribute starting with the @ symbol if you use a reserved razor keyword that represents the attribute html, for example class , you need to add @ before this word, just like the Razor engine handles HTML DOM elements, for example:

  @Html.TextBoxFor(x => x.Name, new { @class = "form-control", placeholder = "Your Name" } ) 

Answer 5

You can also create your own HtmlHelper extension method to do this, as described in this article: http://mvcdiary.com/2012/09/28/create-a-custom-htmlhelper-textboxfor-to-display-label- text-as-placeholder-integrated-with-twitter-bootstrap /

Answer 6

Although you may never do this, as a proof of concept you can do this:

Model:

 [Required, Display(Description = "Type your note here...")] public string Note { get; set; } 

View:

 @Html.TextAreaFor(x => x.Note, new { placeholder = ViewData.ModelMetadata .Properties.FirstOrDefault(x => x.PropertyName == "Note")?.Description })