5

I am trying to setup my model so I can use the @Html.EditorFor(e => e.publicationTitle) and have it show a Watermark with a hint.

Currently I am doing 

@Html.LabelFor(e => e.PublicationTitle) @Html.TextBox("PublicationTitle",tempTitle.ToString(), new { style = "width:350px", placeholder = "Put title here" })
       @Html.ValidationMessageFor(e => e.PublicationTitle)

I have found that you can put a [Display(Prompt="Enter title here")] in my model

but it is not showing up in my view for some reason.

On a side note. I did try to follow the instructions from this post Html5 Placeholders with .NET MVC 3 Razor EditorFor extension?

At the end of this post it says to change the ~/Views/Shared/EditorTemplates/String.cshtml file but this file is not located in my project.

Any hints would be appreciated. Thank you in advance.

FOLLOW UP!

Ah the joys of MVC3. Apparently the above post answers the question once you understand what is going on. If you create the EditorTemplates/String.cshtml file in your ~/Views/Shared/ folder then it will use this template for your editfor boxes.

Final Answer to be concise for others looking will be posted below.

Community
  • 1
  • 1
samack
  • 815
  • 11
  • 28
  • 1
    have a look at the following post; http://stackoverflow.com/questions/5824124/html5-placeholders-with-net-mvc-3-razor-editorfor-extension – tugberk Aug 05 '11 at 18:06
  • I looked at that post but it talks about creating custom attributes. There is one Built in and I should be able to use it. The second answer down in that post talkabout about modifying ~/Views/Shared/EditorTemplates/MultilineText.cshtml but I cannot find that file in my project. – samack Aug 05 '11 at 18:33
  • 1
    there is a specific answer for your question there : http://stackoverflow.com/questions/5824124/html5-placeholders-with-net-mvc-3-razor-editorfor-extension/6578465#6578465 – tugberk Aug 06 '11 at 07:15
  • I understand that question seems to answer what I am asking but that file it refers you to edit does not exist anywhere in my project. – samack Aug 07 '11 at 01:59

3 Answers3

12

In your controller you need to do the following

[Display(Prompt="First Name Goes Here",Name="First Name")]
[StringLength(100,ErrorMessage="First Name may not be longer than 100 characters")]
public string AuthFirstName { get; set; }

The Prompt="This is what will display" under display is the watermark that will be created.

Then you will need to create the folder "EditorTemplates" under ~/Views/Shared the entire path will be ~/Views/Shared/EditorTemplates/

Then create the file String.cshtml and place the following code in it

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

More detailed information can be found at the link posted by tugberk (SO question and SO answer).

Community
  • 1
  • 1
samack
  • 815
  • 11
  • 28
1

This will not work with IE unfortunately. At least IE9 and earlier. I spent couple hours pulling my hair as to why this helped others and doesn't work here. Apparently IE won't show prompts. Hope IE10 will address the issue.

Display Name
  • 4,672
  • 1
  • 33
  • 43
0

The placeholder attribute is not supported in earlier versions of IE, so for the Display[(Promt="...")] to work fine I recommend to use (along with the String template as Samack described) any jQuery watermark plugin (I used the google one) then add this to the Document.Ready function:

$(document).ready(function(){
    $(':text').watermark({ textAttr: 'placeholder' });
})
Styxxy
  • 7,462
  • 3
  • 40
  • 45
el bayames
  • 21
  • 3