MVC 5 Placeholders, Prompts and Watermarks

I have noticed an issue with the MVC project in Visual Studio that I am sure others have seen too.  I say this because I have seen a number of solutions in StackOverflow and the ASP.Net forums.  This post is not about some great way to write your own extensions and automagically have the placeholder set in the HTML that is displayed to the user.  No, this is a much simpler method.

Just manually set the placeholder in your Razor syntax.  Chances are you are going in there anyway to tweak a few things instead of using what Visual Studio scaffolded for you.  I would still recommend setting the Prompt in your model though, I suspect that one day this will get fixed or you might actually need it to be automatically generated.  In fact I’d say that if you are writing your own Edit Templates you should include the small extra step to make it auto-generated.

If you are not doing that, here is the easiest fix or work around.

Given this simple model for a customer phone number.  You can ignore that Regex if it doesn’t work for you, in my example this assumes a US phone number with an optional +1 in front of the number, or feel free to take that and make it your own. Normally you would want to use the Prompt argument as part of your display settings, so still do that in your models.

[Required]
[RegularExpression("^(\\+?1?( ?.?-?\\(?\\d{3}\\)?) ?.?-?)?(\\d{3})( ?.?-? ?\\d{4})$", ErrorMessage = "Please enter a properly formatted Phone.")]
[DataType(DataType.PhoneNumber)]
[Display(Name = "Customer Phone", Prompt = "(123) 456-7890")]
public string Phone { get; set; }

Here is what we would put in our Razor syntax to generate a form field with the watermark. As part of your htmlattributes object add an attribute for placeholder and set that to what you entered for your prompt.

<div class="form-group">
    @Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10&amp">
        @Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control", placeholder = "(123) 456-7890" } })
        @Html.ValidationMessageFor(model > model.Phone, "", new { @class = "text-danger" })
    </div>
</div>
Advertisements

About SheldonS

Web developer for over 15 years mainly with Microsoft technologies from classic ASP to .NET 4. Husband, father, and aspiring amateur photographer.

Posted on October 6, 2014, in .NET, MVC and tagged . Bookmark the permalink. 3 Comments.

  1. Very helpful. I am a back end designer building a prototype on the asp.net Identity system.
    I have been to avoid Razor and HTML in general but I needed a nice telephone field
    Thank you so much.

  2. Conclusion: prompt property in model doesn’t reder on MVC view with any default html helper. Hope so can be fixed in next MVC release.

  3. very helpful. thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: