How do I add placeholder text from the model into a MVC view?

Question

I have a model:

[DataType(DataType.EmailAddress)]
[DisplayFormat(ConvertEmptyStringToNull = true)]
[Display(Prompt = "Email Address")]
public string Email { get; set; }

I am trying to get the "prompt" to show in the placeholder text of the resulting text box with the following:

@Html.EditorFor(model => model.Email, 
new { htmlAttributes = new { @class = "form-control input-md",
placeholder = @ViewData.ModelMetadata.Watermark } })

When I view the generated HTML I only get "placeholder" in the input tag. According to what I have read ViewData.ModelMetadata.Watermark should work. What is the correct way to get this placeholder text in place?

This sort of thing can be done with `[UIHint]` and a custom template - see [this answer](https://stackoverflow.com/a/14571765/957950) to a similar question. — brichins, Mar 28 '18 at 18:13

score 43 · Accepted Answer · answered Mar 01 '14 at 05:54

43

This solved my issue:

@Html.EditorFor(model => model.Email, new { htmlAttributes = 
new { @class = "form-control input-sm", 
placeholder = @Html.DisplayNameFor(m=>m.Email) } })

The code that did it was

placeholder = @Html.DisplayNameFor(m=>m.Email)

answered Mar 01 '14 at 05:54

John S

7,909
21
77
145

1

But when i use DisplyName and Display attribute, one is for label and another is for Placeholder then this is showing me same for both in Name and Placeholder which i define in DisplayName – Smit Patel Jun 02 '16 at 11:44
1

This will double-escape the display name - no problem for "Email", but if you're displaying for example text with accents (french), this will be a problem. – marapet Apr 25 '17 at 13:45

score 10 · Answer 2 · answered May 04 '17 at 13:26

10

A little late, but if someone is still looking for it...

@Html.EditorFor(model => model.Email, 
new { htmlAttributes = new { @class = "form-control input-md",
@placeholder = "Whatever you want as a placeholder" } })

It's perfect and clean!

answered May 04 '17 at 13:26

The girl with red hair

229
3
9

This helped me and it works in tested browsers (Firefox, Chrome, Edge and IE11) – H35am Aug 30 '17 at 11:55

score 7 · Answer 3 · answered Apr 25 '17 at 13:43

The correct solution to get the Prompt value instead of the DisplayName in a non-templated control context is the following:

@Html.EditorFor(model => model.Email, 
    new { @class = "form-control input-md",
    placeholder = ModelMetadata.FromLambdaExpression(m => m.Email, ViewData).Watermark
})

This will also - unlike the accepted solution using @Html.DisplayNameFor(m=>m.Email) - not double-escape the watermark text, which depending on the text and the language displayed can be a problem.

Shalom Dahan · Answer 4 · 2017-04-25T22:01:52.853

5

Use TextBoxFor:

@Html.TextBoxFor(m => m.Email, new { @class = "form-control", @placeholder = Html.DisplayNameFor(m => m.Email) })

edited Apr 25 '17 at 22:01

answered Apr 25 '17 at 21:54

Shalom Dahan

335
7
19

Your solution will not work in all the browsers (tested in Firefox, Edge and IE11) – H35am Aug 30 '17 at 11:53
what new you brought, your solution is same as the accepted answer. – Jawand Singh Jun 11 '18 at 13:10

score 2 · Answer 5 · edited Oct 28 '15 at 14:45

2

@Html.TextBoxFor(m => m.Email, new { @class = "form-control" , @placeholder = "Username" })

edited Oct 28 '15 at 14:45

Pavel Oganesyan

6,774
4
46
84

answered Aug 06 '15 at 06:48

Muhammad Bilal

359
3
5

score 2 · Answer 6 · answered Mar 15 '21 at 15:15

I know, i'm a bit late, but an extension method ad-hoc like this one is the best solution imho:

public static string UnencodedDisplayNameFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression)
{
    var displayName = html.DisplayNameFor(expression).ToString();
    var unencodedDisplayName = HttpUtility.HtmlDecode(displayName);

    return unencodedDisplayName;
}

Usage:

@Html.EditorFor(model => model.Email, new
{
    htmlAttributes = new
    {
        @class = "form-control input-sm",
        placeholder = Html.UnencodedDisplayNameFor(m => m.Email) 
    }
})

This solution won't add complexity (like using ModelMetadata) or duplicate labels (like some other answers), and provides full support on accents.

score 1 · Answer 7 · answered Oct 24 '14 at 20:19

1

Use TextBoxFor like so:

 @Html.TextBoxFor(model => model.LastName, new{placeholder="Last Name"})

answered Oct 24 '14 at 20:19

dc922

629
3
14
27

CSharper · Answer 8 · 2014-02-28T21:27:28.043

0

In your controller method that renders view say

ViewData["Name"] = "blabbity blah";

then

@Html.TextBoxFor(u => u.Company, new { @placeholder = @ViewData["Name"] })

Actually better yet you can do this.

 public ActionResult Index()
    {              
          NewLogin n = new ClassModel().PopModel();
          n.Company = "fsdfsdf";

          return View(n);
    }

@Html.TextBoxFor(u => u.Company, new { @placeholder = Model.Company })

edited Feb 28 '14 at 21:27

answered Feb 28 '14 at 21:22

CSharper

5,420
6
28
54

1

I really want to avoid TextBoxFor and stick with EditorFor to keep the data annotations and validations in place. – John S Feb 28 '14 at 22:00

score -1 · Answer 9 · edited May 23 '17 at 12:26

-1

Check out this answers to this question, which has been answered aleady (a few times).

@Html.EditorFor uses templates, and so the approach to this problem is using a customised template.

edited May 23 '17 at 12:26

Community

1
1

answered Mar 01 '14 at 04:42

Prabu

4,097
5
45
66

The linked questions don't address the specific question of populating "placeholder" from an attribute tag. However, using a customized template is a valid approach here - would be nice to have example code here though. – brichins Mar 28 '18 at 18:08

score -1 · Answer 10 · edited May 16 '20 at 22:17

-1

you can use it as follows for the date which will also give you a "datetime" picker.

[DisplayFormat(DataFormatString ="{0:yyyy-MM-dd}",ApplyFormatInEditMode =true)]

edited May 16 '20 at 22:17

FortyTwo

2,414
3
22
33

answered Sep 21 '15 at 17:59

Sabin Kumar Sharma

1,081
2
8
12

How do I add placeholder text from the model into a MVC view?

10 Answers10

Linked