ASP.NET MVC Data Annotations Formatting @Html.EditorFor percentage


I'm trying to make a good input field for the user using razor and mvc. It's supposed to be formatted as a percentage with two decimal places. I have these attributes:

    [Display(Name = "Upside strike")]
    [DisplayFormat(DataFormatString = "{0:P2}", ApplyFormatInEditMode = true)]
    [Range(1, 2, ErrorMessage = "Upside strike must be between 100% and 200% ")]
    public decimal CallPercentStrike { get; set; }

I'm using jQuery validate (standard), but I'm not sure it's working as intended. For instance, this doesn't seem right because it's using the percentage symbol:

enter image description here

And this should be formatted as 100 %, but it's just 1...

enter image description here

The only time the format is actually doing anything is when the form is loaded initially:

enter image description here

Is this intended? Or am I doing it wrong? Or am I asking for too much? You know those super cool fields on websites that automatically format your stuff as you type? I want there to be a percentage appended as the user types and then have it converted back to a decimal between 1 and 2 when the form submits :)

EDIT: here's the call to EditorFor:

<div class="form-group">
@Html.LabelFor(m => Model.CallPercentStrike, new { @class = "control-label col-md-2" })
<div class="col-md-10">
    @Html.EditorFor(model => model.CallPercentStrike, new { htmlAttributes = new { @class = "form-control", placeholder="Enter as decimal", type="number"} })
    @Html.ValidationMessageFor(model => model.CallPercentStrike, "", new { @class = "text-danger" })


This video can help you solving your question :)
By: admin