Html5 Placeholders with .NET MVC 3 Razor EditorFor extension?

by

As smnbss comments in Darin Dimitrov’s answer, Prompt exists for exactly this purpose, so there is no need to create a custom attribute. From the the documentation:

Gets or sets a value that will be used
to set the watermark for prompts in
the UI.

To use it, just decorate your view model’s property like so:

[Display(Prompt = "numbers only")]
public int Age { get; set; }

This text is then conveniently placed in ModelMetadata.Watermark. Out of the box, the default template in MVC 3 ignores the Watermark property, but making it work is really simple. All you need to do is tweaking the default string template, to tell MVC how to render it. Just edit String.cshtml, like Darin does, except that rather than getting the watermark from ModelMetadata.AdditionalValues, you get it straight from ModelMetadata.Watermark:

~/Views/Shared/EditorTemplates/String.cshtml:

@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = "text-box single-line", placeholder = ViewData.ModelMetadata.Watermark })

And that is it.

As you can see, the key to make everything work is the placeholder = ViewData.ModelMetadata.Watermark bit.

If you also want to enable watermarking for multi-line textboxes (textareas), you do the same for MultilineText.cshtml:

~/Views/Shared/EditorTemplates/MultilineText.cshtml:

@Html.TextArea("", ViewData.TemplateInfo.FormattedModelValue.ToString(), 0, 0, new { @class = "text-box multi-line", placeholder = ViewData.ModelMetadata.Watermark })

More Related Contents:

  1. MVC4 DataType.Date EditorFor won’t display date value in Chrome, fine in Internet Explorer
  2. How to use dashes in HTML-5 data-* attributes in ASP.NET MVC
  3. Html attributes for EditorFor() in ASP.NET MVC
  4. Html5 data-* with asp.net mvc TextboxFor html attributes
  5. SelectListItem with data-attributes
  6. MVC Datatype Currency trigger numeric keypad
  7. How to link HTML5 form action to Controller ActionResult method in ASP.NET MVC 4
  8. Why does the DropDownListFor lose the multiple selection after Submit but the ListBoxFor doesn’t?
  9. How to handle checkboxes in ASP.NET MVC forms?
  10. ASP.NET MVC Ajax Error handling
  11. ASP.NET MVC – Removing controller name from URL
  12. Adding html class tag under in Html.DropDownList
  13. How to get Windows user name when identity impersonate=”true” in asp.net?
  14. Display DateTime value in dd/mm/yyyy format in Asp.NET MVC
  15. Return a JSON string explicitly from Asp.net WEBAPI?
  16. How to create custom validation attribute for MVC
  17. Allow multiple roles to access controller action
  18. How can I pass parameters to a partial view in mvc 4
  19. pass enum to html.radiobuttonfor MVC3
  20. Does a view exist in ASP.NET MVC?
  21. asp.net mvc complex routing for tree path
  22. ASP.NET MVC Programmatically Get a List of Controllers
  23. MVC ajax json post to controller action method
  24. ASP.NET (OWIN) Identity: How to get UserID from a Web API controller?
  25. MVC 5 prevents access to content via Iframe
  26. how to lock an asp.net mvc action?
  27. There is already an object named ‘AspNetRoles’ in the database
  28. Owin Self host & ASP .Net MVC
  29. active menu item – asp.net mvc3 master page
  30. How do I redirect a user to a custom 404 page in ASP.NET MVC instead of throwing an exception?

Leave a Comment