Html5 Placeholders with NET MVC 3 Razor EditorFor extension

Question

Is there a way to write the Html5 placeholder using  Html EditorFor  or should I just use the TextBoxFor extension i e    Html TextBoxFor model   gt  model Title  new    placeholder    Enter title here      Or would it make sense to write our own custom extension that can maybe use the  Description  display attribute via DataAnnotations  similar to this    Of course  then the same question applies to  autofocus  as well

User · Answer

I use this way with Resource file  don t need Prompt anymore      Html TextBoxFor m   gt  m Name  new          class    form-control        placeholder    Html DisplayName  Resource PleaseTypeName        autofocus    autofocus        required    required

User · Answer

I think create a custom EditorTemplate is not good solution  beause you need to care about many possible tepmlates for different cases  strings  numsers  comboboxes and so on   Other solution is custom extention to HtmlHelper   Model   public class MyViewModel        PlaceHolder  Enter title here        public string Title   get  set        Html helper extension      public static MvcHtmlString BsEditorFor lt TModel  TValue gt  this HtmlHelper lt TModel gt  htmlHelper      Expression lt Func lt TModel  TValue gt  gt  expression  string htmlClass             var modelMetadata   ModelMetadata FromLambdaExpression expression  htmlHelper ViewData       var metadata   modelMetadata       var viewData   new               HtmlAttributes   new                                class   htmlClass                  placeholder   metadata Watermark                           return htmlHelper EditorFor expression  viewData        A corresponding view    Html BsEditorFor x   gt  x Title

User · Answer

You may take a look at the following article for writing a custom DataAnnotationsModelMetadataProvider    And here s another  more ASP NET MVC 3ish way to proceed involving the newly introduced IMetadataAware interface   Start by creating a custom attribute implementing this interface   public class PlaceHolderAttribute   Attribute  IMetadataAware       private readonly string  placeholder      public PlaceHolderAttribute string placeholder                 placeholder   placeholder             public void OnMetadataCreated ModelMetadata metadata                metadata AdditionalValues  placeholder      placeholder            And then decorate your model with it   public class MyViewModel        PlaceHolder  Enter title here        public string Title   get  set        Next define a controller   public class HomeController   Controller       public ActionResult Index                 return View new MyViewModel               A corresponding view    model MyViewModel  using  Html BeginForm           Html EditorFor x   gt  x Title       lt input type  submit  value  OK    gt      And finally the editor template    Views Shared EditorTemplates string cshtml           var placeholder   string Empty      if  ViewData ModelMetadata AdditionalValues ContainsKey  placeholder                  placeholder   ViewData ModelMetadata AdditionalValues  placeholder   as string           lt span gt       Html Label ViewData ModelMetadata PropertyName       Html TextBox     ViewData TemplateInfo FormattedModelValue  new   placeholder   placeholder     lt  span gt

User · Answer

I ve wrote such a simple class   public static class WatermarkExtension       public static MvcHtmlString WatermarkFor lt TModel  TValue gt  this HtmlHelper lt TModel gt  html  Expression lt Func lt TModel  TValue gt  gt  expression                var watermark   ModelMetadata FromLambdaExpression expression  html ViewData  Watermark          var htmlEncoded   HttpUtility HtmlEncode watermark           return new MvcHtmlString htmlEncoded             The usage as such    Html TextBoxFor model   gt  model AddressSuffix  new  placeholder   Html WatermarkFor model   gt  model AddressSuffix      And property in a viewmodel    Display ResourceType   typeof  Resources   Name    AddressSuffixLabel   Prompt    AddressSuffixPlaceholder    public string AddressSuffix       get   return  album AddressSuffix        set    album AddressSuffix   value        Notice Prompt parameter  In this case I use strings from resources for localization but you can use just strings  just avoid ResourceType parameter

User · Answer

Here is a solution I made using the above ideas that can be used for TextBoxFor and PasswordFor   public static class HtmlHelperEx       public static MvcHtmlString TextBoxWithPlaceholderFor lt TModel  TProperty gt  this HtmlHelper lt TModel gt  htmlHelper          Expression lt Func lt TModel  TProperty gt  gt  expression  object htmlAttributes                var metadata   ModelMetadata FromLambdaExpression expression  htmlHelper ViewData           return htmlHelper TextBoxFor expression  htmlAttributes AddAttribute  placeholder   metadata Watermark                public static MvcHtmlString PasswordWithPlaceholderFor lt TModel  TProperty gt  this HtmlHelper lt TModel gt  htmlHelper          Expression lt Func lt TModel  TProperty gt  gt  expression  object htmlAttributes                var metadata   ModelMetadata FromLambdaExpression expression  htmlHelper ViewData           return htmlHelper PasswordFor expression  htmlAttributes AddAttribute  placeholder   metadata Watermark              public static class HtmlAttributesHelper       public static IDictionary lt string  object gt  AddAttribute this object htmlAttributes  string name  object value                var dictionary   htmlAttributes    null   new Dictionary lt string  object gt      htmlAttributes ToDictionary            if   String IsNullOrWhiteSpace name   amp  amp  value    null  amp  amp   String IsNullOrWhiteSpace value ToString                 dictionary Add name  value           return dictionary             public static IDictionary lt string  object gt  ToDictionary this object obj                return TypeDescriptor GetProperties obj               Cast lt PropertyDescriptor gt                 ToDictionary property   gt  property Name  property   gt  property GetValue obj

User · Answer

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

User · Answer

I actually prefer to use the display name for the placeholder text majority of the time  Here is an example of using the DisplayName      Html TextBoxFor x   gt  x FirstName  true  null  new    class    form-control   placeholder   Html DisplayNameFor x   gt  x FirstName

[asp.net-mvc] Html5 Placeholders with .NET MVC 3 Razor EditorFor extension?

Examples related to asp.net-mvc

Examples related to html

Examples related to editorfor