How to automatically add the placeholder attribute to an html input number in mvc 4?

Question

This is a very specific problem. I was able to automatically add the placeholder attribute to the html5 email input type using an editor template named EmailAddress.cshtml saved in ~/Views/Shared/EditorTemplates/ . See code below:

 @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = "text-box single-line", placeholder = ViewData.ModelMetadata.Watermark }) 

This works because I use [DataType(DataType.EmailAddress)] DataAnnotation in my view model.

What doesn't work when I use the int? variable int? .

 public class MiageQuotaRequestViewModel { [Required] [DataType(DataType.EmailAddress)] [Display(Name = "Nombre de place demandées", Prompt = "Nombre de place")] [Range(0, 50, ErrorMessage = "La demande doit être comprise entre 0 et 50 places")] public int? RequestedQuota { get; set; } } 

@Html.EditorFor translates this entry as follows:

 <input class="text-box single-line" data-val="true" data-val-number="The field Nombre de place demandées must be a number." data-val-range="La demande doit être comprise entre 0 et 50 places" data-val-range-max="50" data-val-range-min="0" data-val-required="Le champ Nombre de place demandées est requis." id="RequestedQuota" name="RequestedQuota" type="number" value=""> 

The problem is that I cannot display Prompt DataAnnotation (usually translated placeholder ). In addition, the DataType enumeration DataType not have any “number” or “integer” meaning, which may allow me to use the EditorTemplate, as I did for the DataType EmailAddress.

Answer 1

Based on Pat Burke's comment, I can use the UIHint data attribute in combination with a good editor template.

Here is an example ( Editor Template ):

 @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = "text-box single-line", placeholder = ViewData.ModelMetadata.Watermark, type = "number" }) 

(the ViewModel )

 public class MiageQuotaRequestViewModel { [Required] [UIHint("Number")] [DataType(DataType.EmailAddress)] [Display(Name = "Nombre de place demandées", Prompt = "Nombre de place")] [Range(0, 50, ErrorMessage = "La demande doit être comprise entre 0 et 50 places")] public int? RequestedQuota { get; set; } } 

and finally the result:

 <input class="text-box single-line" data-val="true" data-val-number="The field Nombre de place demandées must be a number." data-val-range="La demande doit être comprise entre 0 et 50 places" data-val-range-max="50" data-val-range-min="0" data-val-required="Le champ Nombre de place demandées est requis." id="RequestedQuota" name="RequestedQuota" placeholder="Nombre de place" type="number" value="">