Problems with the [DataType] Annotation

Question

This is my code in the Model:

[Required(ErrorMessage = "The url is required")]
[Url(ErrorMessage = "Invalid URL")]
public String Url { get; set; }

This is my code in the view:

<div class="input-group">
    <span class="input-group-addon glyphicon glyphicon-link"></span>
    @Html.TextBoxFor(m => m.Url, new { @class = "form-control", placeholder = "Feed URL" })
    @Html.ValidationMessageFor(m => m.Url)
</div>*emphasized text*

The problem is that the Url annotation, should render an input with an attribute type="url"

This is what i get:

<input class="form-control" data-val="true" data-val-required="The url is required" data-val-url="Invalid URL" id="Url" name="Url" placeholder="Feed URL" type="text" value="">

This is what i should get:

<input class="form-control" data-val="true" data-val-required="The url is required" data-val-url="Invalid URL" id="Url" name="Url" placeholder="Feed URL" type="url" value="">

The type of the first is "text", and for the input that I should get is "url".

Answer 1

you can manually set the type i.e

new { @class = "form-control", placeholder = "Feed URL", type="url" }

because you are using the Html.TextBoxFor, it will render the type as text.

you could always use Html.EditorFor and then create your own editor template "url" and pass the required html attributes in the viewdata.