How to automatically add placeholder attribute to html input type number in mvc 4?
Based on Pat Burke comment, I can use the UIHint data attribute combined with the 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="">
Florent Henry
Updated on July 12, 2022Comments
-
Florent Henry almost 2 years
This is a very specific issue. I managed to automatically add the placeholder attribute to html5 email input type by using an editor template called
EmailAddress.cshtml
, saved in~/Views/Shared/EditorTemplates/
folder. See the code below:@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = "text-box single-line", placeholder = ViewData.ModelMetadata.Watermark })
It works because i'm using the
[DataType(DataType.EmailAddress)]
DataAnnotation in my view model.What doesn't works is when I use a
int?
variable.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 input like this:<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 can't display the
Prompt
DataAnnotation (usually translated byplaceholder
). Also, theDataType
enum doesn't have any "number" or "integer" value that can allow me to use the EditorTemplate like I did for the EmailAddress DataType. -
Serj Sagan over 8 yearsIf that is your editor template then your Model attributes are doing absolutely nothing.