在MVC3中，是否有一种方法可以使用DataAnnotations属性添加HTML5的placeholder属性？

Question

假设这是我的模型

public class ValidationModel
{
    #region Properties

    [Display(Prompt = "type a PostCode here")]
    public string PostCode { get; set; }

}

and this is my view

@using (Html.BeginForm())
{
    @Html.LabelFor(m => m.PostCode)
    @Html.TextBoxFor(m => m.PostCode)

}

有没有办法让它渲染出来？

<input data-val="true" id="PostCode" name="PostCode" placeholder="type a PostCode here" type="text" value="" />

即使从http://bit.ly/jVpM8X的文档中可以清楚地看到Display Prompt应该可以完成工作，但我仍然无法使其工作。

- smnbss

---

请访问我们的http://aspnet.codeplex.com/wikipage?title=ASP.NET%20MVC%204%20RoadMap网站进行请求。如果您需要，可以告诉我。 - RickAndMSFT

Answer 1

@Html.TextBoxFor(m => m.PostCode, 
    new { placeholder = "type a postcode ..." } )

- Dennis Traub

---

是的，我看到了，但是我想在模型上使用DataAnnotaion属性（Display Prompt），而不是从视图添加占位符属性。 - smnbss

Answer 2

我需要这个确切的功能，但我不想去改变所有我的EditorFor，让它们变成其他的东西（我有很多页面 :))。

为了实现这一点，我只需为String创建一个EditorTemplate（如果需要，您可以为其他类型执行此操作）。

根据我的模型属性，我使用DisplayName，像这样：

[DisplayName("Client Name")]
public string ClientName { get; set; }

模板很简单：

@model string

@Html.TextBoxFor(m => m, new { @placeholder = ViewData.ModelMetadata.DisplayName })

然后我的调用代码保持完全相同：

@Html.EditorFor(m => m.FirstName)

另外，您可以使用精确的代码使其适用于非HTML5浏览器。我所做的只是添加了一个脚本引用到这个伟大的jQuery占位符插件，我的所有占位符甚至在IE6中都能正常工作(!!!!)。

- mattytommo

Answer 3

我不能百分之百确定，但看起来水印已经被加入了元数据代码（有一种明确的标准方法来定义与属性相关的字符串），但尚未在视图代码中实现，因为目前还没有普遍支持的处理客户端水印的方式。

如果手动添加属性无效，则最好的选择可能是创建一个新的HTML助手Html5TextBoxFor，并使用它来替代标准的TextBoxFor。

在该助手中，您可以通过ModelMetadata.FromLambdaExpression获取提示文本，然后使用从元数据生成的自定义html属性对象调用TextBoxFor。

- Tom Clarkson

Answer 4

在Razor视图中，任何HTML属性都可以通过在@html.control中使用new {}关键字分配属性值，然后以@符号开头定义属性来添加到HTML Helper中。如果您在Razor中使用代表HTML属性的保留关键字（如class），则需要在该单词之前添加@。Razor引擎处理HTML DOM元素的方式相同。

 @Html.TextBoxFor(x => x.Name, new { @class = "form-control", placeholder = "Your Name" } )

- Ashraf Sada

Answer 5

虽然你可能永远不会真正做到这一点，但作为概念证明，你可以这样做：

模型：

[Required, Display(Description = "Type your note here...")]
public string Note { get; set; }

视图：

@Html.TextAreaFor(x => x.Note, new { placeholder = ViewData.ModelMetadata
    .Properties.FirstOrDefault(x => x.PropertyName == "Note")?.Description })

- Serj Sagan

Answer 6

您也可以创建自己的HtmlHelper扩展方法，如本文所述： http://mvcdiary.com/2012/09/28/create-a-custom-htmlhelper-textboxfor-to-display-label-text-as-placeholder-integrated-with-twitter-bootstrap/

- Christopher King