CODEWITHSUNDEEP
asp.net-mvchtml
John S
John S

Reputation: 8341

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

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?

Upvotes: 21

Views: 55142

Answers (10)

T-moty
T-moty

Reputation: 2797

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.

Upvotes: 2

Sabin Kumar Sharma
Sabin Kumar Sharma

Reputation: 1129

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)]

Upvotes: -1

The girl with red hair
The girl with red hair

Reputation: 229

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!

Upvotes: 10

Shalom Dahan
Shalom Dahan

Reputation: 394

Use TextBoxFor:

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

Upvotes: 5

marapet
marapet

Reputation: 56466

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.

Upvotes: 7

Muhammad Bilal
Muhammad Bilal

Reputation: 389

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

Upvotes: 2

dc922
dc922

Reputation: 639

Use TextBoxFor like so: 

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

Upvotes: 1

John S
John S

Reputation: 8341

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)

Upvotes: 44

Prabu
Prabu

Reputation: 4187

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.

Upvotes: -1

CSharper
CSharper

Reputation: 5580

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 })

Upvotes: 0

Related Questions