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

Question

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 by placeholder). Also, the DataType enum doesn't have any "number" or "integer" value that can allow me to use the EditorTemplate like I did for the EmailAddress DataType.

Mir

Why is an email address of type Nullable<int>? – Vasilek

I probably explained it in the wrong way. The email part is a sample of what works. The second part (with int?) is what doesn't. The type for the email is string like this: [Required, MaxLength(100), DataType(DataType.EmailAddress), Display(Name = "Adresse e-mail", Prompt = "Votre adresse e-mail"), Email(ErrorMessage = "Adresse e-mail invalide")] public string EmailAddress { get; set; } – Mir

So the goal is to get the correct editor template to be used? If so you can use the [UIHint] attribute to specify to Razor which template you'd like to use: msdn.microsoft.com/en-us/library/… – Vasilek

Have you checked out #7761099 ? – Bis

Answer 1

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="">

Mir

If that is your editor template then your Model attributes are doing absolutely nothing. – Fry